/* =========================================================
   Caplan Distribution
   Type: Sora · Palette: maroon, ink, warm paper, kraft
   ========================================================= */

:root{
  --ink:#151012;
  --maroon:#63132B;
  --maroon-hi:#7d1b39;
  --maroon-deep:#3A0A19;
  --paper:#F6F2EA;
  --paper-2:#ECE4D5;
  --card:#FBF8F3;
  --kraft:#C9A36E;
  --kraft-lt:#E6CDA3;
  --text:#231B1E;
  --muted:rgba(35,27,30,.68);
  --hair:rgba(99,19,43,.16);

  --fg:var(--text);
  --fg-muted:var(--muted);
  --accent:var(--maroon);
  --rule:var(--hair);

  --font:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);

  --gutter:clamp(20px,calc(4 * var(--vwu)),56px);
  --vwu:min(1vw,19.2px);   /* 1vw, held at its 1920px value so type and spacing keep scaling on large screens */
  --maxw:1560px;
  --edge:max(var(--gutter),calc((100vw - var(--maxw))/2));
  --r:16px;

  --z-menu:40;
  --z-nav:50;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--paper);color:var(--fg);
  font-family:var(--font);font-size:16px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
figure,blockquote{margin:0}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font);font-weight:600;margin:0;letter-spacing:-.03em}
p{margin:0 0 1em;color:var(--fg-muted)}
ul,ol{list-style:none;margin:0;padding:0}
em{font-style:normal;font-weight:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--kraft);outline-offset:3px;border-radius:6px}
::selection{background:var(--maroon);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:99;background:var(--maroon);color:#fff;padding:10px 18px;border-radius:999px;transition:top .4s var(--ease)}
.skip:focus{top:14px}

.container{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* every section after the hero slides over it */
main>section,.footer{position:relative;z-index:1}
.section{padding-block:clamp(88px,calc(10 * var(--vwu)),150px);background:var(--paper)}
.section--ink{background:var(--ink);--fg:#F3EBE0;--fg-muted:rgba(243,235,224,.72);--accent:var(--kraft-lt);--rule:rgba(255,255,255,.2);color:var(--fg)}
.section--maroon{background:var(--maroon);--fg:#F7EEE3;--fg-muted:rgba(247,238,227,.76);--accent:var(--kraft-lt);--rule:rgba(255,255,255,.22);color:var(--fg)}
.section--paper2{background:var(--paper-2)}

/* ---------- type ---------- */
h2{font-size:clamp(1.9rem,calc(3.7 * var(--vwu)),3.5rem);line-height:1.1;margin:0 0 24px;text-wrap:balance;max-width:20ch}
.lead{font-size:clamp(1rem,calc(1.2 * var(--vwu)),1.12rem);line-height:1.75;color:var(--fg)}
.lead,.section p{max-width:62ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
  font:500 14px/1 var(--font);text-decoration:none;white-space:nowrap;
  transition:transform .5s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn__icon{display:inline-grid;place-items:center;width:16px;height:16px}
.btn__icon svg,.round svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.btn:hover .btn__icon svg{transform:translate(2px,-2px)}
.btn--primary,.btn--light{background:var(--paper);color:var(--maroon)}
.btn--primary:hover,.btn--light:hover{background:#fff}
.btn--dark{background:var(--maroon);color:#fff}
.btn--dark:hover{background:var(--maroon-hi)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--sm{padding:11px 18px;font-size:13px}
.btn--block{width:100%;justify-content:space-between}

/* ---------- containers: single flat layer ---------- */
.bezel{padding:0;border:0;background:none;border-radius:var(--r)}
.bezel>*{border-radius:var(--r);overflow:hidden}

/* ---------- scroll motion (values written by script.js) ---------- */
.js .reveal{opacity:0}
.no-motion .reveal,.no-motion .hero__in{opacity:1!important;translate:none!important}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;z-index:var(--z-nav);top:0;left:0;right:0;
  display:flex;align-items:center;gap:24px;padding:16px var(--edge);
  background:transparent;
  transition:background-color .5s var(--ease),padding .5s var(--ease);
}
.nav.is-scrolled{background:rgba(21,16,18,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-block:10px}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.nav__brand img{height:64px;width:auto;transition:height .5s var(--ease)}
.nav.is-scrolled .nav__brand img{height:48px}
.nav__links{display:flex;gap:4px;margin-inline:auto}
.nav__links a{display:block;padding:10px 16px;border-radius:999px;text-decoration:none;color:rgba(255,255,255,.82);font:500 14px/1 var(--font);transition:background-color .4s var(--ease),color .4s var(--ease)}
.nav__links a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav__links a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--kraft);border-radius:0}
.nav__burger{display:none;position:relative;width:44px;height:44px;border:0;cursor:pointer;background:none;margin-left:auto}
.nav__burger span{position:absolute;left:10px;right:10px;top:50%;height:1.5px;background:#fff;border-radius:2px;transition:transform .5s var(--ease)}
.nav__burger span:nth-child(1){transform:translateY(-4px)}
.nav__burger span:nth-child(2){transform:translateY(4px)}
.nav__burger.is-open span:nth-child(1){transform:translateY(0) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(0) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;justify-content:center;padding:100px var(--gutter) 48px;
  background:rgba(21,16,18,.96);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.menu li{overflow:hidden}
.menu a{display:block;font:600 clamp(2rem,calc(8 * var(--vwu)),3rem)/1.2 var(--font);letter-spacing:-.03em;color:#fff;text-decoration:none;transform:translateY(110%);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease),color .3s}
.menu.is-open a{transform:none;opacity:1;transition-delay:calc(.1s + var(--i)*.06s)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--kraft-lt)}
.menu__meta{margin-top:40px;color:rgba(255,255,255,.6);font-size:14px}

/* =========================================================
   HERO (pinned; next section slides over it)
   ========================================================= */
.hero,.phero{position:sticky;top:0;z-index:0;overflow:hidden;color:#fff;background:var(--ink)}
.hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.hero__media,.hero__shade,.phero__media,.phero__shade{position:absolute;inset:0}
.hero__media img,.phero__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%)}
.hero__media img{position:absolute;inset:0;visibility:hidden}
.hero__media img.is-on{visibility:visible;z-index:1}
.hero__media img.is-in{visibility:visible;z-index:2}
/* slow zoom-in while a photo is on screen. Uses the standalone `scale` property so it stacks with the intro's transform and the scroll-driven scale on .hero__media */
@keyframes heroZoom{from{scale:1}to{scale:1.1}}
.hero__media img.is-on,.hero__media img.is-in{animation:heroZoom 10s cubic-bezier(.3,.2,.4,1) both;will-change:scale}
.no-motion .hero__media img.is-on,.no-motion .hero__media img.is-in{animation:none}
@media (prefers-reduced-motion:reduce){.hero__media img.is-on,.hero__media img.is-in{animation:none}}
.hero__shade{background:linear-gradient(180deg,rgba(21,16,18,.66) 0%,rgba(21,16,18,.56) 38%,rgba(21,16,18,.7) 62%,rgba(21,16,18,.88) 100%)}
.hero__shade,.phero__shade{background:linear-gradient(180deg,rgba(21,16,18,.62) 0%,rgba(21,16,18,.42) 40%,rgba(21,16,18,.6) 62%,rgba(21,16,18,.86) 100%)}
.hero__inner{position:relative;margin-block:auto 0;padding-top:150px;padding-bottom:clamp(40px,calc(6 * var(--vwu)),72px);text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1,.hero__h{font-size:clamp(2.75rem,calc(7.2 * var(--vwu)),6.8rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 28px;max-width:15ch;color:#fff;text-wrap:balance}
.hero h1 em,.hero__h em{display:block}
.hero__lede{max-width:56ch;color:rgba(255,255,255,.92);font-size:clamp(1.2rem,calc(1.9 * var(--vwu)),1.7rem);line-height:1.75;margin-bottom:36px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero__foot{position:relative;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:22px;border-top:1px solid rgba(255,255,255,.2);font:400 13px/1.5 var(--font);color:rgba(255,255,255,.82)}
.hero__foot p{margin:0;color:inherit;max-width:none}
.hero__foot span{color:var(--kraft-lt);margin-right:8px}
.hero__in{opacity:0;translate:0 26px;animation:rise 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;translate:0 0}}

.phero{min-height:clamp(480px,66vh,680px);display:flex;align-items:flex-end}
.phero__inner{position:relative;width:100%;padding-top:150px;padding-bottom:clamp(44px,calc(6 * var(--vwu)),80px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;font:400 13px/1 var(--font);color:rgba(255,255,255,.7)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--kraft-lt)}
.crumbs [aria-current]{color:#fff}
.phero h1{font-size:clamp(2.3rem,calc(5.6 * var(--vwu)),5rem);line-height:1.04;letter-spacing:-.04em;max-width:16ch;margin:0 0 22px;color:#fff;text-wrap:balance}
.phero__lede{max-width:54ch;margin:0;font-size:clamp(1rem,calc(1.15 * var(--vwu)),1.1rem);line-height:1.75;color:rgba(255,255,255,.84)}

/* =========================================================
   TICKER
   ========================================================= */
.ticker{overflow:hidden;padding:clamp(22px,calc(2.6 * var(--vwu)),34px) 0;background:var(--paper);border-bottom:1px solid var(--hair)}
.ticker__track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;flex:none;white-space:nowrap;font:500 clamp(1.4rem,calc(2.6 * var(--vwu)),2.3rem)/1.2 var(--font);letter-spacing:-.03em;color:var(--text)}
.ticker__set b{width:7px;height:7px;border-radius:50%;background:var(--maroon);margin:0 clamp(22px,calc(3 * var(--vwu)),44px)}
.t-out,.t-fill{color:inherit;-webkit-text-stroke:0;font-style:normal;font-weight:inherit}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,calc(7 * var(--vwu)),110px);align-items:center}
.about__img img{width:100%;aspect-ratio:1/1.05;object-fit:cover;object-position:60% 50%}
.about__copy .btn{margin-top:14px}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,calc(3.4 * var(--vwu)),56px);margin-top:clamp(72px,calc(9 * var(--vwu)),128px)}
.pillars article{border-top:1px solid var(--maroon);padding-top:24px}
.pillars h3{font-size:clamp(1.15rem,calc(1.4 * var(--vwu)),1.35rem);color:var(--maroon);margin-bottom:16px}
.pillars li{margin:0 0 .65em;font-size:14.5px;line-height:1.6;color:var(--muted)}
.pillars p{font-size:15px;line-height:1.7}

/* =========================================================
   SERVICES — asymmetric grid
   ========================================================= */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:clamp(40px,calc(5 * var(--vwu)),72px)}
.sec-head h2{margin-bottom:0}
.sec-head>p{max-width:38ch;margin:0}
.sec-head--center{flex-direction:column;align-items:center;text-align:center;gap:0}
.sec-head--center h2{max-width:22ch}

.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(300px,calc(27 * var(--vwu)),400px);gap:16px}
.t1{grid-column:1/8}.t2{grid-column:8/13}
.t3{grid-column:1/5;grid-row:2/4}.t4{grid-column:5/13;grid-row:2}
.t5{grid-column:5/9;grid-row:3}.t6{grid-column:9/13;grid-row:3}
.tile .bezel{height:100%}
.tile__core{position:relative;height:100%;display:flex;align-items:flex-end;background:var(--maroon-deep);isolation:isolate}
.tile__core>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.tile__core::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,16,18,.05) 0%,rgba(30,6,14,.5) 55%,rgba(30,6,14,.92) 100%)}
.tile:hover .tile__core>img{transform:scale(1.05)}
.tile__body{position:static;width:100%;padding:clamp(20px,calc(2.2 * var(--vwu)),30px);color:#fff}
.tile__body h3{font-size:clamp(1.3rem,calc(1.8 * var(--vwu)),1.75rem);line-height:1.12;margin:0;max-width:18ch}
.tile__body h3 a{color:inherit;text-decoration:none}
.tile__body h3 a::after{content:"";position:absolute;inset:0;z-index:3}
.tile__body p{margin:12px 0 0;max-width:40ch;font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);opacity:0;translate:0 12px;transition:opacity .6s var(--ease),translate .7s var(--ease)}
.tile:hover .tile__body p,.tile:focus-within .tile__body p{opacity:1;translate:0 0}
.tile__go{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.4);pointer-events:none;transition:background-color .4s var(--ease),color .4s var(--ease)}
.tile__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .tile__go{background:var(--paper);color:var(--maroon)}
.tile--sauce .tile__core{background:var(--maroon)}
.tile--sauce .tile__core>img.tile__cut{inset:auto;right:12%;top:6%;left:auto;width:auto;height:70%;object-fit:contain;z-index:-1;filter:drop-shadow(0 18px 20px rgba(0,0,0,.4))}

/* =========================================================
   PACKAGING
   ========================================================= */
.pack__intro{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,calc(7 * var(--vwu)),110px);align-items:center}
.ticks{margin-top:28px}
.ticks li{padding:14px 0;border-top:1px solid var(--hair);font-size:14.5px;color:var(--text)}
.ticks li:last-child{border-bottom:1px solid var(--hair)}
.pack__collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pack__img img{width:100%;height:100%;object-fit:cover}
.pack__img--a{grid-column:1/-1}
.pack__img--a img{aspect-ratio:16/10}
.pack__img--b img,.pack__img--c img{aspect-ratio:1/1}

.rail{margin-top:clamp(80px,calc(10 * var(--vwu)),140px);padding-block:clamp(60px,calc(7 * var(--vwu)),100px);background:var(--paper-2)}
.rail__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,calc(4 * var(--vwu)),44px)}
.rail__head h3{font-size:clamp(1.6rem,calc(3 * var(--vwu)),2.6rem);line-height:1.1;color:var(--text);max-width:18ch}
.rail__ctrl{display:flex;gap:10px}
.round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--maroon);border:1px solid rgba(99,19,43,.35);transition:background-color .4s var(--ease),color .4s var(--ease),transform .5s var(--ease)}
.round:hover{background:var(--maroon);color:#fff}
.round:active{transform:scale(.94)}
.rail__track{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);
  padding:8px var(--edge) 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail__track::-webkit-scrollbar{display:none}
.rail__track li{flex:0 0 clamp(230px,calc(22 * var(--vwu)),300px);scroll-snap-align:start}
.arch{position:relative;margin:0;border-radius:999px 999px var(--r) var(--r);overflow:hidden;aspect-ratio:3/4.5;background:var(--maroon);isolation:isolate}
.arch img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.arch:hover img{transform:scale(1.05)}
.arch figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 20px;text-align:center;color:#fff;font:500 14px/1.3 var(--font);background:linear-gradient(180deg,transparent,rgba(30,6,14,.8))}
.rail__foot{margin-top:28px}

/* =========================================================
   OYSTER SAUCE
   ========================================================= */
.oyster{overflow:hidden}
.oyster__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,calc(6 * var(--vwu)),96px);align-items:center}
.oyster h2{font-size:clamp(2.4rem,calc(5.4 * var(--vwu)),5rem);margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 34px;font-size:15px;color:var(--kraft-lt)}
.chips li:not(:last-child)::after{content:",\00a0"}
.oyster__visual{position:relative;min-height:clamp(420px,calc(44 * var(--vwu)),600px)}
.oyster__jar{position:absolute;left:4%;bottom:3%;height:66%;width:auto;filter:drop-shadow(0 26px 24px rgba(0,0,0,.4))}
.oyster__bottle{position:absolute;right:14%;bottom:0;height:92%;width:auto;filter:drop-shadow(0 26px 24px rgba(0,0,0,.4))}

/* =========================================================
   VEHICLE IMPORTATION
   ========================================================= */
.vehicle{color:#fff;overflow:hidden;background:var(--ink);--fg:#fff;--fg-muted:rgba(255,255,255,.82);--accent:var(--kraft-lt)}
.vehicle__media,.vehicle__shade{position:absolute;inset:0}
.vehicle__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.vehicle__shade{background:linear-gradient(90deg,rgba(21,16,18,.92) 0%,rgba(21,16,18,.66) 46%,rgba(21,16,18,.4) 100%)}
.vehicle__inner{position:relative}
.vehicle__copy{max-width:660px}
.vehicle h2{max-width:14ch}
.vehicle__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,calc(3 * var(--vwu)),40px);margin-top:clamp(60px,calc(8 * var(--vwu)),110px)}
.steps li{border-top:1px solid rgba(255,255,255,.3);padding-top:20px}
.steps span{font:600 14px/1 var(--font);color:var(--kraft-lt)}
.steps b{display:block;margin:12px 0 6px;font:600 clamp(1.1rem,calc(1.4 * var(--vwu)),1.3rem)/1.2 var(--font);letter-spacing:-.02em}
.steps i{font-style:normal;font-size:14px;line-height:1.55;color:rgba(255,255,255,.74)}

/* =========================================================
   CATALOGUE
   ========================================================= */
.catalogue__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,calc(7 * var(--vwu)),110px);align-items:center}
.catalogue__visual{padding:clamp(24px,calc(5 * var(--vwu)),64px);border-radius:var(--r);background:var(--paper-2)}
.catalogue__visual img{width:100%;filter:drop-shadow(0 30px 30px rgba(58,10,25,.22))}
.catalogue__copy h2{max-width:14ch}
.tagline{font:500 clamp(1.2rem,calc(1.8 * var(--vwu)),1.6rem)/1.3 var(--font);letter-spacing:-.02em;color:var(--text);margin:26px 0 30px}

/* =========================================================
   WHY CARDS
   ========================================================= */
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why__core{padding:clamp(24px,calc(2.2 * var(--vwu)),32px);background:var(--card);border:1px solid var(--hair);min-height:clamp(280px,calc(24 * var(--vwu)),340px);display:flex;flex-direction:column}
.ico{display:block;width:48px;height:48px;background:var(--maroon);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;margin-bottom:auto}
.why__core h3{font-size:clamp(1.15rem,calc(1.4 * var(--vwu)),1.3rem);line-height:1.2;margin:40px 0 10px;color:var(--text)}
.why__core p{font-size:14.5px;line-height:1.65;margin:0;color:var(--muted)}

/* =========================================================
   CLIENTS
   ========================================================= */
.logos{overflow:hidden;padding-block:8px}
.logos__track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.logos:hover .logos__track{animation-play-state:paused}
.logos__set{display:flex;flex:none;gap:16px;padding-right:16px}
.logos__set li{width:clamp(180px,calc(16 * var(--vwu)),230px);height:clamp(96px,calc(8.4 * var(--vwu)),120px);padding:16px;border-radius:var(--r);background:#fff;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center}
.logos__set img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .5s var(--ease),opacity .5s var(--ease)}
.logos__set li:hover img{filter:none;opacity:1}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;margin-top:clamp(56px,calc(7 * var(--vwu)),96px)}
.review{display:flex}
.review .bezel{flex:1;display:flex}
.review__core{flex:1;padding:clamp(26px,calc(2.6 * var(--vwu)),36px);background:#fff;border:1px solid var(--hair);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.review blockquote{margin:0;font:400 clamp(1rem,calc(1.1 * var(--vwu)),1.08rem)/1.7 var(--font);color:var(--text)}
.review figcaption b{display:block;font:600 14px/1.3 var(--font);color:var(--text)}
.review figcaption span{font:400 13px/1.4 var(--font);color:var(--muted)}

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,calc(7 * var(--vwu)),110px);align-items:start}
.contact__info h2{max-width:12ch}
.contact__list{margin-top:30px;max-width:560px}
.contact__list li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--rule);font-size:14.5px;color:var(--fg)}
.contact__list li:last-child{border-bottom:1px solid var(--rule)}
.contact__list span{font:500 13px/1.8 var(--font);color:var(--kraft-lt)}
.contact__list a{text-decoration:none;transition:color .3s var(--ease)}
.contact__list a:hover{color:var(--kraft-lt)}
.contact{overflow:hidden}
.form__core{padding:clamp(24px,calc(3 * var(--vwu)),40px);background:rgba(21,16,18,.3);border:1px solid rgba(255,255,255,.14)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;margin-bottom:20px}
.form label span{font:500 13px/1 var(--font);color:var(--kraft-lt)}
.form label i{font-style:normal;color:#ff9db6}
.form input,.form textarea{width:100%;margin-top:10px;padding:15px 16px;border-radius:12px;resize:vertical;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;font:400 15px/1.4 var(--font);transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--kraft-lt);background:rgba(255,255,255,.11)}
.form input:user-invalid,.form textarea:user-invalid{border-color:#ff9db6}
.form__ok{margin:18px 0 0;color:var(--kraft-lt);font-size:14px}

/* =========================================================
   INNER PAGES
   ========================================================= */
.rows li{border-top:1px solid var(--rule)}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:1fr auto;gap:clamp(16px,calc(2.4 * var(--vwu)),32px);align-items:center;padding:clamp(22px,calc(2.6 * var(--vwu)),34px) 0;text-decoration:none;color:var(--fg)}
.rows h3{font-size:clamp(1.3rem,calc(2.5 * var(--vwu)),2.2rem);line-height:1.1;transition:translate .6s var(--ease)}
.rows p{margin:8px 0 0;max-width:52ch;font-size:15px}
.rows .round{border-color:var(--rule);color:var(--fg)}
.rows a:hover h3{translate:10px 0}
.rows a:hover .round{background:var(--paper);color:var(--maroon);border-color:var(--paper)}

.mv{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mv__core{min-height:clamp(300px,calc(30 * var(--vwu)),420px);padding:clamp(28px,calc(4 * var(--vwu)),52px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;background:rgba(21,16,18,.22);border:1px solid rgba(255,255,255,.16)}
.mv__core h3{font:500 15px/1 var(--font);letter-spacing:0;color:var(--kraft-lt)}
.mv__core p{margin:0;max-width:none;font:500 clamp(1.25rem,calc(1.9 * var(--vwu)),1.75rem)/1.4 var(--font);letter-spacing:-.02em;color:#fff}

.whywrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,calc(6 * var(--vwu)),96px);align-items:start}
.whywrap__head{position:sticky;top:120px}
.whywrap__head h2{max-width:12ch}
.whylist li{padding:clamp(20px,calc(2.4 * var(--vwu)),28px) 0;border-top:1px solid var(--rule);font:500 clamp(1.25rem,calc(2.1 * var(--vwu)),1.85rem)/1.2 var(--font);letter-spacing:-.025em;color:var(--text)}
.whylist li:last-child{border-bottom:1px solid var(--rule)}

.qband{background:var(--ink);--fg:#F3EBE0;--fg-muted:rgba(243,235,224,.72);--accent:var(--kraft-lt);text-align:center;overflow:hidden}
.qband .container{display:flex;flex-direction:column;align-items:center}
.qband blockquote{margin:0 auto;max-width:24ch;font:500 clamp(1.5rem,calc(3.2 * var(--vwu)),2.9rem)/1.25 var(--font);letter-spacing:-.03em;color:#F3EBE0;text-wrap:balance}

.cta__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,calc(5 * var(--vwu)),80px);align-items:end}
.cta h2{max-width:14ch;margin:0}
.cta__side p{margin:0 0 26px;color:var(--fg-muted)}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,calc(7 * var(--vwu)),110px);align-items:center}
.split h2{max-width:14ch}
.split--rev .split__visual{order:-1}
.split__visual .bezel img{width:100%;aspect-ratio:4/4.4;object-fit:cover}
.split__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.bs__text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,calc(4 * var(--vwu)),64px)}
.bs__text p{max-width:none;font-size:15.5px}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,calc(1.8 * var(--vwu)),22px);margin-top:clamp(40px,calc(5 * var(--vwu)),64px)}
.products .arch{aspect-ratio:3/4}

.svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.svc3__core{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14)}
.svc3__img{overflow:hidden}
.svc3__img img{width:100%;aspect-ratio:4/3.2;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc3>article:hover .svc3__img img{transform:scale(1.04)}
.svc3__body{padding:clamp(22px,calc(2.2 * var(--vwu)),30px)}
.svc3__body h3{font-size:clamp(1.2rem,calc(1.6 * var(--vwu)),1.5rem);line-height:1.15;margin:0 0 10px;color:#fff}
.svc3__body p{margin:0;font-size:14.5px}

.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wall__core{background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:clamp(16px,calc(2 * var(--vwu)),28px);border:1px solid var(--hair)}
.wall__core img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .5s var(--ease),opacity .5s var(--ease)}
.wall li:hover .wall__core img{filter:none;opacity:1}
.reviews2{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:stretch}
.reviews2__stack{display:grid;gap:16px}
.review--feature,.review--feature .bezel{height:100%}
.review--feature .review__core{padding:clamp(30px,calc(4 * var(--vwu)),52px)}
.review--feature blockquote{font-size:clamp(1.2rem,calc(1.8 * var(--vwu)),1.6rem);line-height:1.55;letter-spacing:-.015em}
.serve{display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(20px,calc(3 * var(--vwu)),40px)}
.serve li{padding:18px 0;border-top:1px solid var(--hair);font:500 clamp(1rem,calc(1.3 * var(--vwu)),1.15rem)/1.3 var(--font);letter-spacing:-.015em;color:var(--text)}

.cpage{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,calc(6 * var(--vwu)),96px);align-items:start}
.cpage__head h2{max-width:12ch}
.icards{display:grid;gap:14px;margin-top:clamp(26px,calc(3 * var(--vwu)),40px)}
.icard__core{padding:clamp(22px,calc(2.4 * var(--vwu)),30px);background:rgba(21,16,18,.25);border:1px solid rgba(255,255,255,.14)}
.icard__k{margin:0 0 10px;font:500 13px/1 var(--font);color:var(--kraft-lt)}
.icard__v{margin:0;max-width:none;font:500 clamp(1.1rem,calc(1.6 * var(--vwu)),1.4rem)/1.35 var(--font);letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.icard__v a{text-decoration:none;transition:color .3s var(--ease)}
.icard__v a:hover{color:var(--kraft-lt)}
.icard__note{margin:8px 0 0;font-size:14px;line-height:1.55;color:rgba(247,238,227,.72)}
.icard__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.map__frame{position:relative;aspect-ratio:21/9;background:var(--maroon-deep)}
.map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:24px}
.map__bar p{margin:0;max-width:none;font:500 clamp(1rem,calc(1.4 * var(--vwu)),1.2rem)/1.4 var(--font);letter-spacing:-.015em;color:var(--text)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .nav__links a{padding:10px 12px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .serve{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .nav__brand img{height:54px}
  .nav.is-scrolled .nav__brand img{height:44px}
  .hero__foot{flex-direction:column;gap:6px;text-align:center}
  .about__grid,.pack__intro,.oyster__grid,.catalogue__grid,.contact__grid,.mv,.whywrap,.cta__grid,.split,.svc3,.reviews2,.cpage,.bs__text{grid-template-columns:1fr}
  .whywrap__head{position:static}
  .split--rev .split__visual{order:0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .tile,.t1,.t2,.t3,.t4,.t5,.t6{grid-column:1/-1;grid-row:auto}
  .tile .bezel,.tile__core{height:auto}
  .tile__core{min-height:380px}
  .tile__body p{opacity:1;translate:0 0}
  .tile--sauce .tile__core>img.tile__cut{height:52%}
  .steps{grid-template-columns:repeat(2,1fr)}
  .oyster__visual{min-height:440px}
  .products{grid-template-columns:repeat(2,1fr)}
  .map__frame{aspect-ratio:4/3}
  .reviews{grid-template-columns:1fr}
}
@media (max-width:767px){
  .pillars,.why__grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__mid{flex-direction:column;align-items:flex-start}
  .rail__head{align-items:flex-start;flex-direction:column}
  .contact__list li{grid-template-columns:76px 1fr}
  .wall{grid-template-columns:repeat(2,1fr)}
  .serve{grid-template-columns:1fr}
  .hero h1{max-width:11ch}
  .pack__collage{grid-template-columns:1fr 1fr}
}
@media (hover:none){
  .tile__body p{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .reveal,.hero__in{opacity:1;translate:none}
}

/* =========================================================
   HERO SLIDESHOW · photos and words fade into each other
   ========================================================= */
.hero__copy{display:grid;justify-items:center;width:100%}
.hero__msg{grid-area:1/1;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.hero__msg.is-on{opacity:1;visibility:visible;transition:opacity 1.3s var(--ease) .6s,visibility 0s .6s}

/* =========================================================
   SCROLL SET PIECES
   html.live = wide screen + motion allowed (pinned versions on)
   ========================================================= */

/* ---------- intro: framed image expands to full screen ---------- */
.hero--intro .hero__inner{margin-block:auto 0;padding-block:120px clamp(56px,10vh,100px)}
.hero--intro .hero__media{clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.76,0,.24,1) .35s}
.hero--intro .hero__media img{transition:transform 1.9s cubic-bezier(.76,0,.24,1) .35s}
.hero--intro .hero__shade{transition:opacity 1.2s ease .9s}
.js .hero--intro:not(.is-open) .hero__media{clip-path:inset(36% 41% 36% 41% round 10px)}
.js .hero--intro:not(.is-open) .hero__media img{transform:scale(1.35)}
.js .hero--intro:not(.is-open) .hero__shade{opacity:0}
.intro__side{
  position:absolute;top:50%;z-index:2;margin:0;max-width:12ch;color:#fff;
  font:500 clamp(1rem,calc(1.7 * var(--vwu)),1.6rem)/1.3 var(--font);letter-spacing:-.02em;
  opacity:0;transition:opacity .7s var(--ease) .15s,translate 1.4s var(--ease) .2s;
}
.intro__l{left:clamp(24px,calc(9 * var(--vwu)),160px);translate:-70px -50%}
.intro__r{right:clamp(24px,calc(9 * var(--vwu)),160px);translate:70px -50%;text-align:right}
.js .hero--intro:not(.is-open) .intro__side{opacity:1;translate:0 -50%}
.hero--intro .hero__in{animation-delay:calc(var(--d,0s) + 1.45s)}


/* inner pages: same idea, lighter */
.phero__media{clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.76,0,.24,1)}
.phero__media img{transition:transform 1.8s cubic-bezier(.76,0,.24,1)}
.js .phero:not(.is-open) .phero__media{clip-path:inset(16% 14% 16% 14% round 14px)}
.js .phero:not(.is-open) .phero__media img{transform:scale(1.3)}
.phero .hero__in{animation-delay:calc(var(--d,0s) + .75s)}

/* ---------- pinned image reel (services) ---------- */
.svr{position:relative;background:var(--paper);padding-block:clamp(72px,calc(9 * var(--vwu)),120px)}
.svr__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(28px,calc(4 * var(--vwu)),48px)}
.svr__head h2{margin:0;font-size:clamp(1.8rem,calc(3.2 * var(--vwu)),3rem);max-width:14ch}
.svr__head p{margin:0;max-width:32ch;font-size:15px}
.svr__items{display:grid;gap:16px;width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.svr__item{display:grid;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.svr__img{order:-1;margin:0;position:relative;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.svr__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svr__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(22px,calc(5 * var(--vwu)),40px)}
.svr__name{margin:0;font:600 clamp(1.7rem,calc(6 * var(--vwu)),2.4rem)/1.1 var(--font);letter-spacing:-.04em;color:var(--text)}
.svr__name a{color:inherit;text-decoration:none}
.svr__info p{margin:0 0 14px;max-width:40ch;font-size:14.5px}
.svr__shade,.svr__bar{display:none}
@media (min-width:901px){.svr__items{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1280px){.svr__items{grid-template-columns:repeat(3,1fr)}}

.live .svr{height:calc(100vh*(1 + (var(--n) - 1)*.95));height:calc(100dvh*(1 + (var(--n) - 1)*.95));padding:0}
.live .svr__pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--ink);color:#fff}
.live .svr__items{position:absolute;inset:0;display:block;max-width:none;padding-inline:0}
.live .svr__item{position:absolute;inset:0;display:block;border-radius:0;background:none;overflow:visible;pointer-events:none}
.live .svr__img{position:absolute;inset:0;order:0;aspect-ratio:auto;z-index:1;background:var(--ink);clip-path:inset(100% 0 0 0);will-change:clip-path,translate}
.live .svr__item:first-child .svr__img{clip-path:none}
.live .svr__img img{will-change:transform}
.live .svr__shade{display:block;position:absolute;inset:0;z-index:30;pointer-events:none;background:linear-gradient(90deg,rgba(21,16,18,.88) 0%,rgba(21,16,18,.55) 46%,rgba(21,16,18,.16) 100%),linear-gradient(180deg,rgba(21,16,18,.6) 0%,transparent 26%,transparent 68%,rgba(21,16,18,.62) 100%),radial-gradient(58% 52% at 88% 94%,rgba(21,16,18,.7),transparent 72%)}
.live .svr__body{display:contents}
.live .svr__name{position:absolute;z-index:40;left:var(--edge);top:56%;margin:-.75em 0 0;font-size:clamp(1.8rem,calc(3.6 * var(--vwu)),3.8rem);line-height:1.5;letter-spacing:-.045em;white-space:nowrap;color:#fff;transform-origin:0 50%;opacity:0;pointer-events:auto;will-change:transform,opacity}
.live .svr__name a:hover{color:var(--kraft-lt)}
.live .svr__info{position:absolute;z-index:40;right:var(--edge);bottom:clamp(64px,12vh,120px);width:min(380px,calc(30 * var(--vwu)));opacity:0;pointer-events:none;will-change:transform,opacity}
.live .svr__info p{margin:0 0 20px;color:rgba(255,255,255,.88);font-size:15px;line-height:1.7}
.live .svr__info .btn{background:var(--paper);color:var(--maroon)}
.live .svr__info .btn:hover{background:#fff}
.live .svr__head{position:absolute;z-index:45;left:0;right:0;top:clamp(88px,12vh,116px);margin:0 auto;pointer-events:none}
.live .svr__head h2{margin:0;color:#fff;font-size:clamp(1.3rem,calc(2 * var(--vwu)),1.8rem)}
.live .svr__head p{color:rgba(255,255,255,.78);font-size:14px}
.live .svr__bar{display:block;position:absolute;z-index:46;left:var(--edge);right:var(--edge);bottom:clamp(24px,4vh,40px);height:2px;background:rgba(255,255,255,.24)}
.live .svr__fill{display:block;height:100%;background:var(--kraft-lt);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- pinned expanding cards (packaging) ---------- */
.packaging{padding-bottom:0}
.acc{background:var(--paper-2);padding-block:clamp(56px,calc(7 * var(--vwu)),96px);margin-top:clamp(72px,calc(9 * var(--vwu)),130px)}
.acc__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(24px,calc(3 * var(--vwu)),40px)}
.acc__head h3{font-size:clamp(1.5rem,calc(2.8 * var(--vwu)),2.4rem);line-height:1.15;color:var(--text);max-width:20ch}
.acc__row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:16px}
.acc__row::-webkit-scrollbar{display:none}
.acc__card{position:relative;flex:0 0 min(calc(72 * var(--vwu)),300px);aspect-ratio:3/4.2;border-radius:var(--r);overflow:hidden;background:var(--maroon);scroll-snap-align:start}
.acc__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.acc__label{display:none}
.acc__info{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 20px;color:#fff;background:linear-gradient(transparent,rgba(30,6,14,.86))}
.acc__info h4{font:600 1.05rem/1.25 var(--font);letter-spacing:-.02em;margin:0 0 6px}
.acc__info p{margin:0;max-width:none;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.84)}

.live-acc .acc{height:calc(100vh*(1 + (var(--n) - 1)*var(--step,.55)));height:calc(100dvh*(1 + (var(--n) - 1)*var(--step,.55)));padding:0;margin-top:clamp(72px,calc(9 * var(--vwu)),130px)}
.live-acc .acc__pin{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-block:clamp(84px,11vh,110px) clamp(24px,4vh,40px);overflow:hidden}
.live-acc .acc__head{margin-bottom:clamp(18px,3vh,32px)}
.live-acc .acc__ctrl{display:none}
.live-acc .acc__row{flex:1;min-height:0;overflow:visible;scroll-snap-type:none;padding-bottom:0;gap:8px}
.live-acc .acc__card{flex:1 1 0;min-width:0;aspect-ratio:auto;scroll-snap-align:none}
.live-acc .acc__label{display:block;position:absolute;left:50%;bottom:22px;margin-left:-8px;writing-mode:vertical-rl;rotate:180deg;color:#fff;font:500 14px/1 var(--font);white-space:nowrap}
.live-acc .acc__info{opacity:0;padding:56px clamp(18px,calc(2 * var(--vwu)),28px) clamp(18px,calc(2 * var(--vwu)),28px)}
.live-acc .acc__info h4{font-size:clamp(1.2rem,calc(1.8 * var(--vwu)),1.6rem)}

/* ---------- giant scroll-driven marquee ---------- */
.bigmarq{display:block;overflow:hidden;margin-top:clamp(56px,calc(7 * var(--vwu)),110px);text-decoration:none;color:#F3EBE0}
.bigmarq__track{display:flex;width:max-content;will-change:transform}
.bigmarq__set{display:flex;align-items:center;flex:none;white-space:nowrap;font:600 clamp(4rem,calc(13 * var(--vwu)),12rem)/1.05 var(--font);letter-spacing:-.055em}
.bigmarq__set i{display:block;width:.4em;height:.4em;border-radius:50%;background:var(--kraft);margin:0 .32em;transition:background-color .4s var(--ease)}
.bigmarq:hover .bigmarq__set i{background:#fff}
.cta .bigmarq{margin:0 0 clamp(48px,calc(6 * var(--vwu)),88px)}
.cta{padding-top:clamp(56px,calc(7 * var(--vwu)),100px)}

@media (max-width:900px){
  .svr__head{flex-direction:column;align-items:flex-start;gap:12px}
  .hero--intro .hero__inner{padding-block:110px clamp(48px,8vh,72px)}
}
@media (max-width:767px){
  .js .hero--intro:not(.is-open) .hero__media{clip-path:inset(38% 28% 38% 28% round 10px)}
  .intro__side{max-width:9ch;font-size:.95rem}
}

/* ---------- extra pinned distance so the hero can recede slowly ---------- */
.hero-hold{height:70vh;height:70dvh;pointer-events:none}
.hero-hold--inner{height:34vh;height:34dvh}
@media (max-width:900px){
  .hero-hold{height:45vh;height:45dvh}
  .hero-hold--inner{height:24vh;height:24dvh}
}

/* =========================================================
   COUNT-UP STATS
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;margin:34px 0 36px;padding:0}
.stats>div{padding:0 clamp(16px,calc(2.2 * var(--vwu)),34px);border-left:1px solid var(--hair)}
.stats>div:first-child{padding-left:0;border-left:0}
/* Clean outline: stroke is painted first, then the glyph is filled with the page colour,
   which hides the inner lines where the font's overlapping shapes would show through. */
.stats dt{display:flex;align-items:baseline;gap:4px;font:600 clamp(2.3rem,calc(3.8 * var(--vwu)),3.6rem)/1 var(--font);letter-spacing:-.05em;color:var(--paper);-webkit-text-stroke:2.8px var(--maroon);paint-order:stroke fill;stroke-linejoin:round;font-variant-numeric:tabular-nums}
.stats dt small{font:600 .34em/1 var(--font);letter-spacing:0;color:var(--maroon);-webkit-text-stroke:0;paint-order:normal;white-space:nowrap}
.stats dd{margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--muted);max-width:14ch}

/* =========================================================
   EXCELLENCE · 2-column grid over one full-width photo (tablet + web).
   The hovered or tapped tile fills in and the photo behind the grid swaps.
   Phones get stacked photo cards instead.
   ========================================================= */
.exc{background:var(--paper)}
.exc__head{padding-block:clamp(72px,calc(9 * var(--vwu)),120px) clamp(32px,calc(4 * var(--vwu)),56px);text-align:center}
.exc__head h2{margin:0 auto;max-width:18ch}
.exc__stage{position:relative;overflow:hidden;background:var(--ink)}
.exc__stage::after{content:"";position:absolute;inset:0;background:rgba(21,16,18,.5);pointer-events:none}
.exc__bgs{position:absolute;inset:0}
.exc__bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity .9s var(--ease),transform 1.8s var(--ease)}
.exc__bgs img.is-on{opacity:1;transform:scale(1)}
.exc__grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(280px,calc(29 * var(--vwu)),460px);width:100%}
.exc__tile{position:relative;margin:-.5px;border:1px solid rgba(255,255,255,.34);background:rgba(21,16,18,.28);transition:background-color .6s var(--ease)}
.exc__tile.is-active{background:rgba(99,19,43,.95)}
.exc__link{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,calc(2 * var(--vwu)),30px);color:#fff;text-decoration:none}
.exc__no{position:absolute;top:clamp(18px,calc(2 * var(--vwu)),26px);right:clamp(18px,calc(2 * var(--vwu)),26px);font:500 15px/1 var(--font);color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums}
.exc__tile h3{margin:0;max-width:20ch;font-size:clamp(1.1rem,calc(1.5 * var(--vwu)),1.45rem);line-height:1.2;letter-spacing:-.025em}
.exc__tile p{order:-1;margin:0 0 16px;max-width:46ch;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.9);opacity:0;translate:0 12px;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.exc__tile.is-active p{opacity:1;translate:0 0}
@media (max-width:767px){
  .exc__bgs,.exc__stage::after{display:none}
  .exc__stage{background:var(--paper);padding-bottom:12px}
  .exc__grid{grid-template-columns:1fr;grid-auto-rows:auto;max-width:none}
  .exc__tile{margin:0 var(--gutter) 12px;border:0;border-radius:var(--r);overflow:hidden;min-height:300px;background:var(--maroon-deep)}
  .exc__tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,16,18,.1),rgba(30,6,14,.9)),var(--bg) center/cover no-repeat}
  .exc__tile.is-active{background:var(--maroon-deep)}
  .exc__tile p{opacity:1;translate:0 0}
}

/* =========================================================
   WHOLESALER · pay 40% to start
   ========================================================= */
.wh__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,calc(6 * var(--vwu)),96px);align-items:start}
.wh__copy h2{max-width:15ch}
.wh__bar{display:flex;min-height:68px;margin:30px 0 10px;border-radius:999px;overflow:hidden;border:1px solid rgba(99,19,43,.35);background:rgba(99,19,43,.05);font:500 14px/1 var(--font)}
.wh__now{flex:0 0 40%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--maroon);color:#fff;clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.76,0,.24,1)}
.wh__bar.is-in .wh__now{clip-path:inset(0 0 0 0)}
.wh__later{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--maroon)}
.wh__bar b{font:600 1.5rem/1 var(--font);letter-spacing:-.04em}
.wh__steps{margin:26px 0 28px}
.wh__steps li{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--hair)}
.wh__steps li:last-child{border-bottom:1px solid var(--hair)}
.wh__steps .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--maroon);color:#fff;font:600 14px/1 var(--font)}
.wh__steps b{display:block;margin-bottom:4px;font:600 1.05rem/1.3 var(--font);letter-spacing:-.02em;color:var(--text)}
.wh__steps span.t{font-size:14.5px;line-height:1.6;color:var(--muted)}
.wh__est{padding:clamp(20px,calc(2.4 * var(--vwu)),28px);border-radius:var(--r);background:#fff;border:1px solid var(--hair)}
.wh__est h3{margin:0 0 16px;font-size:1.1rem;letter-spacing:-.02em;color:var(--text)}
.wh__est .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wh__est label span{display:block;margin-bottom:8px;font:500 13px/1 var(--font);color:var(--muted)}
.wh__est input,.wh__est select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(99,19,43,.25);background:var(--card);font:500 15px/1.2 var(--font);color:var(--text)}
.wh__est input:focus,.wh__est select:focus{outline:2px solid var(--maroon);outline-offset:1px}
.wh__out{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 0}
.wh__out div{padding:14px;border-radius:12px;background:var(--paper)}
.wh__out dt{font-size:12.5px;line-height:1.3;color:var(--muted)}
.wh__out dd{margin:6px 0 0;font:600 clamp(1rem,calc(1.5 * var(--vwu)),1.3rem)/1.1 var(--font);letter-spacing:-.03em;color:var(--maroon);overflow-wrap:anywhere}
.wh__note{margin:14px 0 0;max-width:none;font-size:12.5px;line-height:1.5;color:var(--muted)}
.wh__form .form__core{background:var(--maroon);border:0}
.wh__form h3{margin:0 0 6px;font-size:1.4rem;letter-spacing:-.03em;color:#fff}
.wh__form .lede{margin:0 0 22px;max-width:none;font-size:14px;color:rgba(247,238,227,.8)}
.wh__form textarea{min-height:110px}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{position:relative;overflow:hidden;background:var(--ink);color:#F3EBE0;padding:clamp(72px,calc(8 * var(--vwu)),112px) 0 0}
.footer__top{display:grid;grid-template-columns:1.2fr .9fr 1.25fr 1fr 1.3fr;gap:clamp(28px,calc(3.4 * var(--vwu)),56px)}
.footer__brand img{width:128px;height:auto;margin-bottom:20px}
.footer__brand p{margin:0;max-width:16ch;font:500 clamp(1.05rem,calc(1.4 * var(--vwu)),1.3rem)/1.35 var(--font);letter-spacing:-.02em;color:#F3EBE0}
.footer h4{margin:0 0 22px;font:500 17px/1 var(--font);letter-spacing:-.01em;color:#fff}
.footer li{margin:0 0 12px;font-size:14px;line-height:1.5;color:rgba(243,235,224,.78)}
.footer li a{position:relative;display:inline-block;text-decoration:none;transition:color .3s var(--ease),translate .4s var(--ease)}
.footer li a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.footer li a:hover{color:#fff;translate:4px 0}
.footer li a:hover::after{transform:scaleX(1);transform-origin:left}
.footer__mid{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(40px,calc(5 * var(--vwu)),72px);padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.footer__addr p{margin:0 0 10px;max-width:36ch;font:500 15px/1.5 var(--font);color:#F3EBE0}
.footer__addr p:last-child{margin:0;font-weight:400;color:rgba(243,235,224,.7)}
.social{display:flex;gap:10px}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.32);color:#fff;text-decoration:none;transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),translate .5s var(--ease)}
.social a:hover{background:var(--kraft-lt);border-color:var(--kraft-lt);color:var(--maroon-deep);translate:0 -5px}
.social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.footer__mark{display:flex;justify-content:center;overflow:hidden;margin-top:clamp(24px,calc(3.5 * var(--vwu)),48px);font:700 clamp(6.5rem,calc(26.5 * var(--vwu)),29rem)/.8 var(--font);letter-spacing:-.07em;user-select:none;pointer-events:none}
.footer__mark span{display:inline-block;padding-bottom:.1em;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.07) 62%,rgba(255,255,255,0) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;will-change:transform,opacity}

@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,auto);row-gap:26px}
  .stats>div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:900px){
  .wh__grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .wh__out{grid-template-columns:1fr}
  .wh__est .row{grid-template-columns:1fr}
}

/* footer responsive (must come after the footer base rules) */
@media (max-width:1100px){
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:767px){
  .footer__top{grid-template-columns:1fr 1fr;row-gap:36px}
  .footer__col:last-child{grid-column:1/-1}
  .footer__mid{flex-direction:column;align-items:flex-start}
  .footer__mark{font-size:clamp(5rem,calc(30 * var(--vwu)),9rem)}
}

/* packaging row arrows (mouse users; touch users swipe) */
.acc__actions{display:flex;align-items:center;gap:14px}
.acc__ctrl{display:none;gap:10px}
@media (hover:hover) and (pointer:fine){.acc__ctrl{display:flex}}
@media (max-width:767px){.acc__head{flex-wrap:wrap}}

/* packaging: "View all" panel */
.pkall{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--text);overflow:hidden}
.pkall:not([open]){display:none}
.pkall::backdrop{background:rgba(21,16,18,.6)}
.pkall__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:clamp(40px,calc(6 * var(--vwu)),88px)}
.pkall__bar{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--hair)}
.pkall__barin{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(14px,calc(1.6 * var(--vwu)),24px)}
.pkall__bar h3{font-size:clamp(1.15rem,calc(2 * var(--vwu)),1.9rem);line-height:1.2;max-width:none;color:var(--text)}
.pkall__grid{list-style:none;margin-block:clamp(22px,calc(2.6 * var(--vwu)),40px) 0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,calc(2.4 * var(--vwu)),36px) clamp(12px,calc(1.6 * var(--vwu)),24px)}
@media (min-width:768px){.pkall__grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1180px){.pkall__grid{grid-template-columns:repeat(5,1fr)}}
.pkall__item figure{margin:0}
.pkall__img{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--maroon)}
.pkall__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 1.2s var(--ease)}
.pkall__item:hover .pkall__img img{transform:scale(1.05)}
.pkall__item figcaption{margin-top:12px;font:500 .95rem/1.3 var(--font);letter-spacing:-.01em}
.pkall__foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px 32px;margin-top:clamp(36px,calc(4.4 * var(--vwu)),64px);padding-top:clamp(24px,calc(3 * var(--vwu)),40px);border-top:1px solid var(--hair)}
.pkall__foot p{margin:0;max-width:52ch;color:var(--muted)}

@keyframes pkIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pkOut{to{opacity:0;transform:translateY(18px)}}
@keyframes pkItem{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.pkall[open]{animation:pkIn .75s var(--ease) both}
.pkall.is-closing{animation:pkOut .38s var(--ease) both}
.pkall[open] .pkall__item{animation:pkItem 1s var(--ease) both;animation-delay:calc(var(--i,0) * 38ms + 200ms)}
@media (prefers-reduced-motion:reduce){.pkall[open],.pkall.is-closing,.pkall[open] .pkall__item{animation:none}}
html:has(.pkall[open]){overflow:hidden}

/* wholesaler: "up to" labels in the split bar, and the branded cartons row */
.wh__now,.wh__later{flex-wrap:wrap;text-align:center;padding:8px 12px;gap:2px 8px}
.wh__side{display:grid;gap:clamp(12px,calc(1.5 * var(--vwu)),22px)}
.wh__box{position:relative;margin:0;overflow:hidden;aspect-ratio:2/1;border-radius:var(--r);background:#fff}
.wh__box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.18;transform-origin:50% 52%;transition:transform 1.4s var(--ease)}
.wh__box:hover img{transform:scale(1.03)}
@media (max-width:900px){.wh__box{aspect-ratio:3/2}}