/* ============================================================
   DORNISH — STYLE
   ============================================================ */

/* ---------------- PRELOADER ---------------- */
.preloader{
  position:fixed; inset:0; z-index:999;
  background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition:opacity .8s var(--ease-out), visibility .8s;
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ width:74px; height:74px; }
.preloader-logo{ width:100%; height:100%; object-fit:contain; animation:preSpin 2.4s var(--ease-soft) infinite; }
@keyframes preSpin{ 0%,100%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.05);} }
.preloader-bar{ width:220px; height:2px; background:var(--cream-line); border-radius:2px; overflow:hidden; }
.preloader-bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--green),var(--carrot)); transition:width .25s var(--ease-out); }
.preloader-label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); display:flex; gap:8px; }

/* ---------------- CURSOR GLOW ---------------- */
.cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px;
  border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle, rgba(217,114,42,.10), transparent 70%);
  transform:translate(-50%,-50%);
  will-change:transform; opacity:0; transition:opacity .4s;
}
@media (hover:hover) and (pointer:fine){ .cursor-glow{ opacity:1; } }

/* ---------------- HEADER ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:5px 0;
  transition:padding .4s var(--ease-out), background .4s var(--ease-out), box-shadow .4s var(--ease-out);
  background:rgba(250,244,234,.52);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(33,29,22,.08);
}
.site-header.is-glass{
  padding:12px 0;
  background:rgba(247,241,229,.82);
  box-shadow:0 12px 34px rgba(33,29,22,.1);
  border-bottom:1px solid rgba(255,255,255,.34);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:190px; /*height:62px;*/ object-fit:contain; transition:transform .5s var(--ease-out); }
.header-inner:hover .brand-mark{ transform:rotate(8deg); }

.main-nav{ display:flex; gap:34px; }
.main-nav a{ font-size:14.5px; font-weight:600; color:var(--ink-soft); position:relative; padding:4px 0; }
.main-nav a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--carrot); transition:width .35s var(--ease-out); }
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:16px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:100px; font-weight:700; font-size:14px;
  letter-spacing:.01em;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s;
  position:relative;
}
.btn span{ position:relative; z-index:1; }
.btn-carrot{ background:var(--carrot); color:var(--paper); box-shadow:0 8px 22px rgba(217,114,42,.28); }
.btn-carrot:hover{ background:var(--carrot-deep); box-shadow:0 10px 28px rgba(217,114,42,.4); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--green-deep); }
.btn-ghost{ border:1.5px solid rgba(255,255,255,.5); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-ghost-light{ border:1.5px solid rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.06); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.16); }
.play-dot{ width:9px; height:9px; border-radius:50%; background:var(--carrot); box-shadow:0 0 0 4px rgba(217,114,42,.25); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-toggle span{ height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:98; background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transform:translateY(-100%); transition:transform .5s var(--ease-out);
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav nav{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.mobile-nav a{ font-family:var(--f-display); font-size:26px; font-weight:600; }

/* ---------------- HERO ---------------- */
.hero{ position:relative; height:340vh; background:var(--night); }
.hero-pin{
  position:sticky; top:0; height:100vh; width:100%; overflow:hidden;
  display:flex; align-items:flex-end;
  background:linear-gradient(180deg,#fbf3e2 0%, #f4e6c8 55%, #ecd8ab 100%);
}
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; will-change:contents; transform:translateZ(0);
  image-rendering:auto;
  filter:contrast(1.04) saturate(1.04);
}
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 52% 100%, rgba(20,18,14,.3) 0%, transparent 56%),
    linear-gradient(180deg, rgba(20,18,14,.14) 0%, transparent 30%, transparent 68%, rgba(20,18,14,.18) 100%);
  pointer-events:none;
}
.hero-particles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-particles i{
  position:absolute; border-radius:50%; opacity:.5;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  filter:blur(.3px);
}

.hero-copy{ position:relative; z-index:3; width:100%; padding:0 clamp(20px,5vw,64px) 120px; color:#fff; }
.eyebrow-light{ color:#f2e6c9; }
.eyebrow-light::before{ background:var(--carrot); }
.hero-title{ position:relative; height:2.28em; font-size:clamp(34px,5.6vw,74px); color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.25); max-width:920px; }
.hero-title span{
  position:absolute; left:0; top:0; width:100%;
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.hero-title span.is-active{ opacity:1; transform:translateY(0); }
.hero-actions{ display:flex; gap:16px; margin-top:34px; }

.hero-scrollcue{ position:absolute; right:clamp(20px,5vw,64px); bottom:44px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; color:#f2e6c9; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.scrollcue-line{ width:1px; height:46px; background:rgba(255,255,255,.3); overflow:hidden; }
.scrollcue-line i{ display:block; width:100%; height:16px; background:var(--carrot); animation:cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop{ 0%{ transform:translateY(-16px);} 100%{ transform:translateY(46px);} }

.hero-product-switch{
  position:absolute; left:clamp(20px,5vw,64px); bottom:44px; z-index:3;
  display:flex; gap:10px;
}
.hp-dot{ width:12px; height:12px; border-radius:50%; background:var(--dot); opacity:.4; position:relative; transition:opacity .3s, transform .3s; }
.hp-dot.is-active, .hp-dot:hover{ opacity:1; transform:scale(1.25); }
.hp-dot span{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:11px; color:#fff; background:rgba(20,18,14,.65);
  padding:5px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .25s;
}
.hp-dot:hover span{ opacity:1; }

/* ---------------- POTATO STARCH HERO ---------------- */
.potato-hero{
  position:relative;
  height:360vh;
  background:linear-gradient(180deg, #f7efde 0%, #f3e6c8 55%, #ead9b2 100%);
  overflow:hidden;
}
.potato-hero-pin{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.72) 0%, transparent 34%),
    linear-gradient(180deg, #fbf4e6 0%, #f5e9cd 52%, #eadab4 100%);
}
.potato-hero-pin::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 16%, rgba(217,114,42,.08), transparent 18%),
    radial-gradient(circle at 82% 28%, rgba(110,155,91,.08), transparent 16%),
    radial-gradient(circle at 76% 74%, rgba(217,114,42,.08), transparent 20%);
  pointer-events:none;
}
.potato-hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  will-change:contents;
  transform:translateZ(0);
  image-rendering:auto;
  filter:contrast(1.04) saturate(1.02);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
    url("../ezgif-2071245080c40ee1-jpg/ezgif-frame-001.jpg") center/cover no-repeat;
}
.potato-hero-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(20,18,14,.26) 0%, transparent 58%),
    linear-gradient(180deg, rgba(20,18,14,.08) 0%, transparent 28%, transparent 72%, rgba(20,18,14,.14) 100%);
  pointer-events:none;
}
.potato-hero-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.potato-hero-particles i{
  position:absolute;
  border-radius:50%;
  opacity:.52;
  background:radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 70%);
  filter:blur(.3px);
}
.potato-hero-layout{
  position:relative;
  z-index:3;
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:stretch;
  padding:0;
}
.potato-hero-copy{
  display:none;
}
.potato-hero .eyebrow-light{ color:#7f5b2f; }
.potato-hero .eyebrow-light::before{ background:var(--carrot); }
.potato-hero-title{
  font-size:clamp(34px,5.8vw,78px);
  line-height:.94;
  letter-spacing:-.06em;
  color:var(--ink);
  text-shadow:0 4px 18px rgba(255,255,255,.22);
  max-width:9.5ch;
  margin-top:18px;
}
.potato-hero-title span{
  display:block;
  overflow:hidden;
}
.potato-hero-desc{
  max-width:620px;
  margin-top:22px;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.78;
}
.potato-hero-actions{
  display:flex;
  gap:16px;
  margin-top:34px;
  flex-wrap:wrap;
}
.potato-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.potato-hero-points li{
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(33,29,22,.08);
  color:var(--ink-soft);
}
.potato-hero .btn{
  min-width:210px;
  backdrop-filter:blur(10px);
}
.potato-hero-scrollcue{
  display:none;
}

/* ---------------- INTRO ---------------- */
.intro{ padding:150px 0 0; position:relative; }
.intro .container > .eyebrow,
.intro .container > .intro-headline,
.intro .container > .intro-lede{ display:none; }
.intro-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px, 520px);
  gap:40px;
  align-items:center;
  min-height:420px;
  margin-bottom:64px;
}
.intro-copy{ max-width:820px; }
.intro-headline{ font-size:clamp(28px,4.4vw,54px); max-width:820px; margin:20px 0 64px; }
.intro-headline span{ display:block; overflow:hidden; }
.intro-headline em{ font-style:normal; color:var(--carrot); }

.intro-lede{ max-width:680px; color:var(--ink-soft); font-size:15.5px; line-height:1.75; margin:-30px 0 56px; }

.intro-visual{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(-150px) scale(.9);
}
.intro-visual-glow{
  position:absolute;
  inset:18% 8% 12%;
  border-radius:42px;
  background:
    radial-gradient(circle at 70% 30%, rgba(217,114,42,.24), transparent 40%),
    radial-gradient(circle at 30% 70%, rgba(110,155,91,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  filter:blur(2px);
  box-shadow:0 24px 60px rgba(33,29,22,.1);
}
.intro-visual-frame{
  position:relative;
  width:min(100%, 460px);
  aspect-ratio: 1 / 1;
  border-radius:42px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(33,29,22,.16);
  border:1px solid rgba(255,255,255,.42);
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.5));
}
.intro-visual-frame::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(20,18,14,.12));
  pointer-events:none;
}
.intro-visual-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% 50%;
  display:block;
  transform:scale(1.08);
  will-change:transform;
}
.intro-visual-badge{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;
  padding:12px 16px;
  border-radius:18px;
  background:rgba(20,18,14,.42);
  backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:0 12px 30px rgba(20,18,14,.14);
}
.intro-visual-badge span{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  margin-bottom:4px;
}
.intro-visual-badge strong{
  font-size:15px;
  letter-spacing:.02em;
}

.intro-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.role-card{
  background:var(--paper); border:1px solid var(--cream-line); border-radius:var(--radius-m);
  padding:34px 26px; position:relative; overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s;
}
.role-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(44,79,49,.12); border-color:transparent; }
.role-index{ font-family:var(--f-display); font-size:13px; color:var(--carrot); font-weight:700; }
.role-card h3{ font-size:22px; margin:16px 0 10px; }
.role-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; }

.tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:56px; }
.tag-row li{ font-size:12.5px; font-weight:700; letter-spacing:.04em; padding:8px 16px; border-radius:100px; background:var(--cream-deep); color:var(--ink-soft); }

.stats-strip{ background:var(--green-deep); margin-top:100px; padding:70px 0; position:relative; overflow:hidden; }
.stats-strip::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 30%, rgba(110,155,91,.25), transparent 45%), radial-gradient(circle at 85% 70%, rgba(217,114,42,.18), transparent 45%);
}
.stats-grid{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:20px; text-align:center; }
.stat-num{ display:block; font-family:var(--f-display); font-size:clamp(30px,3.6vw,46px); font-weight:800; color:#fff; }
.stat p{ color:rgba(255,255,255,.65); font-size:13px; margin-top:6px; letter-spacing:.02em; }

/* ---------------- ORBIT / CATEGORIES ---------------- */
.orbit-section{
  position:relative;
  padding:150px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 14%, rgba(110,155,91,.18), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(217,114,42,.22), transparent 18%),
    radial-gradient(circle at 74% 72%, rgba(217,114,42,.1), transparent 22%),
    linear-gradient(180deg, #110f0b 0%, #17130f 45%, #140f0a 100%);
  transition:background 1s var(--ease-soft);
}
.orbit-section::before{
  content:'';
  position:absolute;
  inset:-10% -10% 0;
  background:
    radial-gradient(circle at 75% 24%, rgba(255,169,79,.14), transparent 14%),
    radial-gradient(circle at 70% 56%, rgba(110,155,91,.08), transparent 22%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.03), transparent 18%),
    radial-gradient(circle at 84% 44%, rgba(255,255,255,.05), transparent 14%);
  pointer-events:none;
}
.orbit-container{
  display:grid;
  grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);
  gap:42px;
  align-items:center;
}
.orbit-copy{
  position:relative;
  padding:0;
  border-radius:0;
  background:none;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
}
.orbit-copy::before{
  content:none;
}
.orbit-copy > *{ position:relative; z-index:1; }
.orbit-copy .eyebrow{ color:#f2e6c9; }
.orbit-copy .eyebrow::before{ background:var(--carrot); }
.orbit-copy h2{
  font-size:clamp(32px,4.2vw,54px);
  margin:18px 0 18px;
  line-height:.94;
  letter-spacing:-.05em;
  color:#fff;
  max-width:10ch;
}
.orbit-desc{
  color:rgba(255,255,255,.76);
  font-size:15.5px;
  line-height:1.75;
  max-width:460px;
  margin-bottom:30px;
}
.orbit-detail{
  position:relative;
  background:none;
  border:none;
  backdrop-filter:none;
  border-radius:0;
  padding:24px 0 0;
  max-width:480px;
  box-shadow:none;
  margin-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.orbit-detail::before{
  content:none;
}
.orbit-detail h3{
  font-size:22px;
  margin-bottom:14px;
  color:#fff;
  transition:color .4s;
  letter-spacing:-.03em;
}
.orbit-detail li{
  font-size:14px;
  color:rgba(255,255,255,.72);
  padding:12px 0;
  border-top:1px dashed rgba(255,255,255,.12);
}
.orbit-detail li:first-child{ border-top:none; }

.orbit-stage{
  position:relative;
  height:660px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
  transform-style:preserve-3d;
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 22px 50px rgba(0,0,0,.22);
  overflow:hidden;
}
.orbit-backdrop{
  position:absolute;
  inset:12% 8%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,.04) 34%, rgba(255,255,255,0) 68%),
    radial-gradient(circle at 50% 50%, rgba(217,114,42,.16), transparent 58%);
  filter:blur(1px);
  transform:scale(1.08);
}
.orbit-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.orbit-stars i{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,177,92,.55);
  box-shadow:0 0 14px rgba(255,177,92,.38);
  animation:starTwinkle 4.8s ease-in-out infinite;
}
.orbit-stars i:nth-child(1){ top:18%; left:70%; }
.orbit-stars i:nth-child(2){ top:30%; left:22%; animation-delay:-1s; }
.orbit-stars i:nth-child(3){ top:54%; left:80%; animation-delay:-2s; }
.orbit-stars i:nth-child(4){ top:64%; left:32%; animation-delay:-3s; }
.orbit-stars i:nth-child(5){ top:22%; left:48%; animation-delay:-1.7s; }
.orbit-stars i:nth-child(6){ top:76%; left:68%; animation-delay:-2.8s; }
.orbit-stars i:nth-child(7){ top:42%; left:84%; animation-delay:-3.4s; }
.orbit-stars i:nth-child(8){ top:48%; left:14%; animation-delay:-0.8s; }
@keyframes starTwinkle{
  0%,100%{ transform:scale(.9); opacity:.35; }
  50%{ transform:scale(1.35); opacity:1; }
}
.orbit-ring{ position:absolute; border-radius:50%; border:1px dashed rgba(44,79,49,.14); animation:ringRotate 80s linear infinite; }
.orbit-ring{ border-color:rgba(255,255,255,.08); }
.orbit-ring--1{ width:330px; height:330px; }
.orbit-ring--2{ width:470px; height:470px; animation-duration:110s; animation-direction:reverse; }
.orbit-ring--3{ width:610px; height:610px; animation-duration:150s; opacity:.82; }
@keyframes ringRotate{ to{ transform:rotate(360deg); } }

.orbit-core{
  position:relative;
  width:204px;
  height:204px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  transform:translateZ(50px);
}
.orbit-core-glow{
  position:absolute;
  inset:-58px;
  border-radius:50%;
  filter:blur(36px);
  opacity:.7;
  background:radial-gradient(circle, rgba(255,169,79,.9), transparent 68%);
  transition:background 1s var(--ease-soft); animation:pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.12);} }
.orbit-core-inner{
  width:100%; height:100%; border-radius:50%; background:var(--paper);
  box-shadow:0 24px 60px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.72);
  display:flex; align-items:center; justify-content:center; animation:coreSpin 16s linear infinite;
}
@keyframes coreSpin{ to{ transform:rotate(360deg); } }
.orbit-core-logo{ width:64%; }

.orbit-satellite{
  position:absolute;
  width:82px;
  height:82px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
  animation:orbitSpin 18s linear infinite;
  z-index:1;
}
.orbit-satellite span{
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(255,177,92,.95), rgba(110,155,91,.55));
  box-shadow:0 0 24px rgba(255,177,92,.34);
}
.orbit-satellite--1{ transform:translateX(195px) translateY(-150px); animation-duration:20s; }
.orbit-satellite--2{ transform:translateX(-220px) translateY(130px); animation-duration:26s; animation-direction:reverse; }
.orbit-satellite--3{ width:52px; height:52px; transform:translateX(38px) translateY(-250px); animation-duration:16s; }
@keyframes orbitSpin{
  from{ transform:rotate(0deg) translateX(250px) rotate(0deg); }
  to{ transform:rotate(360deg) translateX(250px) rotate(-360deg); }
}
.orbit-satellite--1{ animation-name:orbitSpin1; }
.orbit-satellite--2{ animation-name:orbitSpin2; }
.orbit-satellite--3{ animation-name:orbitSpin3; }
@keyframes orbitSpin1{
  from{ transform:rotate(0deg) translateX(244px) rotate(0deg); }
  to{ transform:rotate(360deg) translateX(244px) rotate(-360deg); }
}
@keyframes orbitSpin2{
  from{ transform:rotate(180deg) translateX(210px) rotate(-180deg); }
  to{ transform:rotate(540deg) translateX(210px) rotate(-540deg); }
}
@keyframes orbitSpin3{
  from{ transform:rotate(90deg) translateX(286px) rotate(-90deg); }
  to{ transform:rotate(450deg) translateX(286px) rotate(-450deg); }
}

.orbit-node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  top:50%; left:50%;
  transform:
    rotate(calc(var(--i) * 72deg))
    translate(250px)
    rotate(calc(var(--i) * -72deg))
    translate(-50%,-50%);
  padding:12px 18px 12px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
  transition:transform .5s var(--ease-out), background .3s, border-color .3s, box-shadow .3s, opacity .3s;
  z-index:4;
}
.orbit-node:hover, .orbit-node.is-active{
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  transform:
    rotate(calc(var(--i) * 72deg))
    translate(258px)
    rotate(calc(var(--i) * -72deg))
    translate(-50%,-50%) scale(1.04);
}
.orbit-node:hover .node-label, .orbit-node.is-active .node-label{ color:#fff; }
.node-dot{ width:10px; height:10px; border-radius:50%; background:var(--carrot); flex:none; box-shadow:0 0 0 5px rgba(217,114,42,.14); }
.node-label{ font-size:13px; font-weight:700; white-space:nowrap; color:var(--ink); transition:color .3s; }

.orbit-legend{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  text-align:center;
  color:rgba(255,255,255,.52);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  z-index:2;
  pointer-events:none;
}
.orbit-legend em{
  display:block;
  margin-top:6px;
  font-style:normal;
  color:rgba(255,255,255,.76);
  letter-spacing:0;
  text-transform:none;
  font-size:13px;
}

@media (max-width:760px){
  .orbit-container{ gap:26px; }
  .orbit-node{ transform:rotate(calc(var(--i) * 72deg)) translate(156px) rotate(calc(var(--i) * -72deg)) translate(-50%,-50%); }
  .orbit-node:hover, .orbit-node.is-active{
    transform:rotate(calc(var(--i) * 72deg)) translate(156px) rotate(calc(var(--i) * -72deg)) translate(-50%,-50%) scale(1.02);
  }
  .orbit-ring--1{ width:256px; height:256px; }
  .orbit-ring--2{ width:368px; height:368px; }
  .orbit-ring--3{ width:474px; height:474px; }
  .orbit-stage{ height:430px; border-radius:30px; }
  .orbit-core{ width:142px; height:142px; }
  .orbit-satellite{ width:52px; height:52px; }
  .orbit-satellite--3{ width:38px; height:38px; }
  .orbit-legend{ bottom:6px; }
}

/* ---------------- PROCESS (horizontal pin) ---------------- */
.process{ position:relative; height:420vh; background:var(--cream-deep); }
.process-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.process-head{ margin-bottom:40px; }
.process-head h2{ font-size:clamp(26px,3.6vw,42px); margin-top:14px; }
.process-track{ display:flex; gap:26px; width:max-content; padding:0 clamp(20px,5vw,64px); will-change:transform; }
.process-card{
  width:min(72vw,460px); flex:none; background:var(--paper); border-radius:var(--radius-l);
  padding:38px 34px; border:1px solid var(--cream-line); position:relative;
  box-shadow:0 18px 40px rgba(33,29,22,.08);
}
.process-num{ font-family:var(--f-display); font-size:14px; font-weight:800; color:var(--carrot); }
.process-visual{
  height:250px;
  border-radius:var(--radius-s);
  margin:18px 0 20px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.96), rgba(255,255,255,.74) 42%, rgba(255,255,255,.58) 100%),
    linear-gradient(135deg,#f8f4ea,#ece0c5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.44);
}
.process-visual::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(20,18,14,.12));
  pointer-events:none;
}
.process-visual--wash{ background:linear-gradient(135deg,#dcecef,#a9d4dc); }
.process-visual--dry{ background:linear-gradient(135deg,#f6e2b8,#e8b979); }
.process-visual--grind{ background:linear-gradient(135deg,#f0d9c4,#e2a06a); }
.process-visual--pack{ background:linear-gradient(135deg,#dfe6da,#9db98f); }
.process-visual img{
  position:absolute;
  inset:10px;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  object-fit:contain;
  object-position:center;
  display:block;
  transform:scale(1);
  transition:transform .7s var(--ease-out), filter .7s var(--ease-out);
  will-change:transform;
}
.process-card:hover .process-visual img{
  transform:scale(1.05);
  filter:saturate(1.04) contrast(1.03);
}
.process-tag{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:2;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(20,18,14,.48);
  backdrop-filter:blur(8px);
  animation:tagFloat 3.6s ease-in-out infinite;
}
@keyframes tagFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.process-card h3{ font-size:23px; margin-bottom:10px; }
.process-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; }
.process-progress{ position:absolute; left:0; right:0; bottom:34px; height:2px; background:var(--cream-line); margin:0 clamp(20px,5vw,64px); }
.process-progress span{ display:block; height:100%; width:0%; background:var(--carrot); }

/* ---------------- FEATURED PRODUCTS ---------------- */
.featured{
  position:relative;
  padding:150px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(217,114,42,.13), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(110,155,91,.1), transparent 20%),
    linear-gradient(180deg, #fff8ee 0%, #f8efe0 100%);
}
.featured::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.35), transparent 22%, transparent 78%, rgba(255,255,255,.22)),
    radial-gradient(circle at center, rgba(255,255,255,.18), transparent 62%);
  pointer-events:none;
}
.featured-shell{ position:relative; z-index:1; }
.featured-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  opacity:.6;
  pointer-events:none;
  animation:orbFloat 11s ease-in-out infinite;
}
.featured-orb--a{
  top:-48px;
  right:8%;
  width:180px;
  height:180px;
  background:radial-gradient(circle, rgba(217,114,42,.22), transparent 70%);
}
.featured-orb--b{
  left:-44px;
  bottom:110px;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(110,155,91,.12), transparent 72%);
  animation-delay:-4s;
}
@keyframes orbFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-14px) scale(1.03); }
}

.featured-head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:end;
  margin-bottom:22px;
}
.featured-head-copy h2{
  font-size:clamp(34px,4.8vw,62px);
  line-height:.95;
  letter-spacing:-.04em;
  margin-top:12px;
}
.featured-head-copy h2 span{
  display:block;
  overflow:hidden;
}
.featured-head-copy h2 span:last-child{
  color:var(--ink);
}
.featured-head-panel{
  justify-self:end;
  width:min(100%,420px);
  padding:24px 26px;
  border-radius:28px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 18px 48px rgba(33,29,22,.08);
  backdrop-filter:blur(16px);
}
.featured-head-panel p{
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.7;
}
.featured-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.featured-points span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(44,79,49,.08);
  color:var(--green-deep);
}

.featured-marquee{
  position:relative;
  overflow:hidden;
  margin:24px 0 42px;
  border-top:1px solid rgba(33,29,22,.08);
  border-bottom:1px solid rgba(33,29,22,.08);
  padding:14px 0;
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.featured-marquee-track{
  display:flex;
  gap:16px;
  width:max-content;
  animation:marqueeFeature 28s linear infinite;
}
.featured-marquee-track span{
  font-family:var(--f-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
  padding-right:16px;
}
@keyframes marqueeFeature{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.featured-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.product-card{
  position:relative;
  padding:26px;
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5)),
    rgba(255,255,255,.26);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 18px 44px rgba(33,29,22,.08);
  backdrop-filter:blur(12px);
  overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .35s;
  transform-style:preserve-3d;
}
.product-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,22%), rgba(255,255,255,.45), transparent 34%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.product-card:hover{
  transform:translateY(-12px) rotateX(4deg) rotateY(-2deg);
  box-shadow:0 28px 64px rgba(33,29,22,.14);
  border-color:rgba(255,255,255,.95);
}
.product-card:hover::before{ opacity:1; }
.product-glow{
  position:absolute;
  top:-40px;
  right:-40px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:var(--pc);
  opacity:.24;
  filter:blur(34px);
}
.product-media{
  position:relative;
  margin-bottom:16px;
  border-radius:24px;
  overflow:hidden;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
    linear-gradient(135deg, rgba(217,114,42,.12), rgba(110,155,91,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.46);
}
.product-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(20,18,14,.08));
  pointer-events:none;
}
.product-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.02);
  transition:transform .65s var(--ease-out), filter .65s var(--ease-out);
}
.product-card:hover .product-media img{
  transform:scale(1.08);
  filter:saturate(1.06) contrast(1.03);
}
.product-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.product-index{
  font-family:var(--f-display);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--ink-faint);
}
.product-badge{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(33,29,22,.06);
  color:var(--ink-soft);
}
.product-card h3{ font-size:22px; margin-bottom:10px; position:relative; }
.product-card p{ color:var(--ink-soft); font-size:14px; line-height:1.55; position:relative; min-height:58px; }
.product-actions{ display:flex; gap:10px; margin-top:20px; position:relative; flex-wrap:wrap; }
.chip{
  font-size:12px;
  font-weight:700;
  padding:9px 16px;
  border-radius:100px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(33,29,22,.08);
  transition:background .3s,color .3s,border-color .3s, transform .3s;
}
.chip:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

[data-reveal].product-card{
  opacity:0;
  transform:translateY(30px) scale(.97);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .55s var(--ease-out), border-color .35s;
}
[data-reveal].product-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
[data-reveal].featured-head{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].featured-head.is-visible{
  opacity:1;
  transform:translateY(0);
}

.product-card:nth-child(1){ transition-delay:.02s; }
.product-card:nth-child(2){ transition-delay:.08s; }
.product-card:nth-child(3){ transition-delay:.14s; }
.product-card:nth-child(4){ transition-delay:.2s; }
.product-card:nth-child(5){ transition-delay:.26s; }
.product-card:nth-child(6){ transition-delay:.32s; }

/* ---------------- INDUSTRIES — SHELF EXPLORER ---------------- */
.industries{
  position:relative;
  padding:140px 0 120px;
  overflow:hidden;
  background:linear-gradient(180deg, var(--night) 0%, #1a1712 100%);
}
.industries::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(44,79,49,.45), transparent 55%),
    radial-gradient(ellipse at 84% 86%, rgba(217,114,42,.16), transparent 52%);
  pointer-events:none;
}
.industries .container{ position:relative; z-index:1; }
.industries-head{ margin-bottom:54px; }
.industries-head h2{
  font-size:clamp(34px,4.8vw,68px);
  line-height:.92;
  letter-spacing:-.04em;
  color:#fff;
  margin-top:16px;
  max-width:750px;
}
.eyebrow-light{ color:#f2e6c9; }
.eyebrow-light::before{ background:var(--carrot); }

.industries-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr);
  gap:34px;
  align-items:stretch;
}

/* ---- LEFT: shelf visualization ---- */
.shelf-view{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.shelf-visual{
  position:relative;
  flex:1;
  min-height:360px;
  border-radius:var(--radius-l);
  overflow:hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    radial-gradient(circle at 24% 24%, rgba(110,155,91,.22), transparent 40%),
    radial-gradient(circle at 80% 18%, rgba(217,114,42,.26), transparent 44%),
    radial-gradient(circle at 70% 82%, rgba(44,79,49,.2), transparent 42%);
  border:1px solid var(--glass-brd-dark);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  transition:background .6s var(--ease-soft);
}
.shelf-glow{
  position:absolute;
  inset:-20% auto auto 50%;
  width:120%;
  height:120%;
  transform:translate(-50%,-30%);
  background:radial-gradient(circle at 50% 40%, rgba(217,114,42,.28), transparent 60%);
  filter:blur(30px);
  opacity:.65;
  transition:background .6s var(--ease-soft);
  pointer-events:none;
}
.shelf-rings{ position:absolute; inset:0; pointer-events:none; }
.shelf-rings span{
  position:absolute;
  inset:50% auto auto 50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.07);
  animation:ringFloat 11s ease-in-out infinite;
}
.shelf-rings span:nth-child(1){ width:160px; height:160px; }
.shelf-rings span:nth-child(2){ width:250px; height:250px; animation-delay:-3s; }
.shelf-rings span:nth-child(3){ width:340px; height:340px; animation-delay:-6s; }
@keyframes ringFloat{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.55; }
  50%{ transform:translate(-50%,-50%) scale(1.04); opacity:.9; }
}

.shelf-media{
  position:relative;
  z-index:2;
  width:100%;
  max-width:380px;
  aspect-ratio:4/3;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 50px rgba(0,0,0,.34);
  display:flex;
  align-items:center;
  justify-content:center;
}
.shelf-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.shelf-media.is-swapping img{ opacity:0; transform:scale(1.06); }

.shelf-pack{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:-26px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(20,18,14,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
  box-shadow:0 16px 36px rgba(0,0,0,.34);
}
.shelf-pack-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(242,230,201,.85);
  font-weight:800;
}
.shelf-pack-kicker::before{
  content:'';
  width:22px;
  height:2px;
  border-radius:99px;
  background:var(--carrot);
}
.shelf-pack-badge{
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
}

.shelf-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.shelf-stat{
  padding:20px 16px;
  border-radius:22px;
  background:var(--glass-bg-dark);
  border:1px solid var(--glass-brd-dark);
  text-align:center;
}
.shelf-stat strong{
  display:block;
  font-family:var(--f-display);
  font-size:28px;
  color:#fff;
  line-height:1;
  margin-bottom:7px;
}
.shelf-stat span{
  display:block;
  font-size:11.5px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}
.shelf-foot{
  font-size:13.5px;
  line-height:1.7;
  color:rgba(255,255,255,.5);
  max-width:420px;
}

/* ---- RIGHT: sector tabs ---- */
.sector-tabs{
  display:flex;
  flex-direction:column;
  gap:60px;
}
.sector-tablist{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
  align-content:start;
}
.sector-tab{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:64px;
  padding:12px 16px;
  border-radius:18px;
  background:var(--glass-bg-dark);
  border:1px solid var(--glass-brd-dark);
  color:rgba(255,255,255,.66);
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .35s, border-color .35s, background .35s, transform .35s var(--ease-out);
}
.sector-tab::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--carrot);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .35s var(--ease-out);
}
.sector-tab:hover{
  color:#fff;
  border-color:rgba(255,255,255,.2);
  transform:translateY(-2px);
}
.sector-tab.is-active{
  color:#fff;
  background:linear-gradient(180deg, rgba(217,114,42,.18), rgba(217,114,42,.06));
  border-color:rgba(217,114,42,.5);
}
.sector-tab.is-active::before{ transform:scaleY(1); }

.sector-panel{
  position:relative;
  padding:38px 36px;
  border-radius:var(--radius-l);
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--glass-brd-dark);
  box-shadow:0 26px 60px rgba(0,0,0,.32);
  overflow:hidden;
  min-height:230px;
}
.sector-panel::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 92% 8%, rgba(217,114,42,.14), transparent 46%);
  pointer-events:none;
}
.sector-panel-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(242,230,201,.8);
  font-weight:800;
}
.sector-panel-kicker::before{
  content:'';
  width:28px;
  height:2px;
  border-radius:99px;
  background:var(--carrot);
}
.sector-panel h3{
  margin-top:14px;
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.02;
  letter-spacing:-.03em;
  color:#fff;
}
.sector-panel p{
  margin-top:14px;
  font-size:15px;
  line-height:1.72;
  color:rgba(255,255,255,.62);
  max-width:520px;
}
.sector-panel-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.sector-panel-tags span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.82);
  transition:background .3s, color .3s, border-color .3s;
}
.sector-panel-tags span:hover{
  background:var(--carrot);
  border-color:var(--carrot);
  color:#fff;
}

/* panel content fade on switch */
.sector-panel.is-swapping{ opacity:0; transform:translateY(10px); }
.sector-panel{ transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); }

/* ---- bottom marquee ---- */
.shelf-marquee{
  position:relative;
  overflow:hidden;
  margin-top:64px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:18px 0;
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.shelf-marquee-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:marqueeShelf 30s linear infinite;
}
.shelf-marquee-track span{
  font-family:var(--f-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  white-space:nowrap;
  padding-right:18px;
}
@keyframes marqueeShelf{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------------- ABOUT ---------------- */
.about{ padding:150px 0; background:var(--cream-deep); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-copy h2{ font-size:clamp(28px,3.8vw,46px); margin:16px 0 22px; }
.about-copy em{ font-style:normal; color:var(--green); }
.about-copy p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin-bottom:14px; max-width:520px; }
.timeline{ margin-top:36px; border-left:2px solid var(--cream-line); padding-left:26px; display:flex; flex-direction:column; gap:22px; }
.timeline-item{ position:relative; }
.timeline-item::before{ content:''; position:absolute; left:-33px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--carrot); box-shadow:0 0 0 4px var(--cream-deep); }
.timeline-year{ font-family:var(--f-display); font-weight:800; color:var(--green); display:block; font-size:15px; }
.timeline-item p{ color:var(--ink-soft); font-size:14px; margin-top:2px; }

.about-visual-card{ position:relative; border-radius:var(--radius-l); overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 70px rgba(33,29,22,.18); }
.about-visual-card img{ width:100%; height:100%; object-fit:cover; }
.about-visual-card video{ width:100%; height:100%; object-fit:cover; display:block; }
.about-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; }

/* ---------------- VISION · MISSION · CERTIFICATIONS ---------------- */
.trust{
  position:relative;
  padding:140px 0 150px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(44,79,49,.55), transparent 60%),
    radial-gradient(ellipse at 85% 90%, rgba(217,114,42,.22), transparent 55%),
    linear-gradient(180deg, var(--green-deep) 0%, #16301d 100%);
}
.trust::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 14%, rgba(110,155,91,.16), transparent 26%),
    radial-gradient(circle at 92% 30%, rgba(217,114,42,.1), transparent 24%);
  pointer-events:none;
}
.trust-glow{
  position:absolute;
  left:50%; top:42%;
  width:min(1100px, 120vw);
  height:520px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(110,155,91,.22), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
}
.trust .container{ position:relative; z-index:1; }
.section-head--light h2{ color:#fff; }
.section-head--light .eyebrow-light{ color:#f2e6c9; }
.trust .section-head{ margin-bottom:46px; }

.vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vm-card{
  position:relative; padding:46px 42px; border-radius:var(--radius-l); overflow:hidden;
  background:rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 54px rgba(0,0,0,.32);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s;
}
.vm-card:hover{ transform:translateY(-8px); box-shadow:0 34px 70px rgba(0,0,0,.42); background:rgba(255,255,255,.1); }
.vm-card--carrot{ background:rgba(217,114,42,.16); border-color:rgba(217,114,42,.4); }
.vm-card--carrot:hover{ background:rgba(217,114,42,.24); }
.vm-card::before{
  content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}
.vm-card--carrot::before{ background:radial-gradient(circle, rgba(217,114,42,.35), transparent 70%); }
.vm-mark{ display:block; font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,230,201,.85); margin-bottom:18px; position:relative; }
.vm-card p{ position:relative; font-family:var(--f-display); font-size:clamp(19px,2vw,24px); font-weight:500; line-height:1.5; max-width:480px; }

.certs{ margin-top:70px; }
.certs-head{ margin-bottom:34px; }
.certs-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cert-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px);
  border-radius:var(--radius-m); padding:38px 20px; text-align:center;
  transition:transform .4s var(--ease-out), background .4s, border-color .4s;
}
.cert-card:hover{ transform:translateY(-8px) scale(1.02); background:rgba(255,255,255,.1); border-color:rgba(217,114,42,.5); }
.cert-mark{ display:block; font-family:var(--f-display); font-weight:800; font-size:26px; color:var(--carrot); margin-bottom:10px; letter-spacing:.03em; }
.cert-card p{ font-size:13px; color:rgba(255,255,255,.62); }

@media (max-width:1080px){ .vm-grid{ grid-template-columns:1fr; } }

/* ---------------- TESTIMONIALS ---------------- */
.testimonials{ padding:150px 0; overflow:hidden; }
.testi-head{ margin-bottom:50px; }
.testi-head h2{ font-size:clamp(26px,3.4vw,40px); margin-top:14px; }
.testi-track-wrap{ overflow:hidden; }
.testi-track{ display:flex; gap:24px; width:max-content; animation:marquee 34s linear infinite; }
.testi-track:hover{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.testi-card{
  width:min(80vw,420px); flex:none;
  background:var(--paper);
  border:1px solid var(--cream-line);
  border-radius:var(--radius-m);
  padding:26px 28px 28px;
  box-shadow:0 14px 34px rgba(38,26,18,.07);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.testi-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(38,26,18,.12); }

.testi-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.testi-badge{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#f1f3f4; }
.testi-stars{ color:#fbbc04; font-size:18px; letter-spacing:2px; text-shadow:0 1px 0 rgba(0,0,0,.04); }

.testi-quote{ font-size:15.5px; line-height:1.62; color:var(--ink); margin-bottom:22px; position:relative; padding-left:22px; }
.testi-quote::before{ content:"\201C"; position:absolute; left:-4px; top:-14px; font-size:46px; line-height:1; font-family:Georgia,serif; color:var(--cream-line); }

.testi-foot{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--cream-line); padding-top:16px; }
.testi-avatar{ width:42px; height:42px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; background:var(--av,#D9722A); letter-spacing:.5px; }
.testi-foot strong{ display:block; font-size:14px; }
.testi-foot span{ font-size:12.5px; color:var(--ink-faint); }

/* ---------------- CTA ---------------- */
.cta{
  position:relative;
  padding:180px 0 170px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(217,114,42,.34), transparent 26%),
    radial-gradient(circle at 50% 60%, rgba(110,155,91,.14), transparent 30%),
    linear-gradient(180deg, #1a1209 0%, #28180d 48%, #120d08 100%);
}
.cta::before{
  content:'';
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 15% 20%, rgba(217,114,42,.28), transparent 4px),
    radial-gradient(circle at 32% 72%, rgba(255,186,102,.22), transparent 3px),
    radial-gradient(circle at 68% 28%, rgba(244,199,113,.24), transparent 3px),
    radial-gradient(circle at 82% 74%, rgba(255,138,77,.18), transparent 4px);
  opacity:.55;
  pointer-events:none;
}
.cta::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,152,61,.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
  pointer-events:none;
}
.cta-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.cta-particles i{
  position:absolute;
  border-radius:50%;
  opacity:.92;
  box-shadow:0 0 18px rgba(255,168,79,.24);
  will-change:transform;
}
.cta-inner{
  position:relative;
  z-index:1;
  max-width:980px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cta-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,186,102,.85);
}
.cta-kicker::before{
  content:'';
  width:28px;
  height:2px;
  border-radius:99px;
  background:var(--carrot);
}
.cta h2{
  font-size:clamp(44px,7.2vw,94px);
  line-height:.92;
  letter-spacing:-.055em;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 14px 34px rgba(0,0,0,.45);
}
.cta h2 em{
  font-style:normal;
  color:var(--carrot);
}
.cta-lede{
  margin-top:22px;
  max-width:720px;
  color:rgba(255,248,238,.92);
  font-size:16px;
  line-height:1.75;
}
.cta-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:38px;
}
.cta .btn{
  min-width:210px;
  backdrop-filter:blur(10px);
}
.cta .btn-solid{
  background:linear-gradient(180deg, #fff9f1 0%, #f4e1c8 100%);
  color:var(--ink);
  box-shadow:0 16px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.45);
}
.cta .btn-solid:hover{
  background:linear-gradient(180deg, #ffffff 0%, #f0dac0 100%);
  box-shadow:0 20px 38px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.55);
}
.cta .btn-ghost{
  border-color:rgba(255,255,255,.38);
  color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.cta .btn-ghost:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.5);
}
.cta-note{
  margin-top:20px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ---------------- FOOTER ---------------- */
.site-footer{ position:relative; background:linear-gradient(180deg, #14120e 0%, #1c180f 100%); color:rgba(255,255,255,.9); padding:90px 0 0; overflow:hidden; }
.site-footer::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(44,79,49,.3), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(217,114,42,.14), transparent 50%);
  pointer-events:none;
}
.footer-watermark{
  position:absolute; bottom:-6vw; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-weight:800; font-size:16vw; letter-spacing:-.02em;
  color:rgba(255,255,255,.035); white-space:nowrap; pointer-events:none;
}
.footer-top{
  position:relative;
  display:flex;
  align-items:center;
  gap:34px;
  padding-bottom:50px;
  margin-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.footer-logo-wrap{
  flex:none;
  width:250px; height:150px;
  border-radius:28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:22px;
  box-shadow:0 20px 44px rgba(0,0,0,.34);
}
.footer-logo{ width:100%; height:100%; object-fit:contain; }
.footer-brand p{ font-size:15px; line-height:1.7; max-width:420px; color:rgba(255,255,255,.78); }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:11px; text-transform:uppercase; transition:background .3s,border-color .3s; }
.footer-social a:hover{ background:var(--carrot); border-color:var(--carrot); }

.footer-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:34px; padding-bottom:60px; }
.footer-col h4{ color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
.footer-col a{ display:block; font-size:14px; color:rgba(255,255,255,.82); margin-bottom:12px; transition:color .3s; }
.footer-col a:hover{ color:var(--carrot); }
.footer-contact p{ font-size:13.5px; color:rgba(255,255,255,.72); margin:8px 0 20px; }
.newsletter{ display:flex; gap:8px; }
.newsletter input{ flex:1; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:100px; padding:10px 16px; color:#fff; font-size:13px; }
.newsletter input::placeholder{ color:rgba(255,255,255,.4); }
.footer-bottom{ position:relative; display:flex; justify-content:space-between; padding:22px 0; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:rgba(255,255,255,.62); }

/* ---------------- REVEAL / UTILITIES ---------------- */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
/* When GSAP drives the entrance, neutralize the CSS hide so gsap.from
   reads the correct natural (visible) state instead of 0 -> 0. */
.gsap-ready [data-reveal]{ opacity:1; transform:none; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1080px){
  .intro-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .potato-hero{ height:280vh; }
  .potato-hero-layout{ grid-template-columns:1fr; gap:0; padding:0; }
  .orbit-container{ grid-template-columns:1fr; }
  .orbit-stage{ order:-1; }
  .featured-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .about-visual{ order:-1; max-width:420px; margin:0 auto; }
  .certs-row{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .intro-top{ grid-template-columns:1fr; gap:28px; min-height:auto; }
  .intro-visual{ min-height:360px; justify-content:flex-start; }
  .intro-visual-frame{ width:min(100%, 460px); }
  .industries-stage{ grid-template-columns:1fr; gap:40px; }
  .sector-tablist{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-head{ grid-template-columns:1fr; }
  .featured-head-panel{ justify-self:start; width:100%; }
  .featured-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-carrot{ display:none; }
  .site-header{ padding:5px 0; }
  .brand-mark{ width:150px; /*height:50px;*/ }
  .hero{ height:360svh; min-height:640px; }
  .hero-pin{ height:100svh; min-height:100svh; }
  .hero-actions{ flex-direction:column; align-items:flex-start; }
  .hero-product-switch{ display:none; }
  .potato-hero{ height:320svh; min-height:100svh; }
  .potato-hero-pin{ align-items:flex-end; }
  .potato-hero-layout{ padding:0; }
  .potato-hero-title{ max-width:none; font-size:clamp(32px,10vw,52px); }
  .potato-hero-copy,
  .potato-hero-scrollcue,
  .potato-hero-points{ display:none; }
  .potato-hero-canvas{
    background:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
      url("../ezgif-2071245080c40ee1-jpg/ezgif-frame-001.jpg") center/cover no-repeat;
  }
  .intro-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .process{ height:auto; }
  .process-pin{ height:auto; padding:80px 0; position:relative; top:auto; }
  .process-track{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:20px; }
  .process-card{ scroll-snap-align:start; }
  .process-progress{ display:none; }
  .featured-grid{ grid-template-columns:1fr; }
  .certs-row{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-top{ flex-direction:column; align-items:flex-start; gap:24px; padding-bottom:36px; margin-bottom:36px; }
  .footer-logo-wrap{ width:250px; height:150px; max-width:100%; }
  .footer-bottom{ flex-direction:column; gap:8px; }
  .intro{ padding:110px 0 0; }
  .intro-top{ margin-bottom:42px; }
  .intro-visual{ min-height:300px; }
  .intro-visual-frame{ border-radius:30px; }
  .intro-visual-badge{ left:14px; bottom:14px; padding:10px 12px; border-radius:14px; }
  .featured{ padding:110px 0; }
  .featured-marquee{ margin-bottom:28px; }
  .featured-grid{ grid-template-columns:1fr; gap:18px; }
  .featured-head-copy h2{ font-size:clamp(30px,10vw,48px); }
  .product-card{ padding:20px; border-radius:24px; }
  .industries{ padding:110px 0 100px; }
  .industries-head{ margin-bottom:40px; }
  .shelf-visual{ min-height:300px; padding:24px; }
  .shelf-stats{ grid-template-columns:repeat(3,1fr); }
  .shelf-pack{ padding:24px 22px; }
  .sector-tablist{ grid-template-columns:1fr; }
  .sector-tab{ min-height:56px; padding:12px; white-space:normal; }
  .sector-panel{ padding:28px 24px; }
}

/* ============================================================
   POTATO STARCH PRODUCT INFO SECTION
   ============================================================ */

.ps-info{
  position:relative;
  background:var(--night);
  padding:clamp(80px,10vw,140px) 0;
  overflow:hidden;
}
.ps-info .grain{ opacity:.06; }

/* heading row */
.ps-info-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,80px);
  align-items:start;
  margin-bottom:clamp(40px,6vw,72px);
}
.ps-info-head h2{
  font-size:clamp(32px,4.5vw,62px);
  color:var(--cream);
  line-height:1.08;
}
.ps-info-head h2 em{
  color:var(--gold);
  font-style:normal;
}
.ps-info-head .eyebrow{ color:var(--carrot); }
.ps-info-head .eyebrow::before{ background:var(--gold); }
.ps-info-lede{
  color:var(--ink-faint);
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.7;
  padding-top:10px;
  border-top:1px solid var(--night-line);
}

/* trait pills */
.ps-traits{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin-bottom:clamp(48px,7vw,88px);
}
.ps-trait{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 18px;
  border-radius:100px;
  border:1px solid var(--night-line);
  color:var(--cream-deep);
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  background:rgba(255,255,255,.04);
  transition:border-color .3s, background .3s, color .3s;
}
.ps-trait::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--carrot);
  flex-shrink:0;
}
.ps-trait:hover{
  border-color:var(--carrot);
  background:rgba(217,114,42,.1);
  color:var(--cream);
}

/* two-column body */
.ps-info-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}

/* left: image */
.ps-info-visual{ position:relative; }
.ps-info-img-wrap{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--night-line);
  box-shadow:0 24px 64px rgba(0,0,0,.45);
}
.ps-info-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease-out);
}
.ps-info-img-wrap:hover img{ transform:scale(1.04); }
.ps-info-img-badge{
  position:absolute;
  bottom:18px; left:18px;
  background:var(--glass-bg-dark);
  backdrop-filter:blur(16px);
  border:1px solid var(--glass-brd-dark);
  border-radius:var(--radius-s);
  padding:12px 18px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ps-info-img-badge span{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--carrot);
  font-weight:700;
}
.ps-info-img-badge strong{
  font-size:15px;
  color:var(--cream);
  font-family:var(--f-display);
}

/* right: tabs + list */
.ps-info-apps{ display:flex; flex-direction:column; gap:0; }

.ps-tabs{
  display:flex;
  gap:0;
  border-bottom:1px solid var(--night-line);
  margin-bottom:28px;
}
.ps-tab{
  flex:1;
  padding:14px 20px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-faint);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .25s, border-color .25s;
  text-align:center;
}
.ps-tab:hover{ color:var(--cream); }
.ps-tab.is-active{
  color:var(--carrot);
  border-bottom-color:var(--carrot);
}

.ps-panel{ display:none; }
.ps-panel.is-active{ display:block; }

.ps-app-list{ display:flex; flex-direction:column; gap:0; }
.ps-app-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:20px 0;
  border-bottom:1px solid var(--night-line);
  transition:background .2s;
}
.ps-app-item:last-child{ border-bottom:none; }
.ps-app-item:hover{ background:rgba(255,255,255,.02); }
.ps-app-icon{
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(217,114,42,.12);
  border:1px solid rgba(217,114,42,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--carrot);
  font-family:var(--f-display);
}
.ps-app-item > div{ flex:1; }
.ps-app-item strong{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--cream);
  margin-bottom:4px;
  font-family:var(--f-display);
}
.ps-app-item p{
  font-size:13.5px;
  color:var(--ink-faint);
  line-height:1.6;
}

/* responsive */
@media (max-width:900px){
  .ps-info-head{ grid-template-columns:1fr; gap:24px; }
  .ps-info-body{ grid-template-columns:1fr; gap:40px; }
  .ps-info-img-wrap{ max-height:400px; }
}
@media (max-width:600px){
  .ps-info-head h2{ font-size:clamp(28px,8vw,42px); }
  .ps-tab{ padding:12px 10px; font-size:12px; }
}

/* ============================================================
   POTATO POWDER — SCROLL CANVAS SECTION
   Mirrors the hero canvas scroll pattern exactly.
   Section has tall scroll height so GSAP can pin+scrub the
   canvas while all 240 frames play through. Once complete
   the pin releases and the page scrolls to the next section.
   ============================================================ */

.pp-canvas-section{
  /* Tall scroll container: 100vh visible + extra height for scrubbing.
     300vh total gives the same scrub feel as the hero (which uses ~340vh). */
  position: relative;
  height: 300vh;
  background: #000;
}

.pp-canvas-pin{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.pp-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* subtle vignette to blend into surrounding sections */
.pp-canvas-vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20,18,14,.35) 0%,
      transparent 18%,
      transparent 78%,
      rgba(20,18,14,.35) 100%);
}

/* FIX: isolate the pp-canvas-section so sticky does not bleed
   into surrounding sections (parallax ghost effect) */
.pp-canvas-section{
  isolation: isolate;
  z-index: 0;
}
.pp-canvas-pin{
  isolation: isolate;
  z-index: 0;
}
/* Ensure sections above/below sit on top and clip cleanly */
.intro,
.potato-hero,
.process{
  position: relative;
  z-index: 1;
}

/* ============================================================
   POTATO FLAKES — SCROLL CANVAS SECTION (ABOUT)
   ============================================================ */
.pf-canvas-section{
  position: relative;
  height: 300vh;
  background: #f9f5ee; /* Light background on load */
  isolation: isolate;
  z-index: 0;
}

.pf-canvas-pin{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  z-index: 0;
}

.pf-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pf-canvas-vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(249,245,238,0.3) 0%, transparent 15%, transparent 85%, rgba(249,245,238,0.3) 100%);
}

.pf-hero-layout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
  pointer-events: none;
}
.pf-hero-content {
  pointer-events: auto;
  max-width: 600px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  padding: 2.5rem;
  border-radius: 16px;
}
.pf-hero-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
  line-height: 1.1;
  color: #1a1a1a;
}
.pf-hero-content p {
  color: #4a4a4a;
  font-size: 1.125rem;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .pp-canvas-section, .pf-canvas-section {
    height: 300svh;
  }
  .pp-canvas-pin, .pf-canvas-pin {
    height: 100svh;
  }
}

.pf-hero-layout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 5rem 2rem;
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background-color: var(--carrot-500, #D9722A);
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--carrot-600, #B8591B);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}



/* ============================================================
   MOBILE HERO ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  .hero-canvas, .pp-canvas, .pf-canvas {
    object-position: right center !important;
  }
  .process-track {
    width: 100vw !important;
  }
}