:root{
  --soot:#1d1a17;
  --soot-2:#2a2622;
  --ash:#e7e4de;
  --ash-2:#d6d2ca;
  --ember:#e2561f;
  --ember-hot:#ff8a3d;
  --forest:#1f4a39;
  --ink:#1d1a17;
  --muted:#6f685f;
  --head:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --p:0; /* scroll progress 0..1, set by script */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--ash);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ember-hot);outline-offset:3px}
h1,h2,h3{font-family:var(--head);line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;max-width:18ch}
h3{font-size:1.3rem;font-weight:600}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.lead{font-size:1.2rem;color:var(--muted);max-width:52ch;margin-top:1rem}

/* NAV */
.nav{position:fixed;inset:16px 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,36px);pointer-events:none}
.nav>*{pointer-events:auto}
.brand{font-family:var(--head);font-weight:800;font-size:1.35rem;text-decoration:none;color:#fff;letter-spacing:-.02em;mix-blend-mode:normal}
.pill{display:flex;gap:4px;padding:6px;border-radius:999px;background:rgba(29,26,23,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1)}
.pill a{color:#eee;text-decoration:none;font-size:.9rem;padding:8px 16px;border-radius:999px;transition:background .2s}
.pill a:hover{background:rgba(255,255,255,.12)}
.nav-cta{background:var(--ember);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:999px;transition:transform .2s,background .2s}
.nav-cta:hover{background:var(--ember-hot);transform:translateY(-1px)}

/* BUTTONS */
.btn{display:inline-block;font:600 1rem var(--body);padding:14px 26px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-ember{background:var(--ember);color:#fff}
.btn-ember:hover{background:var(--ember-hot)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:#fff}

/* HERO */
.hero{position:relative;min-height:100svh;background:var(--soot);color:#fff;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:-5% 0;z-index:-3;background:url('assets/hero.jpg') center/cover no-repeat;filter:grayscale(.6) brightness(.55);transform:translateY(calc(var(--p)*180px))}
.glow{position:absolute;left:50%;bottom:-30%;width:140vmax;height:90vmax;translate:-50% 0;z-index:-2;background:radial-gradient(closest-side,rgba(226,86,31,.55),rgba(226,86,31,.18) 45%,transparent 70%);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.7;scale:1.06}}
/* Hero charcoal scatter: position > parallax, entrance, float, so each animates its own transform */
.hero-coal{position:absolute;inset:0;z-index:-1;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 50% 42% at 50% 50%,rgba(0,0,0,.18),#000 100%);mask-image:radial-gradient(ellipse 50% 42% at 50% 50%,rgba(0,0,0,.18),#000 100%)}
.hc{position:absolute;aspect-ratio:1;transform:translateY(calc(var(--p)*var(--z)*-260px));will-change:transform}
.hc-i{animation:hcin 1.2s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes hcin{from{opacity:0;transform:translateY(-90px) scale(.7)}}
.hc-f{animation:hcfloat var(--dur) var(--dl) ease-in-out infinite alternate}
@keyframes hcfloat{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.hc svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 16px rgba(226,86,31,.28))}
.hero .crack,.hero .crack-glow{animation:flicker 2.8s ease-in-out infinite}
.hero-inner{width:min(1180px,100% - 40px);margin-inline:auto;padding:140px 0 100px;text-align:center}
.hero h1{font-size:clamp(2.6rem,7.4vw,6.4rem);font-weight:800;margin-inline:auto}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .line>span{display:block;transform:translateY(105%);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero h1 .line:nth-child(3)>span{animation-delay:.24s}
.hero h1 .light{font-weight:400;color:var(--ember-hot)}
@keyframes rise{to{transform:none}}
.hero-sub{max-width:56ch;margin:1.8rem auto 2.2rem;font-size:1.2rem;color:#e4ded5}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fade-in{opacity:0;animation:fade .9s .7s ease forwards}
.hero-actions.fade-in{animation-delay:.9s}
@keyframes fade{to{opacity:1}}
.scroll-cue{position:absolute;bottom:26px;left:50%;width:22px;height:36px;border:2px solid rgba(255,255,255,.5);border-radius:12px;translate:-50% 0}
.scroll-cue i{position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.6s infinite}
@keyframes cue{60%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ABOUT */
.about{padding:clamp(80px,12vw,160px) 0;background:linear-gradient(var(--soot),var(--ash) 220px)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start;padding-top:140px}
.about-copy p{font-size:1.15rem;margin-bottom:1.1rem;max-width:58ch}
.facts{margin-top:2.2rem;border-top:1.5px solid var(--ink)}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--ash-2)}
.facts dt{color:var(--muted)}
.facts dd{font-weight:600;text-align:right}

/* HORIZONTAL PRODUCTS */
.hs{background:var(--soot);color:#fff;position:relative;padding:clamp(70px,9vw,120px) 0}
.hs-sticky{width:min(1240px,100% - 40px);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(28px,4vw,50px)}
.hs-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--soot-2);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,.07);transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--ember);transform:translateY(-6px)}
.card svg{width:100%;height:200px;overflow:visible;background:radial-gradient(circle at 50% 100%,rgba(226,86,31,.28),transparent 70%);border-radius:14px;transition:background .4s}
.card:hover svg{background:radial-gradient(circle at 50% 100%,rgba(255,120,50,.5),transparent 72%)}
.card svg:not(.coal-ready) .hl{fill:var(--ember)}

/* Procedural charcoal */
.stage{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .stage{transform:scale(1.05)}
.pc{opacity:0;transform:translateY(-130px) rotate(calc(var(--r) + 45deg))}
.card.in .pc{animation:drop .85s var(--d) cubic-bezier(.3,1.45,.5,1) forwards}
@keyframes drop{to{opacity:1;transform:translateY(0) rotate(var(--r))}}
.crack,.crack-glow{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.crack{stroke:var(--ember-hot);stroke-width:1.1}
.crack-glow{stroke:var(--ember);stroke-width:3.5;filter:var(--blur)}
.card.in .crack,.card.in .crack-glow{animation:flicker 2.6s ease-in-out 1s infinite}
.card.in:hover .crack{stroke:#ffe3b0}
@keyframes flicker{0%,100%{opacity:.35}45%{opacity:1}70%{opacity:.6}}
.sp{fill:var(--ember-hot);opacity:0}
.card.in .sp{animation:ember 3s ease-out 1s infinite}
@keyframes ember{0%{opacity:0;transform:translate(0,0)}15%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),-110px)}}
.card p{color:#cfc8be;font-size:1rem;flex:1}
.card a{align-self:flex-start;color:var(--ember-hot);font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor}

/* OPERATIONS */
.ops{padding:clamp(80px,10vw,140px) 0;background:linear-gradient(var(--soot) 0,var(--ash) 140px)}
.ops .wrap{padding-top:120px}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem;position:relative}
/* the line runs from the first circle's centre to the last one's, and sits behind the circles */
.steps::before,.steps::after{content:"";position:absolute;left:20px;top:19px;height:2px;border-radius:2px;z-index:0}
.steps::before{right:calc(25% - 20px);background:var(--ash-2)}
.steps::after{width:75%;background:linear-gradient(90deg,var(--ember),var(--ember-hot));transform:scaleX(var(--steps,0));transform-origin:left;will-change:transform}
.steps li{counter-increment:s;padding:64px 24px 0 0;position:relative}
.steps li::before{content:counter(s);position:absolute;z-index:1;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--ash);border:2px solid var(--ink);display:grid;place-items:center;font:700 1rem var(--head);transition:background .5s ease,border-color .5s ease,color .5s ease,transform .6s cubic-bezier(.3,1.6,.5,1),box-shadow .6s ease}
.steps li.in::before{background:var(--ember);border-color:var(--ember);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px rgba(226,86,31,.18)}
.steps li h3,.steps li p{transition:color .5s ease,opacity .5s ease}
.steps li:not(.in) h3,.steps li:not(.in) p{opacity:.55}
.steps p{color:var(--muted);margin-top:.4rem}

/* PACKAGING */
.packaging{padding:clamp(60px,8vw,110px) 0 clamp(90px,12vw,150px);background:var(--ash-2)}
.pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:3rem}
.pack{background:var(--ash);border-radius:20px;padding:26px;transition:transform .3s}
.pack:hover{transform:translateY(-6px) rotate(-.6deg)}
.pack svg{width:100%;height:210px;overflow:visible;margin-bottom:10px}
.pack svg:not(.pack-art){fill:var(--soot);stroke:var(--soot);stroke-width:2;stroke-linejoin:round;height:150px}
.pack svg:not(.pack-art) .ln{fill:none;stroke:var(--ember-hot);stroke-linecap:round}

/* Procedural packaging */
.pk{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(-70px) scale(1,.75)}
.pack.in .pk{animation:pkdrop 1s var(--d) cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes pkdrop{60%{opacity:1;transform:translateY(0) scale(1.05,.94)}to{opacity:1;transform:none}}
.pack.in .ground{animation:gfade .6s var(--d,.2s) ease forwards}
@keyframes gfade{to{opacity:.18}}
.pack:hover .pk{transform:rotate(-2.5deg) translateY(-4px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.shine{opacity:0}
.pack.in .shine{animation:sweep 4.5s 1.4s ease-in-out infinite}
@keyframes sweep{0%{transform:skewX(-18deg) translateX(-30px);opacity:0}12%{opacity:1}45%{transform:skewX(-18deg) translateX(190px);opacity:0}100%{transform:skewX(-18deg) translateX(190px);opacity:0}}
.lid{transform-box:fill-box;transform-origin:50% 100%}
.pack.in .lid{animation:lidpop 5s 1.5s ease-in-out infinite}
@keyframes lidpop{0%,70%,100%{transform:translateY(0) rotate(0)}78%,90%{transform:translateY(-26px) rotate(-8deg)}}
.mouth{opacity:0}
.pack.in .mouth{animation:mouthshow 5s 1.5s ease-in-out infinite}
@keyframes mouthshow{0%,70%,100%{opacity:0}78%,90%{opacity:1}}
.pack.in .brand{animation:rebrand 6s 1.6s ease-in-out infinite}
@keyframes rebrand{0%,20%{filter:hue-rotate(0)}40%,60%{filter:hue-rotate(150deg)}80%,100%{filter:hue-rotate(260deg)}}
.pack p{color:var(--muted);font-size:.98rem;margin-top:.3rem}

/* SHIPPING */
.shipping{padding:clamp(80px,10vw,140px) 0;background:var(--ash)}
.ship-top{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.container-art{width:100%;height:auto;overflow:visible}
.c-box{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateX(120px)}
.container-art.in .c-box{animation:cslide 1.3s cubic-bezier(.2,.9,.25,1) .1s forwards}
@keyframes cslide{70%{opacity:1;transform:translateX(-6px)}to{opacity:1;transform:none}}
.c-shine{opacity:0}
.container-art.in .c-shine{animation:cshine 5s 1.6s ease-in-out infinite}
@keyframes cshine{0%{transform:skewX(-18deg) translateX(0);opacity:0}10%{opacity:1}40%{transform:skewX(-18deg) translateX(420px);opacity:0}100%{transform:skewX(-18deg) translateX(420px);opacity:0}}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(36px,5vw,64px)}
.term{background:var(--ash-2);border-radius:22px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.term h3{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em}
.term .what{font-weight:600;color:var(--ember)}
.term p:not(.what){color:var(--muted);max-width:44ch;flex:1}
.btn-dark{background:var(--soot);color:#fff}
.btn-dark:hover{background:var(--soot-2)}
.term .btn{margin-top:10px}
.seg{border:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg legend{font-size:.92rem;color:#d4e0d9;margin-bottom:6px;padding:0}
.seg label{flex-direction:row;position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;min-width:84px;text-align:center;padding:11px 22px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);font-weight:600;color:#fff;transition:background .25s,border-color .25s,color .25s}
.seg input:checked+span{background:var(--ember);border-color:var(--ember)}
.seg input:focus-visible+span{outline:3px solid var(--ember-hot);outline-offset:3px}

/* CONTACT */
.contact{padding:clamp(80px,10vw,140px) 0;background:var(--forest);color:#f3efe8}
.contact .lead{color:#c5d6cd}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,90px)}
address{font-style:normal;margin-top:2.2rem;line-height:1.8}
address strong{display:block;font-size:1.15rem;margin-bottom:.4rem}
address a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
address a:hover{border-color:#fff}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:rgba(0,0,0,.2);padding:clamp(20px,3vw,34px);border-radius:24px}
label{display:flex;flex-direction:column;gap:6px;font-size:.92rem;color:#d4e0d9}
label.full,form .btn{grid-column:1/-1}
input,select,textarea{font:inherit;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:12px 14px}
select option{color:#000}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember-hot);background:rgba(255,255,255,.12)}
form .btn{justify-self:start}

.foot{background:var(--soot);color:#b9b2a8;padding:26px 0;font-size:.92rem}
.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Scroll reveal: only the sections below the hero, soft and short */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* RESPONSIVE */
@media (max-width:900px){
  .pill{display:none}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:30px}
  .steps::before,.steps::after{display:none}
  .pack-grid{grid-template-columns:1fr 1fr}
  .hs-track{grid-template-columns:1fr 1fr}
  .ship-top,.terms{grid-template-columns:1fr}
}
@media (max-width:560px){
  form{grid-template-columns:1fr}
  .pack-grid,.hs-track{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero h1 .line>span,.fade-in,[data-reveal]{opacity:1;transform:none}
  .pc{opacity:1!important;transform:rotate(var(--r))!important}
  .crack{opacity:.9}
  .pk,.c-box{opacity:1!important;transform:none!important}
  .hc{transform:none}
  .ground{opacity:.18!important}
}