/* ===== Feyrox Titan1 — header : mixed-aspect staggered masonry, dark theme ===== */

:root{
  --bg:        #0e0f11;   /* graphite charcoal */
  --bg-2:      #16181b;
  --ink:       #eef0f2;
  --ink-dim:   #a6acb4;
  --ember:     #ff6a2b;
  --ember-2:   #e2521c;
  --line:      rgba(228,232,236,.14);
}


*{ box-sizing:border-box; }

html{ background:#0b0c0d; }           /* base colour so the canvas is never white */
html,body{ margin:0; padding:0; }

body{
  background:
    radial-gradient(95% 640px at 50% 0, rgba(150,162,175,.22) 0%, rgba(150,162,175,0) 100%),
    linear-gradient(180deg, #191b1e 0%, #111214 900px, #0b0c0d 100%);
  color:var(--ink);
  font-family:"Inter", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HERO (cinematic full-bleed) ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--bg);
}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 52%;
  /* slow firelight drift + gentle warm flicker so the still breathes */
  animation:heroDrift 26s ease-in-out infinite alternate,
            heroFirelight 5.5s ease-in-out infinite;
}
@keyframes heroDrift{ from{ transform:scale(1); } to{ transform:scale(1.055); } }
@keyframes heroFirelight{
  0%,100%{ filter:brightness(1)    saturate(1); }
  32%    { filter:brightness(1.055) saturate(1.05); }
  58%    { filter:brightness(.975)  saturate(.99); }
  81%    { filter:brightness(1.035) saturate(1.03); }
}
@media (prefers-reduced-motion:reduce){
  .hero__img{ animation:none; }
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,10,12,.72) 0%, rgba(9,10,12,.2) 14%, rgba(9,10,12,0) 30%,
    rgba(9,10,12,.3) 50%, rgba(9,10,12,.72) 70%, rgba(9,10,12,.97) 100%);
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:66px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,4vw,40px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav--scrolled{
  background:rgba(12,13,15,.82);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom-color:var(--line);
}
section[id], .bp, .footer__about{ scroll-margin-top:72px; }

/* nav jumps and the back-to-top button glide rather than teleport */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
.nav__brand{
  display:flex; align-items:center;
  text-decoration:none;
}
.brand-logo{
  height:34px; width:auto; display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* gap tightens as the viewport narrows so six items don't crowd the logo */
.nav__links{ display:flex; gap:clamp(16px,2.2vw,32px); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nav__links a{
  color:var(--ink-dim); text-decoration:none;
  font-size:14px; font-weight:500; letter-spacing:.02em;
  transition:color .2s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__cta{
  font-family:"Oswald", sans-serif; font-weight:600;
  letter-spacing:.06em; font-size:14px; text-transform:uppercase;
  color:#1a0d05; text-decoration:none;
  background:linear-gradient(180deg, var(--ember), var(--ember-2));
  padding:11px 20px; border-radius:999px;
  box-shadow:0 8px 22px rgba(255,106,43,.32);
  white-space:nowrap;
}

/* ---------- HERO CONTENT ---------- */
.hero__body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 clamp(20px,5vw,48px) clamp(52px,8vh,88px);
}
.hero__eyebrow{
  display:block;
  font-family:"Oswald", sans-serif; font-weight:500;
  letter-spacing:.4em; text-transform:uppercase;
  font-size:clamp(11px,1vw,14px); color:var(--ember);
  margin-bottom:16px;
  /* sits over live flames, so it needs a real backing shadow to stay legible */
  text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 22px rgba(0,0,0,.7);
}
.hero__title{
  margin:0;
  font-family:"Oswald", sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(72px,13vw,220px); line-height:.84;
  color:#fff; text-shadow:0 8px 46px rgba(0,0,0,.55);
}
.hero__sub{
  margin:20px 0 0; max-width:34ch;
  font-size:clamp(15px,1.3vw,20px); line-height:1.5; color:#eef1f4;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.hero__specs{
  list-style:none; margin:24px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
}
.hero__specs li{
  font-family:"JetBrains Mono", monospace; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(238,240,242,.9); padding:2px 20px;
  border-right:1px solid rgba(230,235,240,.22);
}
.hero__specs li:last-child{ border-right:0; }
@media (max-width:560px){
  .hero__specs li{ padding:2px 11px; font-size:10.5px; }
}

/* ---------- AFTER SECTION ---------- */
/* ---------- PRODUCT REVEAL + SETUP VIDEO ---------- */
.reveal{
  position:relative; z-index:1;
  background:linear-gradient(180deg, #141518 0%, #0b0c0d 100%);
  border-top:1px solid var(--line);
  padding:clamp(64px,10vh,130px) clamp(20px,4vw,64px);
}
.reveal__inner{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(32px,4vw,72px);
  align-items:center;
}
.reveal__eyebrow{
  display:block; font-family:"Oswald",sans-serif; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; font-size:13px;
  color:var(--ember); margin-bottom:18px;
}
.reveal__title{
  margin:0 0 20px; font-family:"Oswald",sans-serif; font-weight:700;
  text-transform:uppercase; line-height:.96; letter-spacing:.01em;
  font-size:clamp(38px,4.6vw,68px); color:var(--ink);
}
.reveal__lead{
  margin:0 0 30px; max-width:46ch; color:var(--ink-dim);
  font-size:clamp(15px,1.15vw,18px); line-height:1.62;
}
.reveal__specs{
  list-style:none; margin:0 0 34px; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:20px 28px; max-width:470px;
}
.reveal__specs li{
  display:flex; flex-direction:column; gap:3px;
  padding-left:14px; border-left:2px solid var(--ember);
}
.reveal__specs b{
  font-family:"Oswald",sans-serif; font-weight:600; font-size:22px;
  color:var(--ink); letter-spacing:.02em;
}
.reveal__specs span{ font-size:13px; color:var(--ink-dim); line-height:1.3; }
.reveal__cta{
  display:inline-block; font-family:"Oswald",sans-serif; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; font-size:14px;
  color:#12100d; text-decoration:none;
  background:linear-gradient(180deg,var(--ember),var(--ember-2));
  padding:14px 26px; border-radius:999px;
  box-shadow:0 10px 26px rgba(255,106,43,.28);
  transition:transform .2s ease;
}
.reveal__cta:hover{ transform:translateY(-2px); }
.reveal__media{ margin:0; position:relative; }
.reveal__video{
  display:block; width:100%; height:auto; aspect-ratio:16/10;
  object-fit:cover; background:var(--bg-2);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  outline:1px solid var(--line); outline-offset:-1px;
}
.reveal__cap{
  margin-top:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); text-align:right;
}
@media (max-width:820px){
  .reveal__inner{ grid-template-columns:1fr; gap:26px; }
  .reveal__media{ order:-1; }          /* video first on mobile */
  .reveal__cap{ text-align:left; }
  .reveal__specs{ max-width:none; }
}

/* ---------- COOKING MODES ---------- */
.modes{
  position:relative; z-index:1;
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:clamp(64px,10vh,130px) clamp(20px,4vw,64px);
}
.modes__head{ max-width:720px; margin:0 auto clamp(26px,3.5vh,44px); text-align:center; }
.modes__eyebrow{
  display:block; font-family:"Oswald",sans-serif; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; font-size:13px; color:var(--ember); margin-bottom:16px;
}
.modes__title{
  margin:0 0 14px; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  line-height:.98; letter-spacing:.01em; font-size:clamp(34px,4.4vw,64px); color:var(--ink);
}
.modes__intro{ margin:0; color:var(--ink-dim); font-size:clamp(15px,1.15vw,18px); line-height:1.6; }

.modes__tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 auto clamp(24px,3vh,40px); }
.modes__tab{
  font-family:"Oswald",sans-serif; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:15px;
  color:var(--ink-dim); background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:11px 28px; cursor:pointer; transition:color .2s, background .2s, border-color .2s;
}
.modes__tab:hover{ color:var(--ink); border-color:var(--ink-dim); }
.modes__tab.is-active{ color:#12100d; background:linear-gradient(180deg,var(--ember),var(--ember-2)); border-color:transparent; }

.modes__panel{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.3fr 0.7fr; gap:clamp(22px,3vw,48px); align-items:stretch;
}
.modes__media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  outline:1px solid var(--line); outline-offset:-1px;
  box-shadow:0 26px 64px rgba(0,0,0,.5);
}
.modes__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease; will-change:opacity;
}
.modes__img.is-active{ opacity:1; }

.modes__info{ position:relative; display:flex; }
.modes__card{ display:none; flex-direction:column; justify-content:center; width:100%; }
.modes__card.is-active{ display:flex; animation:modeIn .45s ease; }
@keyframes modeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.modes__card h3{
  margin:0 0 14px; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,2.8vw,44px); color:var(--ink); letter-spacing:.01em; line-height:1;
}
.modes__card h3 span{ display:block; font-size:.42em; font-weight:500; letter-spacing:.12em; color:var(--ember); margin-top:9px; }
.modes__card p{ margin:0 0 26px; color:var(--ink-dim); font-size:clamp(15px,1.1vw,17px); line-height:1.6; }
.modes__meta{ margin:0; display:flex; flex-direction:column; gap:16px; }
.modes__meta div{ padding-left:14px; border-left:2px solid var(--ember); }
.modes__meta dt{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:4px; }
.modes__meta dd{ margin:0; font-family:"Oswald",sans-serif; font-weight:500; font-size:18px; color:var(--ink); }

@media (max-width:820px){
  .modes__panel{ grid-template-columns:1fr; gap:22px; }
}

/* mosaic sizing + heading are fully fluid (clamp) — no extra desktop breakpoints needed */

/* ---------- MOBILE nav (≤820px): burger + full-screen panel ---------- */
.nav__burger{ display:none; }

@media (max-width:820px){
  /* stays fixed so the menu is reachable anywhere on the page */
  .nav{ position:fixed; padding:0 18px; }
  .brand-logo{ height:26px; }
  .nav__cta{ padding:9px 15px; font-size:12px; }

  /* logo + burger ride above the panel so the bar still reads as a bar */
  .nav__brand{ position:relative; z-index:2; }
  .nav__burger{
    position:relative; z-index:2;
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; margin-right:-10px;   /* 44px keeps the tap target honest */
    padding:0; border:0; background:none; cursor:pointer;
  }
  .nav__burger span{
    display:block; width:24px; height:2px; border-radius:2px; background:var(--ink);
    transition:transform .3s ease, opacity .2s ease;
  }
  .nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* the desktop centred row becomes the overlay */
  .nav__links{
    position:fixed; inset:0; left:0; top:0; transform:none; z-index:1;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:0; padding:80px clamp(24px,8vw,52px) 40px;
    background:rgba(9,10,12,.97);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    overflow-y:auto;   /* six items + a short landscape screen */
    opacity:0; pointer-events:none; transition:opacity .28s ease;
  }
  .nav.is-open .nav__links{ opacity:1; pointer-events:auto; }
  .nav__links a{
    width:100%; padding:14px 0; border-bottom:1px solid var(--line);
    font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
    letter-spacing:.03em; font-size:clamp(22px,6.5vw,34px); color:var(--ink);
    opacity:0; transform:translateY(14px);
    transition:opacity .35s ease, transform .35s ease, color .2s ease;
  }
  .nav.is-open .nav__links a{ opacity:1; transform:none; }
  .nav.is-open .nav__links a:nth-child(1){ transition-delay:.06s; }
  .nav.is-open .nav__links a:nth-child(2){ transition-delay:.11s; }
  .nav.is-open .nav__links a:nth-child(3){ transition-delay:.16s; }
  .nav.is-open .nav__links a:nth-child(4){ transition-delay:.21s; }
  .nav.is-open .nav__links a:nth-child(5){ transition-delay:.26s; }
  .nav.is-open .nav__links a:nth-child(6){ transition-delay:.31s; }
  .nav__links a:active{ color:var(--ember); }

  body.nav-open{ overflow:hidden; }
}

@media (prefers-reduced-motion:reduce){
  .nav__links, .nav__links a, .nav__burger span{ transition:none; }
}



/* ================= CONTENT SECTIONS (specs · gallery · buy) ================= */

/* ===== Feyrox Titan1 — SPECS : technical specifications ===== */
.specs{
  position:relative; z-index:1;
  background:linear-gradient(180deg,#16181b 0%,#0b0c0d 100%);
  border-top:1px solid var(--line);
  padding:clamp(64px,10vh,130px) clamp(20px,4vw,64px);
}
.specs__inner{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(32px,4.5vw,76px);
  align-items:center;
}

/* ---- media ---- */
.specs__media{ margin:0; position:relative; }
.specs__img{
  display:block; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; background:var(--bg-2);
  outline:1px solid var(--line); outline-offset:-1px;
  box-shadow:0 26px 64px rgba(0,0,0,.5);
}
.specs__cap{
  margin-top:12px; font-family:"Oswald",sans-serif; font-weight:500;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim);
}

/* ---- body ---- */
.specs__body{ min-width:0; }
.specs__eyebrow{
  display:block; font-family:"Oswald",sans-serif; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; font-size:13px;
  color:var(--ember); margin-bottom:16px;
}
.specs__title{
  margin:0 0 18px; font-family:"Oswald",sans-serif; font-weight:700;
  text-transform:uppercase; line-height:.98; letter-spacing:.01em;
  font-size:clamp(34px,4.4vw,64px); color:var(--ink);
}
.specs__intro{
  margin:0 0 clamp(30px,4vh,44px); max-width:48ch; color:var(--ink-dim);
  font-size:clamp(15px,1.15vw,18px); line-height:1.6;
}

/* ---- spec grid ---- */
.specs__grid{
  margin:0 0 clamp(30px,4vh,44px); padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,30px) clamp(24px,2.8vw,36px);
}
.specs__stat{
  display:flex; flex-direction:column; gap:6px;
  padding-left:14px; border-left:2px solid var(--ember);
}
.specs__value{
  font-family:"Oswald",sans-serif; font-weight:600; font-size:clamp(18px,1.5vw,23px);
  color:var(--ink); letter-spacing:.02em; line-height:1.08;
}
.specs__label{
  margin:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); line-height:1.35;
}

/* ---- care ---- */
.specs__care{
  border-top:1px solid var(--line); padding-top:clamp(22px,3vh,30px);
}
.specs__care-head{
  margin:0 0 14px; font-family:"Oswald",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; font-size:13px; color:var(--ember);
}
.specs__care-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:11px;
}
.specs__care-list li{
  position:relative; padding-left:22px;
  color:var(--ink-dim); font-size:clamp(14px,1.05vw,16px); line-height:1.5;
}
.specs__care-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; background:var(--ember);
  transform:rotate(45deg);
}

/* ---- responsive ---- */
@media (max-width:820px){
  .specs__inner{ grid-template-columns:1fr; gap:32px; }
  .specs__media{ order:-1; }
  .specs__img{ aspect-ratio:3/2; }
  .specs__intro{ max-width:none; }
}
@media (max-width:600px){
  .specs__grid{ grid-template-columns:1fr; gap:20px; }
}

/* ===== Feyrox Titan1 — "gallery" : in-the-field mixed-height masonry ===== */

.gallery{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line);
  padding:clamp(64px,10vh,130px) clamp(20px,4vw,64px);
  background:var(--bg);
}

.gallery__inner{
  max-width:1320px;
  margin:0 auto;
}

/* ---- header ---- */
.gallery__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(20px,4vw,64px);
  margin-bottom:clamp(28px,4vw,52px);
}

.gallery__eyebrow{
  display:block;
  font-family:"Oswald",sans-serif;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--ember);
  margin-bottom:16px;
}

.gallery__title{
  margin:0;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.01em;
  font-size:clamp(34px,4.4vw,64px);
  color:var(--ink);
}

.gallery__intro{
  margin:0;
  max-width:38ch;
  flex:0 1 auto;
  color:var(--ink-dim);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.6;
  text-align:right;
}

/* ---- grid ---- */
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(160px,15.5vw,230px);
  gap:clamp(10px,0.9vw,14px);
  grid-template-areas:
    "thermos fire   fire   dog"
    "thermos mush   moss   smoke"
    "chairs  chairs rose   tent";
}

.gallery__tile{
  position:relative;
  margin:0;
  overflow:hidden;
  outline:1px solid var(--line);
  outline-offset:-1px;
  box-shadow:0 26px 64px rgba(0,0,0,.5);
  background:var(--bg-2);
}

.gallery__tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
  filter:saturate(.94) contrast(1.02);
}

/* subtle top-to-bottom vignette so the mosaic reads as one dark system */
.gallery__tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(14,15,17,0) 55%,rgba(14,15,17,.42) 100%);
  opacity:.85;
  transition:opacity .5s ease;
  pointer-events:none;
}

.gallery__tile:hover img{
  transform:scale(1.06);
  filter:saturate(1.04) contrast(1.03);
}

.gallery__tile:hover::after{ opacity:.5; }

.gallery__tile--wide{ grid-column:span 2; }
.gallery__tile--tall{ grid-row:span 2; }

/* ---- responsive ---- */
@media (max-width:1080px){
  /* drop the fixed areas, fall back to a dense 3-col masonry */
  .gallery__grid{
    grid-template-areas:none;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:clamp(150px,20vw,200px);
    grid-auto-flow:dense;
  }
  .gallery__tile{ grid-area:auto !important; }
  .gallery__tile--wide{ grid-column:span 2 !important; }
  .gallery__tile--tall{ grid-row:span 2 !important; }
}

@media (max-width:820px){
  .gallery__head{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .gallery__intro{
    text-align:left;
    max-width:52ch;
  }
  .gallery__grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:clamp(150px,34vw,210px);
  }
  /* tall stays tall; wide spans the full 2 columns */
  .gallery__tile--wide{ grid-column:span 2 !important; }
  .gallery__tile--tall{ grid-row:span 2 !important; grid-column:span 1 !important; }
}

@media (max-width:460px){
  .gallery__grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:clamp(130px,40vw,180px);
  }
}

/* ===== Feyrox Titan1 — BUY : bundle contents + price card ===== */
.buy{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  padding:clamp(64px,10vh,130px) clamp(20px,4vw,64px);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,106,43,.10), transparent 60%),
    linear-gradient(180deg,#16181b,#0b0c0d);
}
.buy__inner{ max-width:1240px; margin:0 auto; }

.buy__head{ max-width:760px; margin:0 auto clamp(34px,5vh,64px); text-align:center; }
.buy__eyebrow{
  display:block; font-family:"Oswald",sans-serif; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; font-size:13px;
  color:var(--ember); margin-bottom:16px;
}
.buy__title{
  margin:0 0 18px; font-family:"Oswald",sans-serif; font-weight:700;
  text-transform:uppercase; line-height:.98; letter-spacing:.01em;
  font-size:clamp(34px,4.4vw,64px); color:var(--ink);
}
.buy__intro{
  margin:0 auto; max-width:52ch; color:var(--ink-dim);
  font-size:clamp(15px,1.15vw,18px); line-height:1.6;
}

/* ---- bundle contents: photo grid ---- */
.buy__box{
  list-style:none; margin:0 0 clamp(26px,4vh,44px); padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,20px);
}
.boxcard{
  position:relative; overflow:hidden; aspect-ratio:3/2;
  background:var(--bg-2); outline:1px solid var(--line); outline-offset:-1px;
  box-shadow:0 18px 40px rgba(0,0,0,.42);
}
.boxcard__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.boxcard:hover .boxcard__img{ transform:scale(1.06); }
.boxcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,11,12,0) 22%, rgba(10,11,12,.45) 50%, rgba(10,11,12,.82) 74%, rgba(10,11,12,.95) 100%);
}
.boxcard__text{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(15px,1.5vw,22px); }
.boxcard__meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.boxcard__tag{
  font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; font-size:10.5px; color:var(--ember);
}
.boxcard__num{
  font-family:"Oswald",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.1em; color:rgba(255,255,255,.55);
}
.boxcard__name{
  margin:0 0 5px; font-family:"Oswald",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.05;
  font-size:clamp(17px,1.4vw,21px); color:#fff;
}
.boxcard__desc{ margin:0; font-size:13px; line-height:1.45; color:#c4c9d0; max-width:34ch; }

/* ---- price + CTA band ---- */
.buy__bar{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  padding:clamp(20px,2.3vw,30px) clamp(22px,2.5vw,38px);
  background:linear-gradient(180deg, rgba(26,28,31,.92), rgba(16,17,19,.94));
  outline:1px solid var(--line); outline-offset:-1px;
  box-shadow:0 26px 64px rgba(0,0,0,.5);
}
.buy__bar-price{ display:flex; align-items:baseline; gap:6px 15px; flex-wrap:wrap; }
.buy__price{
  font-family:"Oswald",sans-serif; font-weight:700; line-height:1;
  font-size:clamp(40px,5vw,60px); color:var(--ink); letter-spacing:.01em;
}
.buy__price-note{
  font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.18em; font-size:13px; color:var(--ink-dim);
}
.buy__ships{ flex-basis:100%; margin:2px 0 0; font-size:14px; color:var(--ink-dim); line-height:1.5; }
.buy__cta{
  display:inline-block; text-align:center; font-family:"Oswald",sans-serif; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; font-size:15px;
  color:#12100d; text-decoration:none; white-space:nowrap;
  background:linear-gradient(180deg,var(--ember),var(--ember-2));
  padding:16px 40px; border-radius:999px;
  box-shadow:0 10px 26px rgba(255,106,43,.28); transition:transform .2s ease;
}
.buy__cta:hover{ transform:translateY(-2px); }
.buy__fineprint{
  margin:16px 0 0; font-size:13px; color:var(--ink-dim); line-height:1.55; text-align:center;
}
.buy__fineprint a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.buy__fineprint a:hover{ color:var(--ember); }

@media (max-width:900px){
  .buy__box{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .buy__box{ grid-template-columns:1fr; }
  .buy__bar{ flex-direction:column; align-items:stretch; text-align:center; }
  .buy__bar-price{ justify-content:center; }
  .buy__cta{ display:block; }
}

/* ================= FAQ ================= */
.faq{
  position:relative; z-index:1;
  border-top:1px solid var(--line); background:var(--bg);
  padding:clamp(64px,10vh,130px) clamp(20px,4vw,64px);
}
.faq__inner{ max-width:880px; margin:0 auto; }
.faq__head{ text-align:center; margin-bottom:clamp(28px,4vh,48px); }
.faq__eyebrow{
  display:block; font-family:"Oswald",sans-serif; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; font-size:13px;
  color:var(--ember); margin-bottom:16px;
}
.faq__title{
  margin:0; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  line-height:.98; letter-spacing:.01em; font-size:clamp(34px,4.4vw,64px); color:var(--ink);
}
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; font-family:"Oswald",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; font-size:clamp(16px,1.5vw,20px);
  color:var(--ink); transition:color .2s;
}
.faq__q:hover{ color:var(--ember); }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:"+"; flex:0 0 auto; font-family:"Oswald",sans-serif; font-weight:400;
  font-size:28px; line-height:1; color:var(--ember); transition:transform .25s ease;
}
.faq__item[open] .faq__q::after{ transform:rotate(45deg); }
.faq__a{ padding:0 4px 26px; }
.faq__a p{ margin:0; max-width:66ch; color:var(--ink-dim); font-size:clamp(15px,1.1vw,17px); line-height:1.65; }

/* ================= FOOTER ================= */
.footer{
  background:#0a0b0c; border-top:1px solid var(--line);
  padding:clamp(48px,7vh,84px) clamp(20px,4vw,64px) 32px;
}
.footer__about{
  max-width:1240px; margin:0 auto clamp(40px,6vh,60px);
  padding-bottom:clamp(34px,5vh,50px); border-bottom:1px solid var(--line);
}
.footer__about-eyebrow{
  display:block; font-family:"Oswald",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.28em; font-size:12px;
  color:var(--ember); margin-bottom:18px;
}
.footer__about-text{
  margin:0 0 14px; max-width:66ch; color:#c3c8cf;
  font-size:clamp(15px,1.05vw,16.5px); line-height:1.75;
}
.footer__about-text:last-child{ margin-bottom:0; }
.footer__inner{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px);
}
.footer__wordmark{
  font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:.3em;
  font-size:22px; color:var(--ink);
}
.footer__tag{ margin:16px 0 0; max-width:34ch; color:var(--ink-dim); font-size:14px; line-height:1.6; }
.footer__col h4{
  margin:0 0 16px; font-family:"Oswald",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--ink-dim);
}
.footer__col a, .footer__col span{
  display:block; color:var(--ink); text-decoration:none; font-size:14px; margin-bottom:11px;
  transition:color .2s;
}
.footer__col span{ color:var(--ink-dim); }
.footer__col a:hover{ color:var(--ember); }
.footer__social{ display:flex; gap:12px; }
.footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin:0; border:1px solid var(--line); border-radius:999px;
  color:var(--ink); transition:color .2s, background .2s, border-color .2s;
}
.footer__social a:hover{ color:#12100d; background:var(--ember); border-color:transparent; }
.footer__social svg{ width:18px; height:18px; }
.footer__bottom{
  max-width:1240px; margin:clamp(36px,5vh,56px) auto 0; padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:14px 24px; flex-wrap:wrap;
  color:var(--ink-dim); font-size:13px; letter-spacing:.02em;
}
@media (max-width:820px){
  .footer__inner{ grid-template-columns:1fr 1fr; gap:34px 24px; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .footer__inner{ grid-template-columns:1fr; }
}

/* ================= BLUEPRINT : Specs & care ================= */
.bp{
  position:relative; z-index:1; overflow:hidden;
  border-top:1px solid var(--line);
  padding:clamp(64px,10vh,130px) clamp(20px,4vw,64px);
  --bp-ink:#eef0f2; --bp-dim:#a7adb5; --bp-line:rgba(228,232,236,.20);
  color:var(--bp-ink);
  background:
    linear-gradient(rgba(190,200,210,.05) 1px, transparent 1px) 0 0/100% 42px,
    linear-gradient(90deg, rgba(190,200,210,.05) 1px, transparent 1px) 0 0/42px 100%,
    radial-gradient(130% 90% at 50% -5%, #191c20 0%, #111316 55%, #0b0c0d 100%);
}
.bp__inner{ max-width:1280px; margin:0 auto; position:relative; }
.bp__head{ max-width:760px; margin:0 0 clamp(30px,4vh,50px); }
.bp__eyebrow{ display:block; font-family:"JetBrains Mono",monospace; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; font-size:12px; color:var(--ember); margin-bottom:16px; }
.bp__title{ margin:0 0 16px; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  line-height:.98; letter-spacing:.01em; font-size:clamp(34px,4.4vw,64px); color:#fff; }
.bp__intro{ margin:0; max-width:54ch; color:var(--bp-dim); font-size:clamp(15px,1.15vw,18px); line-height:1.6; }
.bp__main{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,64px); align-items:center; }
.bp__diagram{ margin:0; position:relative; border:1px solid var(--bp-line); padding:24px; }
.bp__diagram::before,.bp__diagram::after{ content:""; position:absolute; width:10px; height:10px; border:1px solid var(--ember); }
.bp__diagram::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.bp__diagram::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.bp__diagram img{ display:block; width:100%; height:auto; max-height:72vh; object-fit:contain; }
.bp__diagram figcaption{ margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:11px;
  letter-spacing:.08em; color:var(--bp-dim); text-align:center; text-transform:uppercase; }
.bp__data{ min-width:0; }
.bp__specs{ margin:0 0 30px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.bp__specs > div{ padding:16px 0; border-bottom:1px dashed var(--bp-line); display:flex; flex-direction:column; gap:5px; }
.bp__specs > div:nth-child(odd){ padding-right:24px; border-right:1px dashed var(--bp-line); }
.bp__specs > div:nth-child(even){ padding-left:24px; }
.bp__specs dt{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bp-dim); }
.bp__specs dd{ margin:0; font-family:"Oswald",sans-serif; font-weight:600; font-size:clamp(17px,1.5vw,21px); color:#fff; letter-spacing:.02em; }
.bp__care h3{ margin:0 0 14px; font-family:"JetBrains Mono",monospace; font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--ember); }
.bp__care ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bp__care li{ position:relative; padding-left:22px; color:var(--bp-dim); font-size:clamp(14px,1.05vw,16px); line-height:1.5; }
.bp__care li::before{ content:"—"; position:absolute; left:0; color:var(--ember); }
.bp__assembly{ margin-top:clamp(40px,6vh,72px); border-top:1px solid var(--bp-line); padding-top:clamp(30px,4vh,48px); }
.bp__sub{ margin:0 0 8px; font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(22px,2.4vw,34px); color:#fff; }
.bp__sub span{ font-family:"JetBrains Mono",monospace; font-weight:400; font-size:.42em; letter-spacing:.16em; color:var(--ember); margin-left:12px; }
.bp__steps{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(22px,3vw,44px); align-items:center; margin-top:24px; }
.bp__asm-diagram{ margin:0; }
.bp__asm-diagram img{ display:block; width:100%; height:auto; max-height:66vh; object-fit:contain; }
.bp__stepslist{ list-style:none; margin:0; padding:0; counter-reset:step; }
.bp__stepslist li{ counter-increment:step; padding:16px 0 16px 52px; position:relative; border-bottom:1px dashed var(--bp-line);
  color:var(--bp-ink); font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(15px,1.4vw,19px); }
.bp__stepslist li::before{ content:"0" counter(step); position:absolute; left:0; top:14px; font-family:"JetBrains Mono",monospace;
  font-size:15px; color:var(--ember); letter-spacing:.05em; }
.bp__stepslist li small{ display:block; margin-top:4px; font-family:"Inter",sans-serif; font-weight:400; text-transform:none; letter-spacing:0; font-size:13px; color:var(--bp-dim); }
@media (max-width:900px){
  .bp__main{ grid-template-columns:1fr; }
  .bp__diagram{ order:-1; }
  .bp__steps{ grid-template-columns:1fr; }
  .bp__specs{ grid-template-columns:1fr; }
  .bp__specs > div:nth-child(odd){ border-right:0; padding-right:0; }
  .bp__specs > div:nth-child(even){ padding-left:0; }
}

/* ================= BURNING BREAKER ================= */
.breaker{
  position:relative; overflow:hidden;
  height:min(72vh,640px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#0a0b0c;
}
.breaker__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 78%; }
.breaker__overlay{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,12,.62) 0%, rgba(10,11,12,.2) 42%, rgba(10,11,12,.75) 100%); }
.breaker__line{
  position:absolute; inset:0; margin:0; padding:0 24px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:#fff; font-size:clamp(28px,5.2vw,76px); line-height:1;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
}

/* ================= FLOATING BUY BAR ================= */
.buybar{
  position:fixed; z-index:60;
  right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px);
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Oswald",sans-serif; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:14px;
  color:#12100d; text-decoration:none;
  background:linear-gradient(180deg,var(--ember),var(--ember-2));
  padding:14px 22px; border-radius:999px;
  box-shadow:0 12px 30px rgba(255,106,43,.4);
  transform:translateY(160%); opacity:0; pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.buybar span{ font-weight:700; padding-left:9px; border-left:1px solid rgba(0,0,0,.28); }
.buybar.is-visible{ transform:none; opacity:1; pointer-events:auto; }
.buybar:hover{ filter:brightness(1.05); }
@media (max-width:600px){
  .buybar{ left:14px; right:14px; bottom:14px; justify-content:center; }
}

/* ---- back to top ---- */
/* sits directly above the buybar: both appear at the same scroll depth, so the
   offset is unconditional rather than tied to .buybar.is-visible */
.totop{
  position:fixed; z-index:59;
  right:clamp(16px,3vw,28px);
  bottom:calc(clamp(16px,3vw,28px) + 60px);
  width:46px; height:46px; padding:0; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,21,24,.85); border:1px solid var(--line); color:var(--ink);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  cursor:pointer;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.totop.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--ember); color:#12100d; border-color:transparent; }
.totop svg{ width:20px; height:20px; display:block; }
/* on phones the buybar goes full-width and the in-page CTAs are centred, so the
   arrow moves to the left corner rather than sitting on top of a Buy button */
@media (max-width:600px){
  .totop{ left:14px; right:auto; bottom:calc(14px + 60px); }
}
/* the full-screen mobile menu owns the viewport while it's open */
body.nav-open .buybar, body.nav-open .totop{ opacity:0; pointer-events:none; }

/* ================= USE-CASE MARQUEE ================= */
.usebar{
  position:relative; z-index:1; overflow:hidden;
  display:flex;   /* track is anchored LEFT so all its overflow sits on the right,
                     which is what the -50% loop slides into. Centring it here made
                     the track's end march into view and visibly snap. */
  background:#0a0b0c; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.usebar__track{ display:flex; align-items:center; width:max-content; animation:usescroll 24s linear infinite; }
.usebar__set{ display:flex; align-items:center; flex:0 0 auto; }
.usebar:hover .usebar__track{ animation-play-state:paused; }
.usebar__track span{
  font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.14em; font-size:14px; color:var(--ink-dim); white-space:nowrap; padding:0 26px; transition:color .2s;
}
.usebar__track span:hover{ color:var(--ink); }
.usebar__track i{ width:5px; height:5px; background:var(--ember); flex:0 0 auto; transform:rotate(45deg); }
/* two identical halves -> sliding exactly -50% lands on an identical frame */
@keyframes usescroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .usebar__track{ animation:none; } }

/* ---- blueprint diagram interactivity ---- */
.bp__label{ display:block; text-align:center; font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.3em; color:#fff; }
.bp__label--top{ margin-bottom:12px; } .bp__label--bottom{ margin-top:12px; }
.bp__stackwrap{ position:relative; }
.bp__stackimg{ display:block; width:100%; height:auto; max-height:72vh; object-fit:contain;
  transition:filter .35s ease, opacity .4s ease; }
.bp__diagram--video:hover .bp__stackimg{ filter:drop-shadow(0 0 16px rgba(220,228,236,.6)) brightness(1.15); }
.bp__stackvid{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none;
  transform:scale(1.32); transform-origin:center; transition:opacity .4s ease;
  /* Safari has never supported WebM alpha, so these clips are light-on-black H.264
     instead. Screen-blending drops the black out against the dark blueprint and
     lets the grid show through -- same result as transparency, everywhere. */
  mix-blend-mode:screen; }
.bp__diagram--video.is-playing .bp__stackimg{ opacity:0; }
.bp__diagram--video.is-playing .bp__stackvid{ opacity:1; }
.bp__diagram--video{ cursor:pointer; }
.bp__arrow{ position:absolute; right:1%; top:20%; width:18px; color:var(--ember); }
.bp__arrow svg{ width:100%; height:auto; overflow:visible; }
.bp__arrow-line{ animation:bpflow 1.1s linear infinite; }
.bp__arrow-head{ animation:bpbounce 1.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes bpflow{ to{ stroke-dashoffset:-20; } }
@keyframes bpbounce{ 0%,100%{ transform:translateY(-2px); opacity:.55; } 50%{ transform:translateY(5px); opacity:1; } }
.bp__playtag{ position:absolute; top:14px; right:14px; z-index:3;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:rgba(255,106,43,.92); padding:6px 11px; opacity:.92; transition:opacity .2s, transform .2s, background .2s; pointer-events:none; }
.bp__diagram--video:hover .bp__playtag{ opacity:1; transform:translateY(-2px); }
.bp__diagram--video.is-playing .bp__playtag{ background:rgba(220,228,236,.92); }
@media (prefers-reduced-motion:reduce){ .bp__arrow-line,.bp__arrow-head{ animation:none; } }

/* ---- cooking modes: 3 cards, all visible ---- */
.modes__cards{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.modes__mode{ background:var(--bg-2); outline:1px solid var(--line); outline-offset:-1px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s ease, outline-color .3s ease; }
.modes__mode:hover{ transform:translateY(-4px); outline-color:rgba(255,106,43,.5); }
.modes__mode-media{ aspect-ratio:4/3; overflow:hidden; }
.modes__mode-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.modes__mode:hover .modes__mode-media img{ transform:scale(1.05); }
.modes__mode-body{ padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; flex:1; }
.modes__mode-name{ margin:0 0 12px; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(22px,2vw,28px); color:var(--ink); letter-spacing:.01em; line-height:1; }
.modes__mode-name span{ display:block; font-size:.5em; font-weight:500; letter-spacing:.1em; color:var(--ember); margin-top:7px; }
.modes__mode-desc{ margin:0 0 22px; color:var(--ink-dim); font-size:15px; line-height:1.6; flex:1; }
.modes__mode-meta{ margin:0; display:flex; flex-direction:column; gap:12px; }
.modes__mode-meta div{ padding-left:12px; border-left:2px solid var(--ember); }
.modes__mode-meta dt{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:2px; }
.modes__mode-meta dd{ margin:0; font-family:"Oswald",sans-serif; font-weight:500; font-size:16px; color:var(--ink); }
@media (min-width:821px) and (max-width:1080px){ .modes__cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:820px){ .modes__cards{ grid-template-columns:1fr; max-width:520px; } }

/* ---- reveal as a full-width video with a readable text scrim ---- */
.reveal--video{ position:relative; overflow:hidden; padding:0; min-height:min(88vh,840px);
  display:flex; align-items:center; border-top:1px solid var(--line); background:#0a0b0c; }
.reveal--video .reveal__bgvideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.reveal--video .reveal__scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(10,11,12,.93) 0%, rgba(10,11,12,.82) 32%, rgba(10,11,12,.4) 60%, rgba(10,11,12,.12) 100%),
    linear-gradient(180deg, rgba(10,11,12,.35), rgba(10,11,12,0) 30%, rgba(10,11,12,.55)); }
.reveal--video .reveal__content{ position:relative; z-index:2; max-width:620px; margin:0; padding:clamp(48px,7vw,96px) clamp(24px,6vw,90px); }
@media (max-width:820px){
  .reveal--video{ min-height:auto; }
  .reveal--video .reveal__bgvideo{ position:relative; height:auto; aspect-ratio:16/10; }
  .reveal--video .reveal__scrim{ background:linear-gradient(180deg, rgba(10,11,12,0) 30%, rgba(10,11,12,.9) 72%, #0a0b0c 100%); }
  .reveal--video{ display:block; }
  .reveal--video .reveal__content{ position:relative; margin-top:-34vw; padding:0 22px 44px; max-width:none; }
}

/* fix: both video figures must be positioning contexts for their play tag */
.bp__diagram--video{ position:relative; }

/* ---- blueprint grid spotlight (follows cursor) ---- */
.bp__spot{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:
    linear-gradient(rgba(220,228,236,.20) 1px, transparent 1px) 0 0/42px 42px,
    linear-gradient(90deg, rgba(220,228,236,.20) 1px, transparent 1px) 0 0/42px 42px,
    radial-gradient(240px at var(--mx,50%) var(--my,50%), rgba(220,228,236,.12), transparent 72%);
  -webkit-mask:radial-gradient(220px at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.45) 46%, transparent 76%);
          mask:radial-gradient(220px at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.45) 46%, transparent 76%);
}
.bp:hover .bp__spot{ opacity:1; }
/* Deliberately no z-index: that would make this a stacking context, and the
   screen-blended .bp__stackvid could then only blend against transparency inside
   it instead of against the section background (leaving an opaque black box).
   .bp__spot is painted earlier in the DOM, so plain source order keeps this above it. */
.bp__inner{ position:relative; }
@media (hover:none){ .bp__spot{ display:none; } }

/* ================= SHOP / PRODUCT (immersive full-bleed) ================= */
.shop--immersive{
  position:relative; z-index:1; overflow:hidden;
  min-height:min(92vh,880px);
  display:flex; align-items:center;
  border-top:1px solid var(--line);
  background:var(--bg-2);
}
.shop__stage{ position:absolute; inset:0; z-index:0; }
.shop__mainimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:0; transition:opacity .6s ease; }
.shop__mainimg.is-active{ opacity:1; }
.shop__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.8) 26%, rgba(8,9,11,.28) 58%, rgba(8,9,11,0) 88%),
    linear-gradient(180deg, rgba(8,9,11,.45) 0%, rgba(8,9,11,0) 24%, rgba(8,9,11,0) 60%, rgba(8,9,11,.55) 100%); }

.shop__panel{
  position:relative; z-index:2;
  width:min(92vw,470px);
  margin:clamp(40px,7vh,80px) 0 clamp(40px,7vh,80px) clamp(20px,6vw,96px);
  padding:clamp(28px,3vw,44px);
  background:rgba(14,16,19,.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(232,236,240,.14);
  box-shadow:0 34px 90px rgba(0,0,0,.55);
}
.shop__eyebrow{ display:block; font-family:"Oswald",sans-serif; font-weight:500; letter-spacing:.28em; text-transform:uppercase; font-size:12px; color:var(--ember); margin-bottom:14px; }
.shop__title{ margin:0 0 12px; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; line-height:.98; letter-spacing:.01em; font-size:clamp(32px,3.4vw,50px); color:var(--ink); }
.shop__price{ margin:0 0 18px; display:flex; align-items:baseline; gap:9px; }
.shop__amount{ font-family:"Oswald",sans-serif; font-weight:700; font-size:clamp(30px,3vw,44px); color:var(--ink); line-height:1; }
.shop__vat{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.shop__desc{ margin:0 0 20px; color:#cfd4da; font-size:clamp(14px,1vw,15.5px); line-height:1.6; }
.shop__points{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.shop__points li{ font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 13px; }
.shop__buy{ display:block; text-align:center; font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:16px; color:#12100d; text-decoration:none; background:linear-gradient(180deg,var(--ember),var(--ember-2)); padding:17px 28px; border-radius:999px; box-shadow:0 14px 32px rgba(255,106,43,.34); transition:transform .2s; }
.shop__buy:hover{ transform:translateY(-2px); }
.shop__alt{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:13px 0 0; font-size:12.5px; color:#cfd4da; text-decoration:none;
  transition:color .2s ease;
}
.shop__alt:hover{ color:var(--ink); }
.shop__alt-flags{ display:inline-flex; gap:4px; flex:0 0 auto; }
/* the hairline ring keeps the white stripes from dissolving into the dark panel */
.shop__alt-flags svg{
  width:19px; height:12.7px; display:block; border-radius:2px;
  box-shadow:0 0 0 1px rgba(238,240,242,.22);
}
.shop__ship{ margin:16px 0 0; font-size:12.5px; color:var(--ink-dim); line-height:1.55; }
.shop__ship a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; transition:color .2s; }
.shop__ship a:hover{ color:var(--ember); }
.shop__thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:22px; }
.shop__thumb{ padding:0; border:0; background:none; cursor:pointer; aspect-ratio:1/1; overflow:hidden; outline:1px solid var(--line); outline-offset:-1px; opacity:.5; transition:opacity .2s, outline-color .2s; }
.shop__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop__thumb:hover{ opacity:.82; }
.shop__thumb.is-active{ opacity:1; outline-color:var(--ember); }

/* 13" laptops land around 660-790px of usable height once browser chrome is gone.
   The shop panel is the only block dense enough to overflow there, which pushed the
   thumbnail strip permanently below the fold. Compact it instead of letting it spill.
   Height-based, so a 1080p desktop (~950px) is untouched. */
@media (min-width:821px) and (max-height:800px){
  .shop__panel{ margin-block:clamp(20px,3.5vh,44px); padding:clamp(22px,2.2vw,32px); }
  .shop__eyebrow{ margin-bottom:10px; }
  .shop__title{ font-size:clamp(28px,2.7vw,40px); margin-bottom:8px; }
  .shop__price{ margin-bottom:12px; }
  .shop__amount{ font-size:clamp(26px,2.4vw,36px); }
  .shop__desc{ margin-bottom:14px; line-height:1.5; }
  .shop__points{ margin-bottom:16px; gap:6px; }
  .shop__points li{ padding:5px 11px; }
  .shop__buy{ padding:14px 24px; font-size:15px; }
  .shop__alt{ margin-top:10px; }
  .shop__ship{ margin-top:12px; }
  /* single filmstrip row rather than two -- by far the biggest saving */
  .shop__thumbs{ grid-template-columns:repeat(10,1fr); gap:5px; margin-top:14px; }
}

/* stage arrows + counter are a mobile affordance only: on desktop the thumbnail
   strip sits beside the stage and is always in view */
.shop__nav, .shop__count{ display:none; }

@media (max-width:820px){
  .shop--immersive{ min-height:auto; display:block; }
  .shop__stage{ position:relative; height:62vw; max-height:430px; }
  .shop__scrim{ background:linear-gradient(180deg, rgba(8,9,11,.15) 0%, rgba(8,9,11,0) 45%, rgba(8,9,11,.55) 100%); }
  .shop__panel{ width:auto; margin:0; padding:clamp(24px,6vw,34px); background:var(--bg-2);
    -webkit-backdrop-filter:none; backdrop-filter:none; border:0; box-shadow:none; }

  .shop__nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; padding:0; border-radius:999px; cursor:pointer;
    background:rgba(12,13,15,.6); border:1px solid rgba(228,232,236,.22); color:var(--ink);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .shop__nav--prev{ left:12px; }
  .shop__nav--next{ right:12px; }
  .shop__nav svg{ width:20px; height:20px; display:block; }
  .shop__nav:active{ background:var(--ember); color:#12100d; border-color:transparent; }

  .shop__count{
    position:absolute; z-index:3; right:12px; bottom:12px; display:block;
    padding:5px 9px; border-radius:999px;
    background:rgba(12,13,15,.6);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em; color:var(--ink);
  }
  .shop__count b{ font-weight:500; color:var(--ember); }
}

/* ================= LIGHTBOX ================= */
/* click-to-enlarge affordance on content photos */
.shop__mainimg.is-active, .modes__mode-media img, .gallery__tile img, .boxcard__img{ cursor:zoom-in; }
/* only the visible shop image is clickable (the others are stacked & transparent on top) */
.shop__mainimg{ pointer-events:none; }
.shop__mainimg.is-active{ pointer-events:auto; }

.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,60px);
  background:rgba(6,7,8,.93); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  cursor:zoom-out;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:100%; max-height:100%; object-fit:contain;
  outline:1px solid var(--line); box-shadow:0 30px 90px rgba(0,0,0,.65);
  transform:scale(.96); transition:transform .25s ease; cursor:default;
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px);
  width:46px; height:46px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,21,24,.82); border:1px solid var(--line); color:var(--ink);
  font-size:28px; line-height:1; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.lightbox__close:hover{ background:var(--ember); color:#12100d; border-color:transparent; }
@media (prefers-reduced-motion:reduce){ .lightbox, .lightbox__img{ transition:none; } }

/* ================= LEGAL PAGES (returns.html) ================= */
.legalpage{ background:var(--bg); }
.legal__nav{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  max-width:820px; margin:0 auto; padding:26px clamp(20px,5vw,32px) 0;
  font-family:"Oswald",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; font-size:12px;
}
.legal__nav a{ color:var(--ink-dim); text-decoration:none; transition:color .2s; }
.legal__nav a:hover{ color:var(--ember); }
.legal{
  max-width:820px; margin:0 auto;
  padding:clamp(36px,6vh,64px) clamp(20px,5vw,32px) clamp(56px,9vh,96px);
  color:var(--ink);
}
.legal__eyebrow{
  display:block; font-family:"Oswald",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.28em; font-size:12px; color:var(--ember);
}
.legal__title{
  margin:14px 0 0; font-family:"Oswald",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.01em; line-height:.98;
  font-size:clamp(34px,6vw,58px);
}
.legal__meta{
  margin:12px 0 0; font-family:"JetBrains Mono",monospace;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
}
.legal h2{
  margin:clamp(34px,5vh,52px) 0 0; padding-top:clamp(22px,3vh,30px);
  border-top:1px solid var(--line);
  font-family:"Oswald",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; font-size:clamp(19px,2.2vw,24px);
}
.legal p{ margin:15px 0 0; color:#cfd4da; font-size:15.5px; line-height:1.72; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.legal a:hover{ color:var(--ember); }
.legal__list{ margin:15px 0 0; padding-left:20px; color:#cfd4da; font-size:15.5px; line-height:1.72; }
.legal__list li{ margin-bottom:11px; }
.legal__list li::marker{ color:var(--ember); }
.legal__form{
  margin:18px 0 0; padding:20px 22px;
  border:1px solid var(--line); border-left:2px solid var(--ember); border-radius:4px;
  background:var(--bg-2);
  font-family:"JetBrains Mono",monospace; font-size:13px; line-height:2; color:var(--ink-dim);
}
.legal__foot{
  max-width:820px; margin:0 auto; padding:22px clamp(20px,5vw,32px) 40px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:14px 24px; flex-wrap:wrap;
  color:var(--ink-dim); font-size:13px;
}
.legal__foot a{ color:var(--ink-dim); text-decoration:none; transition:color .2s; }
.legal__foot a:hover{ color:var(--ember); }