/* ============================================================
   1. BRAND TOKENS
   Swap these for the exact values from the live stylesheet and
   the whole page re-skins itself.
   ============================================================ */
:root{
  --orange:      #F07A1A;
  --orange-deep: #D4620A;
  --orange-soft: #FFF3E7;
  --flame-hi:    #FFB169;
  --bark:        #1E1710;
  --logo-ink:    #404041;
  --logo-orange: #F7941D;
  --white:       #FFFFFF;
  --cream:       #FAF7F3;
  --stone:       #6F675E;
  --rule:        #E7E1D9;

  --maxw: 1280px;
  --gut: 24px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --h-header: 88px;
  /* a faint noise texture for dark bands, so they read as a warm material
     rather than a flat digital fill — pure CSS, no image request */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --wood:      #C98A4B;
  --wood-hi:   #DCA061;
  --wood-lo:   #A96F36;
  --cab-dark:  #241B14;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--bark);font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.section{padding:104px 0}
.section--cream{background:var(--cream)}
.eyebrow{font-size:13px;font-weight:600;color:var(--orange);margin-bottom:14px}
.h-sec{font-size:clamp(28px,3.4vw,46px)}
.sub-sec{color:var(--stone);margin-top:14px;max-width:52ch}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px;flex-wrap:wrap}

/* ============================================================
   2. BUTTONS
   ============================================================ */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:2px;font-weight:600;font-size:15px;transition:color 380ms var(--ease),border-color 380ms var(--ease),transform 380ms var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform 520ms var(--ease)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--orange);color:#fff}
.btn--primary::before{background:var(--orange-deep)}
.btn--ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:var(--bark);border-color:#fff}
.btn--line{border:1px solid var(--rule);color:var(--bark)}
.btn--line::before{background:var(--orange-soft)}

.txtlink{position:relative;font-weight:600;font-size:15px;padding-bottom:4px;transition:color 360ms var(--ease)}
.txtlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--orange);transform:scaleX(1);transform-origin:right;transition:transform 420ms var(--ease)}
.txtlink:hover{color:var(--orange)}
.txtlink:hover::after{transform:scaleX(0)}

/* ============================================================
   3. LOGO — the client's real wordmark, rebuilt as live text
   Three stacked lines (BUITEN / KEUKEN / DEAL.NL) in Archivo Black,
   matching their existing logo file (same charcoal + orange, same
   tight stacked lockup) — kept as real text/vector instead of a
   raster export so it stays crisp at any size and screen density.
   ============================================================ */
.logo{display:inline-flex;align-items:center}
.logo__word{display:inline-block;font-family:'Archivo Black',Arial,sans-serif;line-height:.84;color:var(--logo-ink);visibility:hidden}
.logo__word.is-ready{visibility:visible}
.logo__bar{display:block;width:100%;height:2px;background:var(--logo-ink);margin-bottom:.09em}
.logo__bar--bottom{margin:.09em 0 0}
.logo__line{display:block;white-space:nowrap;font-size:clamp(13px,3.6vw,19px);letter-spacing:-.03em;transition:font-size 320ms var(--ease)}
.header.is-stuck .logo__line{font-size:14px}
.logo__line b{color:var(--logo-orange);font-weight:400}

/* light variant — sits directly on the dark footer */
.logo--light .logo__word{color:#fff}
.logo--light .logo__bar{background:#fff}

/* ============================================================
   4. LOADER
   The real wordmark spells itself out line by line, then keeps a
   soft roaming shimmer for as long as the page is still loading.
   ============================================================ */
.loader{position:fixed;inset:0;z-index:300;background:var(--cream);display:grid;place-items:center;transition:transform 950ms var(--ease) 260ms}
.loader.gone{transform:translateY(-101%)}
.loader__inner{display:grid;justify-items:center;gap:22px;padding:0 24px;text-align:center}

.loader__word-wrap{position:relative;overflow:hidden;padding:4px 10px}
.loader__word{font-family:'Archivo Black',Arial,sans-serif;line-height:.96;text-align:center;color:var(--logo-ink)}
.loader__word .logo__line{font-size:clamp(30px,8vw,46px)}
.loader__word .logo__line b{color:var(--logo-orange);font-weight:400}
.loader__word .logo__line span{display:inline-block;overflow:hidden}
.loader__word .logo__line span i{display:inline-block;font-style:normal;transform:translateY(120%);opacity:0}
.loader.go .loader__word .logo__line span i{animation:rise 520ms var(--ease) forwards;animation-delay:calc(200ms + var(--i)*45ms)}

/* a soft sheen keeps roaming across the wordmark while the page loads */
.loader__word-wrap::after{content:"";position:absolute;top:-30%;bottom:-30%;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(247,148,29,.4),transparent);transform:skewX(-16deg);pointer-events:none}
.loader.go .loader__word-wrap::after{animation:shimmer 2.6s ease-in-out 1500ms infinite}
@keyframes shimmer{0%,12%{left:-60%}70%,100%{left:130%}}

.loader__rule{width:min(240px,58vw);height:1px;background:var(--rule);position:relative}
.loader__rule i{position:absolute;inset:0;background:var(--logo-orange);transform:scaleX(0);transform-origin:left}
.loader.go .loader__rule i{animation:stretch 700ms var(--ease) 1150ms forwards}
@keyframes stretch{to{transform:scaleX(1)}}

.loader__tag{display:flex;flex-wrap:wrap;justify-content:center;overflow:hidden;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--stone)}
.loader__tag span{display:inline-block;transform:translateY(130%);opacity:0}
.loader.go .loader__tag span{animation:rise 560ms var(--ease) forwards;animation-delay:calc(1500ms + var(--i)*16ms)}
@keyframes rise{to{transform:none;opacity:1}}

.loader__bar{width:180px;height:2px;background:var(--rule);overflow:hidden}
.loader__bar i{display:block;height:100%;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.loader.go .loader__bar i{animation:fill 1700ms var(--ease-soft) 200ms forwards}
@keyframes fill{to{transform:scaleX(1)}}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:var(--orange);transform:scaleX(0);transform-origin:left;will-change:transform}

/* ============================================================
   5. PROMO + HEADER
   ============================================================ */
.promo{background:var(--bark);color:#F0E7DC;font-size:13.5px;text-align:center;padding:10px 16px}
.promo b{color:var(--orange);font-weight:700}

.header{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid transparent;transition:border-color 320ms var(--ease),box-shadow 320ms var(--ease)}
.header.is-stuck{border-bottom-color:var(--rule);box-shadow:0 8px 32px rgba(30,23,16,.07)}
.header__bar{display:flex;align-items:center;gap:32px;height:var(--h-header);transition:height 320ms var(--ease)}
.header.is-stuck .header__bar{height:66px}

.nav{display:flex;gap:28px;margin-left:auto}
.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;padding:14px 0;position:relative}
.nav__link::after{content:"";position:absolute;left:0;bottom:8px;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform 380ms var(--ease)}
.nav__item:hover .nav__link::after{transform:scaleX(1);transform-origin:left}
.nav__link svg{width:10px;height:10px;opacity:.5;transition:transform 320ms var(--ease)}
.nav__item:hover .nav__link svg{transform:rotate(180deg)}

.mega{position:absolute;top:100%;left:-24px;background:var(--white);border:1px solid var(--rule);border-top:2px solid var(--orange);padding:26px;min-width:560px;box-shadow:0 28px 70px rgba(30,23,16,.14);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity 260ms var(--ease),transform 260ms var(--ease),visibility 260ms}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.mega a{position:relative;display:block;padding:10px 12px;font-size:14.5px;transition:background 240ms var(--ease),padding-left 300ms var(--ease),color 240ms var(--ease)}
.mega a:hover{background:var(--orange-soft);padding-left:20px;color:var(--orange-deep)}
.mega a.is-sale{color:var(--orange);font-weight:600}
.mega__foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}

.tools{display:flex;align-items:center;gap:4px}
.tool{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:2px;transition:background 240ms var(--ease)}
.tool:hover{background:var(--orange-soft)}
.tool svg{width:19px;height:19px;stroke:var(--bark);stroke-width:1.7;stroke-linecap:square;stroke-linejoin:round;fill:none;transition:stroke 240ms var(--ease)}
.tool:hover svg{stroke:var(--orange-deep)}
.tool__count{position:absolute;top:6px;right:5px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px}
.lang{position:relative;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:13.5px;font-weight:600;height:42px;border-radius:2px;transition:background 240ms var(--ease)}
.lang:hover{background:var(--orange-soft)}
.lang span{opacity:.4}
.lang .is-on{color:var(--orange)}
.lang__tip{position:absolute;top:100%;right:0;margin-top:8px;background:var(--bark);color:#fff;font-size:12px;font-weight:500;white-space:nowrap;padding:8px 12px;border-radius:2px;opacity:0;transform:translateY(-6px);transition:opacity 220ms var(--ease),transform 220ms var(--ease);pointer-events:none}
.lang__tip.is-visible{opacity:1;transform:none}

.burger{display:none;width:44px;height:44px;place-items:center}
.burger i{display:block;width:22px;height:1.8px;background:var(--bark);margin:4px 0;transition:transform 300ms var(--ease),opacity 220ms}
.burger.is-open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mmenu{position:fixed;inset:var(--h-header) 0 0;z-index:55;background:var(--white);padding:24px var(--gut) 90px;overflow-y:auto;transform:translateX(100%);transition:transform 420ms var(--ease)}
.mmenu.is-open{transform:none}
.mmenu__row{border-bottom:1px solid var(--rule)}
.mmenu__btn{display:flex;width:100%;justify-content:space-between;align-items:center;padding:18px 0;font-size:18px;font-weight:600}
.mmenu__btn svg{width:14px;height:14px;transition:transform 300ms var(--ease)}
.mmenu__row.is-open .mmenu__btn svg{transform:rotate(180deg);color:var(--orange)}
.mmenu__panel{max-height:0;overflow:hidden;transition:max-height 400ms var(--ease)}
.mmenu__panel a{display:block;padding:11px 0 11px 14px;color:var(--stone);font-size:15px}
.mmenu__cta{margin-top:28px;display:grid;gap:12px}
.mmenu__cta .btn{justify-content:center}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--bark)}
.hero__media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2200ms var(--ease-soft)}
.hero.is-ready .hero__media img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(22,16,10,.94) 0%,rgba(22,16,10,.66) 36%,rgba(22,16,10,.12) 70%,rgba(22,16,10,.34) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;padding:0 var(--gut) 76px;max-width:var(--maxw);margin:0 auto}
.hero__body{max-width:680px;color:#fff;will-change:transform,opacity}
.hero__badge{display:inline-flex;align-items:center;gap:9px;background:rgba(240,122,26,.18);border:1px solid rgba(240,122,26,.55);backdrop-filter:blur(6px);padding:8px 16px;border-radius:100px;font-size:13.5px;font-weight:600;margin-bottom:24px}
.hero__badge b{color:#FFB169}
.hero h1{font-size:clamp(38px,5.8vw,74px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.hero__lead{margin-top:22px;font-size:clamp(16px,1.4vw,19px);line-height:1.58;color:rgba(255,255,255,.85);max-width:50ch}
.hero__cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero__badge,.hero__lead,.hero__cta{opacity:0;transform:translateY(26px)}
.hero.is-ready .hero__badge,.hero.is-ready .hero__lead,.hero.is-ready .hero__cta{opacity:1;transform:none;transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
.hero.is-ready .hero__badge{transition-delay:180ms}
.hero.is-ready .hero__lead{transition-delay:640ms}
.hero.is-ready .hero__cta{transition-delay:760ms}

.hero__cue{position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%);display:grid;place-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:11.5px;font-weight:600;opacity:0;transition:opacity 700ms var(--ease) 1100ms}
.hero.is-ready .hero__cue{opacity:1}
.hero__cue i{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:drip 1.8s var(--ease-soft) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ambience — a lit grill, rising steam and string lights, layered over the
   hero photo underneath the dark gradient so they read as part of the scene
   rather than sitting on top of it */
.hero__ambience{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero__ambience .ember{position:absolute;left:31%;bottom:30%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,60,.55),rgba(255,120,30,.18) 55%,transparent 72%);transform:translate(-50%,50%);animation:emberPulse 3.4s ease-in-out infinite}
@keyframes emberPulse{0%,100%{opacity:.55;transform:translate(-50%,50%) scale(.92)}50%{opacity:.95;transform:translate(-50%,50%) scale(1.08)}}
.hero__ambience .steam{position:absolute;left:calc(31% + var(--sx, 0px));bottom:32%;width:14px;height:70px;border-radius:50%;background:linear-gradient(rgba(255,255,255,.4),transparent 75%);filter:blur(5px);opacity:0;animation:steamRise 4.2s ease-in var(--sd,0s) infinite}
@keyframes steamRise{0%{opacity:0;transform:translateY(0) scaleX(1)}15%{opacity:.5}70%{opacity:.18}100%{opacity:0;transform:translateY(-90px) scaleX(1.8)}}
.hero__ambience .twinkle{position:absolute;left:var(--tx);top:var(--ty);width:5px;height:5px;border-radius:50%;background:#FFD9A0;box-shadow:0 0 8px 2px rgba(255,190,120,.7);opacity:.15;animation:twinkle 2.8s ease-in-out var(--td,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@media (max-width:900px){ .hero__ambience .ember{width:80px;height:80px} .hero__ambience .steam{height:46px} }

/* ============================================================
   7. PROMISE BAND
   ============================================================ */
.promise{background-color:var(--bark);background-image:var(--grain);background-blend-mode:overlay;color:#F0E9DF}
.promise__stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.11)}
.stat{padding:40px 8px 36px}
.stat + .stat{border-left:1px solid rgba(255,255,255,.11)}
.stat__n{font-size:clamp(34px,4.2vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.stat__n small{font-size:.42em;font-weight:600;letter-spacing:-.01em;color:var(--orange);margin-left:5px}
.stat__l{margin-top:10px;font-size:14px;color:rgba(240,233,223,.6)}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.stars svg{width:15px;height:15px;fill:var(--orange)}
.stars--in svg{opacity:0;transform:scale(.5) rotate(-25deg);transition:opacity 420ms var(--ease),transform 520ms var(--ease)}
.stars--in.is-visible svg{opacity:1;transform:none}
.stars--in.is-visible svg:nth-child(2){transition-delay:90ms}
.stars--in.is-visible svg:nth-child(3){transition-delay:180ms}
.stars--in.is-visible svg:nth-child(4){transition-delay:270ms}
.stars--in.is-visible svg:nth-child(5){transition-delay:360ms}

.ticker{display:flex;overflow:hidden;padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{display:flex;flex:0 0 auto;animation:slide 36s linear infinite;will-change:transform}
.ticker__track li{display:flex;align-items:center;gap:10px;padding:0 30px;font-size:13.5px;font-weight:500;white-space:nowrap;color:rgba(240,233,223,.8)}
.ticker__track svg{width:16px;height:16px;stroke:var(--orange);stroke-width:2;fill:none;flex:0 0 auto}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ============================================================
   8. CHOOSE
   ============================================================ */
.choose{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.choose__col{display:grid;gap:20px;grid-template-rows:1fr 1fr}
.card{position:relative;overflow:hidden;background:var(--bark);min-height:255px;display:flex;align-items:flex-end;color:#fff}
.card--big{min-height:530px}
.card img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;transform:translate3d(0,var(--par,0px),0) scale(1);transition:transform 1100ms var(--ease);will-change:transform}
.card:hover img{transform:translate3d(0,var(--par,0px),0) scale(1.08)}
.card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(22,16,10,.92),rgba(22,16,10,.12) 64%);transition:background 600ms var(--ease)}
.card:hover::after{background:linear-gradient(to top,rgba(22,16,10,.95),rgba(212,98,10,.22) 64%)}
/* a soft sheen sweeps across the photo on hover — echoes the loader's shimmer */
.card::before{content:"";position:absolute;top:-50%;bottom:-50%;width:35%;left:-70%;z-index:2;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-16deg);pointer-events:none;transition:left 850ms var(--ease-soft)}
.card:hover::before{left:130%}
.card__body{position:relative;z-index:3;padding:32px}
.card h3{font-size:24px}
.card--big h3{font-size:34px}
.card p{margin-top:11px;font-size:14.5px;color:rgba(255,255,255,.78);max-width:44ch}
.card__cta{position:relative;margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;padding-bottom:5px}
.card__cta::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--orange);transform:scaleX(.35);transform-origin:left;transition:transform 520ms var(--ease)}
.card:hover .card__cta::after{transform:scaleX(1)}
.card__cta svg{width:15px;height:15px;stroke:var(--orange);stroke-width:2;fill:none;transition:transform 420ms var(--ease)}
.card:hover .card__cta svg{transform:translateX(6px)}
.card__list{margin-top:16px;columns:2;column-gap:22px;font-size:13.5px;color:rgba(255,255,255,.8)}
.card__list li{padding:3px 0 3px 17px;position:relative;break-inside:avoid}
.card__list li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1.5px;background:var(--orange)}

/* ============================================================
   9. PRODUCT CARDS
   ============================================================ */
.grid-prod{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 30px}
.prod{position:relative;padding-bottom:28px;display:flex;flex-direction:column}
/* higher specificity than [data-reveal].is-visible{transform:none} so the
   lift isn't silently cancelled once the card has scrolled into view */
a.prod{transition:transform 420ms var(--ease)}
a.prod:hover{transform:translateY(-6px)}
.prod{perspective:800px}
.prod__media{position:relative;aspect-ratio:4/3;background:var(--cream);display:grid;place-items:center;padding:18px;overflow:hidden;transition:box-shadow 420ms var(--ease);transform:perspective(800px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.section--cream .prod__media{background:var(--white)}
/* a soft grounding shadow under the product, so it reads as sitting on a
   surface rather than floating on a flat fill */
.prod__media::before{content:"";position:absolute;left:50%;bottom:10%;width:58%;height:15%;background:radial-gradient(ellipse at center,rgba(30,23,16,.15),transparent 72%);transform:translateX(-50%);pointer-events:none;transition:opacity 420ms var(--ease)}
.prod:hover .prod__media::before{opacity:.7}
.prod:hover .prod__media{box-shadow:0 24px 48px rgba(30,23,16,.14)}
.prod__media::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--ease);z-index:2}
.prod:hover .prod__media::after{transform:scaleX(1)}
/* a soft sheen sweeps across the product photo on hover */
.prod__media::before{content:"";position:absolute;top:-40%;bottom:-40%;width:42%;left:-70%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-16deg);pointer-events:none;transition:left 750ms var(--ease-soft)}
.prod:hover .prod__media::before{left:130%}
.prod__media img{max-height:100%;width:auto;object-fit:contain;transition:transform 620ms var(--ease);will-change:transform}
.prod:hover .prod__media img{transform:translateY(-10px) scale(1.06)}
.prod__badge{position:absolute;top:12px;left:12px;z-index:3;background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:5px 11px;animation:badgePulse 2.4s ease-in-out infinite}
.prod__badge--new{background:var(--bark)}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.dim{display:flex;align-items:center;gap:10px;margin:15px 0 12px;color:var(--stone)}
.dim i{flex:1;height:1px;background:var(--rule);position:relative}
.dim i::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--rule)}
.dim i:first-child::after{left:0}
.dim i:last-child::after{right:0}
.dim span{font-size:12px;font-weight:600;white-space:nowrap;transition:color 360ms var(--ease)}
.prod:hover .dim span{color:var(--orange-deep)}

.prod h3{font-size:18px;position:relative;display:inline-block;transition:color 320ms var(--ease)}
.prod h3::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:var(--orange-deep);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease)}
.prod:hover h3{color:var(--orange-deep)}
.prod:hover h3::after{transform:scaleX(1)}
.prod__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.prod__chips li{font-size:11.5px;font-weight:500;color:var(--stone);border:1px solid var(--rule);padding:4px 10px;border-radius:100px;transition:transform 320ms var(--ease),border-color 320ms var(--ease),color 320ms var(--ease);transition-delay:calc(var(--ci,0)*35ms)}
.prod:hover .prod__chips li{transform:translateY(-2px);border-color:var(--orange);color:var(--orange-deep)}
.prod__foot{display:flex;align-items:baseline;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.price{font-size:21px;font-weight:800;letter-spacing:-.03em;display:inline-block;transition:transform 360ms var(--ease)}
.prod:hover .price{transform:scale(1.06)}
.price--old{font-size:14px;font-weight:500;color:var(--stone);text-decoration:line-through}
.prod__view{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--orange);opacity:0;transform:translateX(-8px);transition:opacity 360ms var(--ease),transform 360ms var(--ease)}
.prod:hover .prod__view{opacity:1;transform:none}
@media (hover:none){.prod__view{opacity:1;transform:none}}

.tabs{display:flex;gap:6px;position:relative;border-bottom:1px solid var(--rule);margin-bottom:40px}
.tab{padding:14px 22px;font-size:15px;font-weight:600;color:var(--stone);transition:color 280ms var(--ease)}
.tab:hover,.tab.is-on{color:var(--bark)}
.tab-ind{position:absolute;bottom:-1px;height:2px;background:var(--orange);transition:left 420ms var(--ease),width 420ms var(--ease)}
.tabpanel{display:none}
.tabpanel.is-on{display:grid}

/* ============================================================
   10. STEPS
   ============================================================ */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:60px}
.steps__rail{position:absolute;top:23px;left:6%;right:6%;height:1px;background:var(--rule)}
.steps__rail i{position:absolute;inset:0;background:var(--orange);transform-origin:left;transform:scaleX(0);transition:transform 1700ms var(--ease)}
.steps.is-visible .steps__rail i{transform:scaleX(1)}
.step{position:relative}
.step__n{width:48px;height:48px;border-radius:50%;background:var(--white);border:1px solid var(--rule);display:grid;place-items:center;font-weight:700;font-size:16px;position:relative;z-index:2;transition:background 450ms var(--ease),color 450ms var(--ease),border-color 450ms var(--ease),transform 450ms var(--ease)}
.steps.is-visible .step__n{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.06)}
.steps.is-visible .step:nth-child(3) .step__n{transition-delay:380ms}
.steps.is-visible .step:nth-child(4) .step__n{transition-delay:760ms}
.steps.is-visible .step:nth-child(5) .step__n{transition-delay:1140ms}
.step h3{margin-top:24px;font-size:19px}
.step p{margin-top:9px;color:var(--stone);font-size:14.5px}

/* ============================================================
   10b. KITCHEN REVEAL — signature scroll moment
   Doors and drawer slide open on scroll-into-view to show the kamado
   slot, fridge shelving and drawer storage that live inside a real unit.
   ============================================================ */
.kreveal{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:center;margin-top:52px}
.kreveal__svg{width:100%;height:auto;overflow:visible}
.kr-top{fill:#DCD3C4}
.kr-top-hi{fill:#EDE6D9}
.kr-body{fill:var(--cab-dark)}
.kr-divider{fill:var(--cab-dark);filter:brightness(.7)}
.kr-interior-fill{fill:#150f0a}
.kr-shelf{fill:var(--wood-lo);opacity:.7}
.kr-bottle{fill:#6E8C55}
.kr-box{fill:var(--wood-hi);opacity:.85}
.kr-tray{fill:#3a2c1e}
.kr-tool{fill:#B8B0A4}
.kr-plinth,.kr-wheel{fill:var(--cab-dark)}
.kr-kamado-base{fill:#1c1512}
.kr-kamado-dome{fill:#2a211c;stroke:#000;stroke-width:1}
.kr-kamado-knob{fill:#3a2f28}
.kr-ember-glow{fill:var(--orange);opacity:0;transition:opacity 900ms var(--ease) 300ms}
.kr-glow{fill:var(--orange);opacity:0;transition:opacity 1400ms var(--ease);filter:blur(2px)}
.kreveal.is-open .kr-glow{opacity:.06}
.kreveal.is-open .kr-ember-glow{opacity:.5;animation:krEmber 2.6s ease-in-out 1.2s infinite}
@keyframes krEmber{0%,100%{opacity:.4}50%{opacity:.65}}

.kr-door{fill:var(--wood);stroke:var(--cab-dark);stroke-width:3;transition:transform 900ms var(--ease)}
.kr-handle{fill:var(--cab-dark)}
.kreveal.is-open .kr-door-fridge{transform:translateY(-198px)}
.kreveal.is-open .kr-door-l{transform:translateX(-134px)}
.kreveal.is-open .kr-door-r{transform:translateX(134px)}
.kr-drawer{transition:transform 900ms var(--ease) 150ms}
.kreveal.is-open .kr-drawer{transform:translateY(128px)}
.kreveal.is-open .kr-handle{transition:opacity 200ms;opacity:0}

.kreveal__feats{display:grid;gap:26px}
.kreveal__feats li{display:flex;gap:16px;align-items:flex-start}
.kreveal__feats b{font-size:13px;font-weight:700;color:var(--orange);padding-top:3px}
.kreveal__feats h3{font-size:17px}
.kreveal__feats p{margin-top:6px;font-size:14px;color:var(--stone)}
@media (max-width:900px){
  .kreveal{grid-template-columns:1fr;gap:32px}
  .kreveal.is-open .kr-door-fridge{transform:translateY(-186px)}
}

/* ============================================================
   11. MOOD BAND
   ============================================================ */
.mood{position:relative;min-height:460px;display:grid;place-items:center;overflow:hidden;background:var(--bark);text-align:center}
.mood__media{position:absolute;inset:-12% 0;z-index:0;will-change:transform;transform:translate3d(0,var(--par,0px),0)}
.mood__media img{width:100%;height:100%;object-fit:cover}
.mood::after{content:"";position:absolute;inset:0;background:rgba(22,16,10,.62)}
.mood__body{position:relative;z-index:2;color:#fff;max-width:760px;padding:80px var(--gut)}
.mood__quote{font-family:'Newsreader',Georgia,serif;font-size:clamp(22px,2.6vw,34px);line-height:1.4;font-weight:400}
.mood__src{margin-top:22px;font-size:14px;color:rgba(255,255,255,.6)}

/* ============================================================
   12. REVIEWS
   ============================================================ */
.reviews__grid{display:grid;grid-template-columns:290px 1fr;gap:64px;align-items:start}
.score__n{font-size:80px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--orange)}
.score .stars{margin-top:14px;display:flex}
.score p{margin-top:14px;font-size:14px;color:var(--stone)}
.rev__viewport{overflow:hidden}
.rev__track{display:flex;transition:transform 640ms var(--ease);will-change:transform}
.rev{flex:0 0 50%;padding-right:28px}
.rev__box{border:1px solid var(--rule);border-top:2px solid var(--orange);padding:28px;height:100%;background:var(--white);transition:box-shadow 460ms var(--ease),transform 460ms var(--ease)}
.rev__box:hover{box-shadow:0 18px 44px rgba(30,23,16,.08);transform:translateY(-4px)}
.rev__head{display:flex;align-items:center;gap:12px}
.rev__head img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--cream)}
.rev__name{font-weight:600;font-size:14.5px}
.rev__date{font-size:12.5px;color:var(--stone)}
.rev__box .stars{display:flex;margin:16px 0 12px}
.rev__box .stars svg{width:13px;height:13px}
.rev__text{font-size:14.5px;line-height:1.62;color:var(--stone);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rev__nav{display:flex;gap:8px;margin-top:30px}
.rev__nav button{width:46px;height:46px;border:1px solid var(--rule);display:grid;place-items:center;transition:background 300ms var(--ease),border-color 300ms var(--ease)}
.rev__nav button:hover{background:var(--orange);border-color:var(--orange)}
.rev__nav svg{width:16px;height:16px;stroke:var(--bark);stroke-width:1.9;fill:none;transition:stroke 300ms var(--ease)}
.rev__nav button:hover svg{stroke:#fff}
.rev__dots{display:flex;gap:6px;margin-top:18px}
.rev__dots i{width:22px;height:2px;background:var(--rule);transition:background 340ms var(--ease)}
.rev__dots i.is-on{background:var(--orange)}

/* ============================================================
   13. BLOG
   ============================================================ */
.blog{display:grid;grid-template-columns:1.25fr 1fr;gap:46px}
.post--big .post__media{aspect-ratio:16/10}
.post__media{position:relative;overflow:hidden;background:var(--cream);aspect-ratio:3/2}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease);will-change:transform}
.post:hover .post__media img{transform:scale(1.06)}
.post__media::after{content:"";position:absolute;top:-50%;bottom:-50%;width:35%;left:-70%;z-index:1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-16deg);pointer-events:none;transition:left 750ms var(--ease-soft)}
.post:hover .post__media::after{left:130%}
.post__meta{display:flex;gap:14px;font-size:12.5px;color:var(--stone);margin:18px 0 9px}
.post__meta b{color:var(--orange);font-weight:600}
.post--big h3{font-size:27px;position:relative;display:inline-block;transition:color 320ms var(--ease)}
.post--big h3::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:var(--orange-deep);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease)}
.post:hover h3{color:var(--orange-deep)}
.post:hover h3::after{transform:scaleX(1)}
.post__text{margin-top:12px;color:var(--stone);font-size:15px;max-width:56ch}
.blog__small{display:grid;gap:0}
.blog__small .post--small{padding:20px 0}
.blog__small .post--small + .post--small{border-top:1px solid var(--rule)}
.blog__small .post--small:first-child{padding-top:0}
.blog__small .post--small:last-child{padding-bottom:0}
.post--small{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:center}
.post--small .post__media{aspect-ratio:1/1}
.post--small h3{font-size:16px;line-height:1.32}
.post--small .post__meta{margin:0 0 7px}

/* ============================================================
   14. FOOTER
   ============================================================ */
.foot{background-color:var(--bark);background-image:var(--grain);background-blend-mode:overlay;color:#DFD7CB;padding-top:88px}
.foot a{transition:color 260ms var(--ease)}
.foot a:hover{color:var(--orange)}
.foot__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:58px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot h4{font-size:14px;margin-bottom:20px;color:#fff;position:relative;padding-bottom:12px}
.foot h4::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--orange)}
.foot li{padding:5px 0;font-size:14px;color:rgba(223,215,203,.72)}
.foot__logo{display:inline-block;margin-bottom:22px}
.foot__logo .logo__line{font-size:22px}
.foot__info{font-size:14px;line-height:1.85;color:rgba(223,215,203,.72)}
.foot__info b{color:#fff;font-weight:600}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:background 300ms var(--ease),border-color 300ms var(--ease),transform 300ms var(--ease)}
.socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-3px)}
.socials svg{width:17px;height:17px;fill:currentColor}
.form{display:grid;gap:10px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form input,.form textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;padding:14px 15px;font:inherit;font-size:14.5px;border-radius:2px;transition:border-color 300ms var(--ease),background 300ms var(--ease)}
.form input::placeholder,.form textarea::placeholder{color:rgba(223,215,203,.45)}
.form input:focus,.form textarea:focus{border-color:var(--orange);background:rgba(255,255,255,.09);outline:none}
.form textarea{resize:vertical;min-height:92px}
.form button{background:var(--orange);color:#fff;padding:15px;font-weight:600;border-radius:2px;transition:background 300ms var(--ease)}
.form button:hover{background:var(--orange-deep)}
.form__done{display:flex;align-items:flex-start;gap:12px;padding:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:2px;animation:formDone 520ms var(--ease)}
.form__done svg{flex:0 0 auto;width:22px;height:22px;stroke:var(--orange);stroke-width:2.4;fill:none;margin-top:1px}
.form__done p{font-size:14.5px;color:rgba(223,215,203,.86);line-height:1.5}
@keyframes formDone{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:560px){ .form__row{grid-template-columns:1fr} }
.foot__bot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 0;font-size:13px;color:rgba(223,215,203,.55)}
.pay{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pay span{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.18);padding:5px 11px;font-size:11.5px;font-weight:600;color:rgba(223,215,203,.7);transition:border-color 240ms var(--ease),color 240ms var(--ease)}
.pay span:hover{border-color:rgba(255,255,255,.4);color:rgba(223,215,203,.95)}
.pay svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none;flex:0 0 auto}

.float{position:fixed;right:24px;bottom:24px;z-index:45;width:50px;height:50px;border-radius:50%;background:var(--orange);display:grid;place-items:center;opacity:0;transform:translateY(20px) scale(.94);pointer-events:none;transition:opacity 460ms var(--ease),transform 460ms var(--ease),background 240ms var(--ease);box-shadow:0 14px 40px rgba(212,98,10,.34)}
.float:hover{background:var(--orange-deep)}
.float svg{width:20px;height:20px;stroke:#fff;stroke-width:2.4;fill:none}
.float.is-on{opacity:1;transform:none;pointer-events:auto}

.mobar{position:fixed;bottom:0;left:0;right:0;z-index:50;display:none;grid-template-columns:1fr 1fr 1.2fr;background:var(--white);border-top:1px solid var(--rule)}
.mobar a{padding:15px 6px;text-align:center;font-size:13px;font-weight:600}
.mobar a + a{border-left:1px solid var(--rule)}
.mobar a:last-child{background:var(--orange);color:#fff}

/* ============================================================
   15b. SEARCH OVERLAY + BASKET DRAWER
   ============================================================ */
.search-ov{position:fixed;inset:0;z-index:120;background:rgba(22,16,10,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity 320ms var(--ease),visibility 320ms}
.search-ov.is-open{opacity:1;visibility:visible}
.search-ov__panel{position:relative;max-width:720px;margin:14vh auto 0;background:var(--white);padding:36px var(--gut);transform:translateY(-16px);transition:transform 380ms var(--ease)}
.search-ov.is-open .search-ov__panel{transform:none}
.search-ov__panel form{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--bark);padding-bottom:14px}
.search-ov__panel svg{width:22px;height:22px;stroke:var(--stone);stroke-width:1.6;fill:none;flex:0 0 auto}
.search-ov__panel input{flex:1;border:0;font:inherit;font-size:20px;color:var(--bark);background:none}
.search-ov__panel input:focus{outline:none}
.search-ov__close{position:absolute;top:14px;right:var(--gut);width:38px;height:38px;display:grid;place-items:center;border-radius:50%;transition:background 240ms var(--ease)}
.search-ov__close:hover{background:var(--orange-soft)}
.search-ov__close svg{width:16px;height:16px;stroke:var(--bark);stroke-width:2;fill:none}
.search-ov__hint{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--stone)}
.search-ov__hint button{border:1px solid var(--rule);padding:7px 14px;border-radius:100px;font-size:13px;font-weight:500;transition:border-color 240ms var(--ease),color 240ms var(--ease)}
.search-ov__hint button:hover{border-color:var(--orange);color:var(--orange-deep)}

.drawer{position:fixed;inset:0;z-index:120;background:rgba(22,16,10,.5);opacity:0;visibility:hidden;transition:opacity 320ms var(--ease),visibility 320ms}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--white);padding:28px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 420ms var(--ease)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.drawer__head h3{font-size:19px}
.drawer__close{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:background 240ms var(--ease)}
.drawer__close:hover{background:var(--orange-soft)}
.drawer__close svg{width:15px;height:15px;stroke:var(--bark);stroke-width:2;fill:none}
.drawer__empty{margin:auto;text-align:center;display:grid;justify-items:center;gap:16px;color:var(--stone)}
.drawer__empty svg{width:44px;height:44px;stroke:var(--rule);stroke-width:1.4;fill:none}
.drawer__empty p{font-size:15px}
.drawer__body{display:flex;flex-direction:column;flex:1;min-height:0}
.drawer__items{overflow-y:auto;padding:18px 0}
.drawer__items li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.drawer__items li div{display:flex;flex-direction:column;gap:4px}
.drawer__items b{font-size:14.5px;font-weight:600}
.drawer__items span{font-size:13px;color:var(--stone)}
.drawer__remove{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;transition:background 240ms var(--ease)}
.drawer__remove:hover{background:var(--orange-soft)}
.drawer__remove svg{width:13px;height:13px;stroke:var(--stone);stroke-width:2;fill:none}
.drawer__total{display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin-top:auto;font-size:15px}
.drawer__total b{font-size:19px}
.drawer__body .btn{justify-content:center;margin-top:6px}

/* ============================================================
   15. MOTION
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 620ms var(--ease),transform 720ms var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].is-visible{opacity:1;transform:none}

.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w > span{display:inline-block;transform:translateY(110%);transition:transform 900ms var(--ease);transition-delay:var(--wd,0ms)}
.is-visible .w > span,.w.is-visible > span{transform:none}

/* photo reveal: same proven opacity/translateY fade as [data-reveal]
   everywhere else on the page (a clip-path "wipe" used to do this job but
   could get stuck fully clipped — invisible — in real-world browsers, so
   it's gone). The zoom-settle on the image itself is purely decorative
   and layers on top of that same .is-visible toggle. */
.post__media[data-reveal] img,.story__img[data-reveal] img{transform:scale(1.1);transition:transform 1400ms var(--ease-soft)}
.post__media[data-reveal].is-visible img,.story__img[data-reveal].is-visible img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .w > span{transform:none!important}
  .hero__badge,.hero__lead,.hero__cta{opacity:1!important;transform:none!important}
  .steps__rail i{transform:scaleX(1)!important}
  .loader{display:none}
}

/* ============================================================
   16. NOT FOUND
   ============================================================ */
.notfound{padding:min(22vh,180px) 0 140px;text-align:center;min-height:70vh;display:grid;align-items:start}
.notfound__inner{max-width:640px;margin:0 auto}
.notfound__code{font-family:'Archivo Black',Arial,sans-serif;font-size:clamp(72px,13vw,150px);color:var(--orange);line-height:1;letter-spacing:-.02em;margin:4px 0 20px}
.notfound__lead{margin:16px auto 0;max-width:46ch}
.notfound__cta{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
@media (max-width:560px){ .notfound{padding-top:min(16vh,120px);padding-bottom:90px} }

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid-prod{grid-template-columns:repeat(2,1fr)}
  .reviews__grid{grid-template-columns:1fr;gap:38px}
  .rev{flex-basis:100%}
  .foot__top{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:900px){
  :root{--h-header:66px;--gut:18px}
  .nav,.lang,.tool--user,.float{display:none}
  .burger{display:grid}
  .header__bar{gap:14px}
  .header__bar .tools{margin-left:auto}
  .section{padding:68px 0}
  .choose,.blog{grid-template-columns:1fr;gap:22px}
  .card--big{min-height:340px}
  .choose__col{grid-template-rows:none}
  .promise__stats{grid-template-columns:1fr}
  .stat{padding:26px 0;text-align:center}
  .stat + .stat{border-left:0;border-top:1px solid rgba(255,255,255,.11)}
  .steps{grid-template-columns:1fr;gap:30px}
  .steps__rail{display:none}
  .steps.is-visible .step .step__n{transition-delay:0ms}
  .mobar{display:grid}
  .foot{padding-bottom:60px}
  .mood{min-height:360px}
  [data-reveal]{transform:translateY(14px);transition-duration:440ms}
}
@media (max-width:560px){
  .grid-prod{grid-template-columns:1fr 1fr;gap:12px 16px}
  .prod h3{font-size:15px}
  .price{font-size:17px}
  .prod__chips{display:none}
  .post--small{grid-template-columns:96px 1fr}
  .foot__top{grid-template-columns:1fr}
  .hero{min-height:78vh}
}