/* ============================================================
   BLACKBOLT — Purecoal Natural
   Solid-colour identity. Gradients allowed ONLY as faint radial
   ember glows for depth (client-approved 2026-07-22) — never as
   surface fills or colour transitions.
   Palette: neutral near-black · grey · white · fire orange
   ============================================================ */

/* ---------- Self-hosted fonts (no Google CDN dependency) ---------- */
@font-face{ font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/barlow-700.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/barlow-800.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/inter-800.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/jbmono-400.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/jbmono-500.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/jbmono-700.woff2') format('woff2'); }
/* Bangla (Noto Sans Bengali, variable 400–700) — unicode-range scopes it to
   Bengali glyphs, so Latin keeps Barlow/Inter/JetBrains and English pages never
   load this file. Declared up to 800 so the display face's 800 requests clamp
   to the axis max (700) instead of synthesising a blurry faux-bold. */
@font-face{ font-family:'Noto Sans Bengali'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/noto-bengali-var.woff2') format('woff2'); unicode-range:U+0964-0965,U+0980-09FF,U+200C-200D,U+20B9,U+25CC,U+A8F1; }

/* ---------- Design tokens ---------- */
:root{
  /* neutral scale — all solid, no warm cast */
  --black:#0B0B0D;       /* page black, near-pure with a hair of cool */
  --black-2:#101013;
  --coal:#141417;        /* card surface */
  --coal-2:#1A1A1E;
  --coal-3:#222227;
  --silver:#EDEDEF;      /* near-white heading grey */
  --silver-2:#9A9AA1;    /* mid grey */
  --silver-3:#6D6D74;    /* dim rule */
  --fire:#E8531A;        /* primary ember orange (pack flame) */
  --fire-bright:#FF6A2C; /* hotter tip */
  --fire-deep:#B93A0C;   /* deep red-orange */
  --fire-ink:var(--fire);/* small accents: bright on dark, remapped deeper on light surfaces */
  --white:#FAFAFC;
  --ash:#A6A6AD;
  --wa-green:#25D366;

  --font-display:'Barlow Semi Condensed', 'Noto Sans Bengali', 'Arial', 'Helvetica Neue', sans-serif;
  --font-body:'Inter', 'Noto Sans Bengali', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'JetBrains Mono', 'Noto Sans Bengali', 'Courier New', monospace;

  --container:1180px;
  --radius:6px;
  --radius-sm:4px;
  --section-pad:clamp(64px, 8.5vw, 110px);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* theme: DARK (default) */
  --bg:var(--black);
  --bg-2:var(--black-2);
  --bg-card:var(--coal);
  --bg-card-2:var(--coal-2);
  --line:rgba(237,237,242,.09);
  --line-strong:rgba(237,237,242,.18);
  --text:var(--white);
  --text-2:var(--ash);
  --heading:var(--silver);
  --accent:var(--fire);
  --nav-bg:rgba(11,11,13,.86);
  --shadow:0 24px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------- Theme: LIGHT (ash paper — barely-warm mineral white) ---------- */
html[data-theme="light"]{
  --bg:#F1F0EE;
  --bg-2:#FAF9F7;
  --bg-card:#FFFFFF;
  --bg-card-2:#EDECE9;
  --line:rgba(22,19,14,.10);
  --line-strong:rgba(22,19,14,.20);
  --text:#141413;
  --text-2:#585650;
  --heading:#100F0D;
  --accent:var(--fire-deep);
  --fire-ink:#C2410C;
  --nav-bg:rgba(247,246,244,.9);
  --shadow:0 20px 48px rgba(20,15,5,.10);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.68;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}
/* charcoal-paper grain — solid-colour noise, no gradients */
body::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  opacity:.05;
}
html[data-theme="light"] body::after{ opacity:.035; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
::selection{ background:var(--fire); color:#fff; }

.container{ width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--fire); outline-offset:3px; border-radius:3px;
}

/* ---------- Typography ---------- */
.display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1;
  letter-spacing:-.5px;
  text-transform:uppercase;
  color:var(--heading);
}
h1.display{ font-size:clamp(36px, 6.5vw, 66px); }
h2.display{ font-size:clamp(36px, 5vw, 56px); }
h3.display{ font-size:clamp(24px, 2.8vw, 32px); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--fire-ink);
  display:inline-flex; align-items:center; gap:11px;
  margin-bottom:20px;
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--fire-ink); }

.lead{ font-size:clamp(17px, 1.4vw, 19.5px); color:var(--text-2); max-width:62ch; }

/* fire highlight = SOLID orange, no gradient; deepens on ash surfaces */
.hot-text{ color:var(--fire-ink); }

/* solid ember rule — draws in like a lit fuse */
.burn-line{ height:3px; border:none; background:var(--fire); transform-origin:left; animation:fuse 1.1s var(--ease-out) .25s both; }
@keyframes fuse{ from{ transform:scaleX(0); } }

/* headline line entrance — each line rises out of a clipped row.
   Padding + negative margin widen the clip window so Anton's tight
   line-height (.92) doesn't cut glyph tops/bottoms. */
.hl{ display:block; overflow:hidden; padding:.14em 0; margin:-.14em 0; }
.hl-in{ display:inline-block; transform:translateY(140%); animation:rise-line .85s var(--ease-out) both; }
.hl:nth-child(2) .hl-in{ animation-delay:.13s; }
.hl:nth-child(3) .hl-in{ animation-delay:.26s; }
@keyframes rise-line{ to{ transform:none; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:13.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:16px 30px;
  border-radius:var(--radius);
  border:2px solid transparent;
  transition:transform .22s var(--ease-out), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-fire{ background:var(--fire); color:#fff; border-color:var(--fire); }
.btn-fire:hover{ background:var(--fire-deep); border-color:var(--fire-deep); color:#fff; box-shadow:0 10px 30px rgba(232,83,26,.4); }

.btn-ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; }
.btn-ghost:hover{ border-color:var(--fire-ink); color:var(--fire-ink); }

/* WhatsApp buttons: quiet ghost + green mark, so fire orange owns the page */
.btn-wa{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-wa svg{ width:17px; height:17px; fill:var(--wa-green); flex-shrink:0; }
.btn-wa:hover{ border-color:var(--wa-green); color:var(--wa-green); }

.btn-nav{ padding:12px 22px; font-size:12.5px; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--line);
  transition:background .4s ease;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:700; font-size:26px;
  letter-spacing:2px; text-transform:uppercase; color:var(--heading);
}
.logo-mark{
  width:40px; height:40px; border-radius:var(--radius);
  display:grid; place-items:center;
  background:var(--fire); color:#000; font-size:20px;
  border:1px solid var(--fire-bright);
  flex-shrink:0;
}
.logo-mark svg{ width:21px; height:21px; fill:#000; }
/* real emblem badge — circular crop, no orange square */
.logo-mark--emblem{ background:none; border:none; padding:0; width:44px; height:44px; border-radius:50%; overflow:hidden; }
.logo-mark--emblem img{ width:100%; height:100%; object-fit:cover; }
.logo b{ color:var(--fire-ink); }

.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{
  font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2); position:relative; padding:6px 0;
  transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--fire); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap:14px; }

.theme-toggle{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line-strong);
  color:var(--text-2);
  transition:border-color .25s ease, transform .3s var(--ease-out), color .25s ease;
}
.theme-toggle:hover{ border-color:var(--fire-ink); color:var(--fire-ink); transform:rotate(18deg); }
.theme-toggle svg{
  width:19px; height:19px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.theme-toggle .i-moon{ display:none; }
html[data-theme="light"] .theme-toggle .i-sun{ display:none; }
html[data-theme="light"] .theme-toggle .i-moon{ display:block; }

.nav-burger{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-burger span{ width:22px; height:2px; background:var(--text); transition:transform .3s ease, opacity .3s ease; }
.nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2){ opacity:0; }
.nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:120px; padding-bottom:64px; overflow:hidden;
  background:#0B0B0D url('../img/video-bg/hero-poster.jpg') center/cover no-repeat; /* poster fallback behind video */
  border-top:2px solid var(--fire); /* pack's orange stitch line */
  /* permanent dark video bg → force dark-mode tokens even in light theme */
  --bg-card:#141417; --bg-card-2:#1A1A1E;
  --text:#FAFAFC; --text-2:#BDBBB6; --heading:#EDEDEF;
  --line:rgba(237,237,242,.10); --line-strong:rgba(237,237,242,.20);
  --fire-ink:var(--fire);
}
/* hero background video + readability overlay (solid, no gradient) */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; pointer-events:none;
}
.hero-overlay{ position:absolute; inset:0; z-index:0; background:rgba(9,9,11,.5); pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .hero-video{ display:none; } }

#embers{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }

/* jagged coal-bed silhouette along the hero base, with slow-pulsing ember dots */
.hero-coalbed{
  position:absolute; left:0; right:0; bottom:0; height:96px; z-index:1; pointer-events:none;
  background:var(--black-2);
  clip-path:polygon(0 64%, 5% 46%, 11% 60%, 18% 38%, 25% 56%, 33% 42%, 41% 62%, 49% 40%, 57% 58%, 65% 44%, 73% 60%, 81% 42%, 89% 58%, 95% 46%, 100% 62%, 100% 100%, 0 100%);
}
.hero-coalbed::before, .hero-coalbed::after{
  content:""; position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--fire);
}
.hero-coalbed::before{
  left:9%; bottom:30px;
  box-shadow:14vw 12px 0 -1px var(--fire-deep), 27vw -6px 0 var(--fire-bright),
             43vw 16px 0 -1px var(--fire), 58vw 2px 0 -2px var(--fire-deep),
             74vw 12px 0 var(--fire), 86vw -2px 0 -1px var(--fire-bright);
  animation:ember-pulse 3.6s ease-in-out infinite;
}
.hero-coalbed::after{
  left:16%; bottom:14px; width:3px; height:3px;
  background:var(--fire-deep);
  box-shadow:12vw -8px 0 var(--fire), 31vw 6px 0 -1px var(--fire-bright),
             49vw -4px 0 var(--fire-deep), 66vw 8px 0 -1px var(--fire),
             79vw -6px 0 var(--fire-deep);
  animation:ember-pulse 4.4s ease-in-out 1.1s infinite;
}
@keyframes ember-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); border:1px solid var(--line-strong);
  padding:9px 18px; border-radius:999px; margin-bottom:26px;
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--fire); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.5); opacity:.55;} }

.hero h1{ margin-bottom:26px; }
.hero .lead{ margin-bottom:38px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:52px; }

.hero-specs{
  display:flex; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--bg-card); max-width:560px;
}
.hero-specs .spec{ flex:1 1 130px; padding:18px 20px; border-right:1px solid var(--line); }
.hero-specs .spec:last-child{ border-right:none; }
.spec .num{ font-family:var(--font-display); font-weight:700; font-size:36px; line-height:1; color:var(--fire-ink); }
.spec .lbl{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); margin-top:8px; }

/* hero product image — framed like a pack on a shelf */
.hero-visual{ position:relative; display:grid; place-items:center; }
.pack-frame{
  position:relative; width:min(400px, 82vw);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--bg-card);
  padding:18px;
  box-shadow:var(--shadow);
}
.pack-frame::before{ /* chrome corner ticks */
  content:""; position:absolute; inset:8px; border:1px solid var(--silver-3); border-radius:var(--radius-sm); pointer-events:none; opacity:.4;
}
.pack-frame img{ width:100%; height:auto; display:block; border-radius:var(--radius-sm); position:relative; z-index:1; }
.pack-tag{
  position:absolute; z-index:3;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--fire); color:#000;
  border-radius:3px; padding:8px 14px;
  box-shadow:var(--shadow);
}
.pack-tag.t1{ top:-14px; right:22px; }
.pack-tag.t2{ bottom:-14px; left:22px; background:var(--bg-card); color:var(--text); border:1px solid var(--line-strong); }

.scroll-hint{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-2); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint::after{ content:""; width:1px; height:32px; background:var(--fire); animation:drip 1.8s ease-in-out infinite; }
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top;} 60%{ transform:scaleY(1);} 100%{ transform:scaleY(1); opacity:0;} }

/* ---------- Section with video background (reuses .hero-video/.hero-overlay) ---------- */
.section-video{
  position:relative; overflow:hidden;
  background:#0B0B0D url('../img/briquettes-bg-1.jpg') center/cover no-repeat;
  border-top:2px solid var(--fire); /* ember seam into the dark image block */
  /* dark video bg → force dark-mode tokens so it reads in light theme too */
  --bg-card:#16161A; --bg-card-2:#1C1C21;
  --text:#FAFAFC; --text-2:#BDBBB6; --heading:#EDEDEF;
  --line:rgba(237,237,242,.12); --line-strong:rgba(237,237,242,.22);
  --fire-ink:var(--fire);
}
.section-video > .container{ position:relative; z-index:2; }
.section-video .hero-overlay{ background:rgba(9,9,11,.64); }
/* lift the data table off the image so it stays legible */
.section-video .compare{ background:rgba(14,14,17,.66); }

/* ---------- Sections ---------- */
.section{ padding-block:var(--section-pad); position:relative; }
/* CTA-band sections sit tighter — the black band carries its own internal padding */
.section:has(.cta-band){ padding-block:clamp(48px, 7vw, 88px); }
.section-head{ max-width:720px; margin-bottom:clamp(40px, 6vw, 64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .lead{ margin-inline:auto; }
.section-head h2{ margin-bottom:18px; }
.bg-alt{ background:var(--bg-2); }

/* Fixed-tone sections — the light/dark rhythm holds in BOTH themes.
   They re-scope the design tokens, so every component inside adapts. */
.bg-light{
  background:#F4F3F1; /* ash white — mineral, barely warm */
  --bg:#F4F3F1;
  --bg-2:#FAF9F7;
  --bg-card:#FFFFFF;
  --bg-card-2:#EDECE9;
  --line:rgba(22,19,14,.10);
  --line-strong:rgba(22,19,14,.20);
  --text:#141413;
  --text-2:#585650;
  --heading:#100F0D;
  --fire-ink:#C2410C; /* embers look deeper against ash */
  --shadow:0 20px 48px rgba(20,15,5,.10);
  /* ember seam: the glowing edge where coal meets ash */
  border-top:2px solid var(--fire);
}
.bg-dark{
  background:#121215; /* charred block — a step above the page black */
  --bg:#121215;
  --bg-2:#17171A;
  --bg-card:#1A1A1E;
  --bg-card-2:#202024;
  --line:rgba(237,237,242,.09);
  --line-strong:rgba(237,237,242,.18);
  --text:#FAFAFC;
  --text-2:#A6A6AD;
  --heading:#EDEDEF;
  --fire-ink:var(--fire);
  --shadow:0 24px 60px rgba(0,0,0,.55);
  position:relative;
}
/* faint ember glow bleeding in from the top-right — depth without losing the solid identity */
.bg-dark::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(640px 420px at 86% -90px, rgba(232,83,26,.07), transparent 62%);
}
.bg-dark > .container{ position:relative; z-index:1; }
/* seams on the way back down: light section handing over to a dark one */
.bg-light + .bg-alt, .bg-light + .bg-dark, .bg-light + .footer{ border-top:2px solid var(--fire); }
/* no seam between same-tone neighbours — the ember line marks dark↔light boundaries only */
.bg-light + .bg-light{ border-top:0; }
/* inner-page heroes already end in a full burn-line — no double seam */
.burn-line + .bg-light{ border-top:0; }

/* decorative background shapes — subtle solid line-art, no gradient.
   waves = light lines (dark sections only) · wire = dark lines (light sections only) */
.shape-waves, .shape-wire, .shape-ribbon{ position:relative; overflow:hidden; }
.shape-waves::after, .shape-wire::after, .shape-ribbon::after{
  content:""; position:absolute; z-index:0; pointer-events:none; background-repeat:no-repeat;
}
/* ribbon = full-bleed texture — kept quiet so content leads */
.shape-ribbon::after{
  inset:0; background-image:url('../img/shape-ribbon.png');
  background-position:center; background-size:cover; opacity:.24;
}
/* waves + wire = contained right-side accent (not full width) */
.shape-waves::after{
  top:0; right:-40px; width:min(560px,52%); height:100%; background-size:contain;
  background-image:url('../img/shape-waves.png'); background-position:right center; opacity:.13;
}
.shape-wire::after{
  right:-70px; top:50%; transform:translateY(-50%); width:min(520px,46%); aspect-ratio:1/1;
  background-size:contain; background-image:url('../img/shape-wire.png'); background-position:center; opacity:.06;
}
/* keep all real content above the texture */
.shape-waves > .container, .shape-wire > .container, .shape-ribbon > .container{ position:relative; z-index:1; }

/* coal-edge: jagged charred rim hanging below a seam (used once, on the home page) */
.coal-edge{ position:relative; }
.coal-edge::before{
  content:""; position:absolute; top:0; left:0; right:0; height:24px; z-index:1; pointer-events:none;
  background:var(--black);
  clip-path:polygon(0 0,100% 0,100% 38%,95% 72%,90% 42%,84% 82%,78% 48%,71% 88%,65% 52%,58% 90%,51% 45%,44% 85%,37% 50%,30% 92%,23% 55%,16% 85%,10% 48%,5% 78%,0 40%);
}

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }
/* section headers fade in place — only cards and blocks travel */
.section-head.reveal{ transform:none; }

/* ---------- Marquee ---------- */
.marquee{ border-block:1px solid var(--line); overflow:hidden; padding-block:16px; background:var(--bg-2); }
.marquee-track{ display:flex; gap:0; width:max-content; animation:marquee 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:2px; text-transform:uppercase;
  color:var(--silver-2); display:flex; align-items:center; gap:48px; white-space:nowrap; padding-right:48px;
}
.marquee span i{ color:var(--fire-ink); font-style:normal; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.card::before{ /* solid fire accent bar that grows on hover */
  content:""; position:absolute; left:0; top:0; width:3px; height:100%;
  background:var(--fire); transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease-out);
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.card:hover::before{ transform:scaleY(1); }

.card .ico, .contact-list .ico{
  width:52px; height:52px; border-radius:var(--radius);
  display:grid; place-items:center;
  background:var(--bg-card-2); border:1px solid var(--fire-ink);
  color:var(--fire-ink); font-size:22px; margin-bottom:22px;
  font-family:var(--font-display);
}
.ico svg{
  width:24px; height:24px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.card h3{ font-family:var(--font-display); font-weight:700; font-size:23px; letter-spacing:.5px; text-transform:uppercase; color:var(--heading); margin-bottom:12px; }
.card p{ color:var(--text-2); font-size:15.5px; }
.card.center{ text-align:center; }

.avatar-lg{ width:84px; height:84px; font-size:32px; margin:0 auto 20px; }
.center-note{ text-align:center; margin-top:44px; }

/* ---------- Team portrait cards ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.team-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.team-card img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top center;
  display:block; background:var(--bg-card-2); border-bottom:1px solid var(--line);
}
.team-info{ padding:18px 20px 20px; text-align:center; position:relative; }
.team-info::before{ /* ember tick above the name */
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:32px; height:3px; background:var(--fire);
}
.team-info h3{
  font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.4px;
  text-transform:uppercase; color:var(--heading); margin-top:8px; margin-bottom:4px; line-height:1.1;
}
.team-info p{ color:var(--fire-ink); font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.grid-story{ align-items:center; gap:56px; }
.story-copy .lead:not(:last-child){ margin-bottom:20px; }

/* ---------- Compare ---------- */
.compare{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.compare-row{ display:grid; grid-template-columns:1.3fr 1fr 1fr; border-bottom:1px solid var(--line); }
.compare-row:last-child{ border-bottom:none; }
.compare-row > div{ padding:18px 24px; font-size:15px; }
.compare-row.head > div{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--bg-card-2); color:var(--text-2);
}
.compare-row .metric{ color:var(--text-2); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; }
.compare-row .them{ color:var(--text-2); }
.compare-row .us{ background:var(--bg-card); font-weight:600; border-left:3px solid var(--fire-ink); color:var(--text); }
/* the orange spine lights up after the table appears */
.compare.reveal .compare-row .us{ border-left-color:transparent; transition:border-left-color .5s ease .45s; }
.compare.reveal.in .compare-row .us{ border-left-color:var(--fire-ink); }
.compare-row .us .ok{ color:var(--fire-ink); margin-right:8px; font-weight:700; }

/* ---------- Products ---------- */
.filter-tabs{ display:flex; gap:10px; justify-content:center; margin-bottom:36px; flex-wrap:wrap; }
.filter-tabs button, .filter-tabs a{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 24px; border-radius:var(--radius); display:inline-block;
  border:1px solid var(--line-strong); color:var(--text-2); transition:all .25s ease;
}
.filter-tabs button.active, .filter-tabs button:hover,
.filter-tabs a.active, .filter-tabs a:hover{ border-color:var(--fire-ink); color:var(--fire-ink); }

.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.product{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.product:hover{ transform:translateY(-8px); border-color:var(--fire); box-shadow:var(--shadow); }
.product-visual{
  aspect-ratio:4/5; overflow:hidden; position:relative;
  background:var(--black); border-bottom:1px solid var(--line);
}
.product-visual img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s var(--ease-out); }
.product:hover .product-visual img{ transform:scale(1.05); }
.product.filter-in{ animation:filter-in .45s var(--ease-out); }
@keyframes filter-in{ from{ opacity:0; transform:translateY(12px); } }
.product-kg{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:var(--font-display); font-weight:700; font-size:19px; color:#000;
  background:var(--fire); padding:4px 12px; border-radius:3px;
}
.product-body{ padding:22px; display:flex; flex-direction:column; gap:14px; flex:1; }
.product-body h3{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.5px; text-transform:uppercase; color:var(--heading); }
.product-meta{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--text-2); }
.product-meta b{ color:var(--fire-ink); font-weight:700; }
.product-desc{ font-size:13.5px; color:var(--text-2); margin-top:-4px; }
.product-body .btn{ margin-top:auto; justify-content:center; padding:13px 20px; font-size:12px; }
.product-actions{ margin-top:auto; display:grid; gap:8px; }
.product-actions .btn{ margin-top:0; justify-content:center; padding:12px 16px; font-size:12px; width:100%; }

/* ---------- Product details page ---------- */
.page-hero .hero-cta{ margin-top:34px; margin-bottom:0; }
.spec-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.spec-badge{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--heading); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:9px 14px; display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.03);
}
.spec-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--fire); flex-shrink:0; }

/* two-column intro (text + image) */
.detail-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.detail-visual{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--black); aspect-ratio:4/5; }
.detail-visual img{ width:100%; height:100%; object-fit:cover; display:block; }

/* feature checklist */
.feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 40px; }
.feature{ display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.feature svg{ width:21px; height:21px; flex-shrink:0; color:var(--fire-ink); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; }
.feature span{ font-size:15.5px; color:var(--text); }

/* size pills */
.size-block{ margin-bottom:30px; text-align:center; }
.size-block:last-child{ margin-bottom:0; }
.size-label{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); margin-bottom:16px; }
.size-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.size-pill{
  font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.4px;
  color:var(--heading); background:var(--bg-card); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:14px 26px; transition:border-color .25s ease, transform .25s ease;
}
.size-pill:hover{ border-color:var(--fire); transform:translateY(-3px); }

/* result callout */
.callout{ border-left:3px solid var(--fire); background:var(--bg-card); padding:18px 22px; border-radius:0 var(--radius) var(--radius) 0; margin-top:24px; }
.callout p{ color:var(--text); font-size:15.5px; margin:0; }
.callout b{ color:var(--fire-ink); }

/* ---------- Process ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.step{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; position:relative; counter-increment:step;
  transition:transform .3s var(--ease-out), border-color .3s ease;
}
.step:hover{ transform:translateY(-5px); border-color:var(--fire); }
.step::before{
  content:"0" counter(step);
  font-family:var(--font-display); font-weight:700; font-size:48px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--fire-ink); display:block; margin-bottom:16px;
}
.step h4{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.5px; text-transform:uppercase; color:var(--heading); margin-bottom:8px; }
.step p{ font-size:14.5px; color:var(--text-2); }
/* 3-up process variant (home: How to Order) */
.process-3{ grid-template-columns:repeat(3,1fr); }

/* ---------- Intro manifesto band (Who We Are — centered on ash) ---------- */
.intro-inner{ max-width:780px; margin-inline:auto; text-align:center; }
.intro-inner .eyebrow{ justify-content:center; }
.intro-inner .lead{ margin-inline:auto; margin-bottom:34px; }

/* ---------- Honest attributes band (credibility) ---------- */
.attr-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.attr{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; display:flex; flex-direction:column; gap:10px;
  transition:transform .3s var(--ease-out), border-color .3s ease;
}
.attr:hover{ transform:translateY(-5px); border-color:var(--fire); }
.attr .ico{
  width:52px; height:52px; border-radius:var(--radius); display:grid; place-items:center;
  background:var(--bg-card-2); border:1px solid var(--fire-ink); color:var(--fire-ink);
  margin-bottom:6px;
}
.attr b{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.3px; color:var(--heading); }
.attr span{ font-size:14px; color:var(--text-2); line-height:1.5; }

/* ---------- Short FAQ centered on a full-width section ---------- */
.faq-home{ max-width:820px; margin-inline:auto; }

/* ---------- Stats ---------- */
.stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stats-band.spaced{ margin-bottom:clamp(56px, 8vw, 88px); }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(46px, 6vw, 76px); line-height:1; color:var(--fire); }
.stat .lbl{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); margin-top:12px; }

/* ---------- Testimonials ---------- */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; display:flex; flex-direction:column; gap:20px;
  transition:transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.quote:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.quote .stars{ color:var(--fire-ink); letter-spacing:3px; font-size:15px; }
.quote p{ color:var(--text); font-size:15.5px; }
.quote footer{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.avatar{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:#000; background:var(--fire);
}
.quote footer .who b{ display:block; font-size:15px; }
.quote footer .who span{ font-family:var(--font-mono); font-size:11px; color:var(--text-2); letter-spacing:.02em; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; border-radius:var(--radius); overflow:hidden;
  padding:clamp(48px, 7vw, 84px) clamp(28px, 6vw, 72px); text-align:center;
  background:#161619; border:1px solid rgba(237,237,242,.18);
  /* always a charred black band — pops hardest on light sections */
  --bg-card:#1D1D21;
  --bg-card-2:#232327;
  --line:rgba(237,237,242,.09);
  --line-strong:rgba(237,237,242,.18);
  --text:#FAFAFC;
  --text-2:#A6A6AD;
  --heading:#EDEDEF;
  --fire-ink:var(--fire);
}
.cta-band::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--fire); z-index:2; }
/* faint ember glow behind the band's content */
.cta-band{ background-image:radial-gradient(520px 340px at 12% -60px, rgba(232,83,26,.10), transparent 60%); }
/* fuse-draw when the band scrolls in */
.cta-band.reveal::before{ transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease-out) .3s; }
.cta-band.reveal.in::before{ transform:scaleX(1); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band .cta-embers{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.cta-band .eyebrow{ justify-content:center; }
.cta-band h2{ margin-bottom:16px; }
.cta-band .lead{ color:var(--text-2); margin-inline:auto; margin-bottom:36px; }
.cta-band .hero-cta{ justify-content:center; margin-bottom:0; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; }
.contact-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.stack-card{ margin-top:24px; }
.card-title{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.5px; text-transform:uppercase; color:var(--heading); }
.card-text{ color:var(--text-2); margin-top:8px; font-size:15px; }
.contact-grid h2.display{ margin-bottom:8px; }
.contact-list{ display:flex; flex-direction:column; gap:22px; margin-top:26px; }
.contact-list li{ display:flex; gap:16px; align-items:flex-start; }
.contact-list .ico{ margin-bottom:0; width:46px; height:46px; font-size:19px; flex-shrink:0; }
.contact-list b{ display:block; font-size:15.5px; color:var(--heading); }
.contact-list span{ color:var(--text-2); font-size:14.5px; }

.form label{ display:block; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); margin-bottom:8px; }
.form input, .form textarea, .form select{
  width:100%; background:var(--bg-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  color:var(--text); padding:14px 16px; font:inherit; font-size:15px; margin-bottom:22px;
  transition:border-color .25s ease;
}
.form input:focus, .form textarea:focus, .form select:focus{ border-color:var(--fire-ink); outline:none; }
.form textarea{ min-height:130px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:13.5px; color:var(--text-2); margin-top:14px; }
/* honeypot — visually gone, still in the DOM for bots */
.form .bb-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
/* submit feedback */
.form-msg{ padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:18px; border:1px solid var(--line-strong); color:var(--text-2); }
.form-msg--ok{ border-color:#2e7d32; color:#4caf50; background:rgba(76,175,80,.08); }
.form-msg--err{ border-color:var(--fire-deep); color:var(--fire-ink); background:rgba(232,83,26,.08); }
.note-center{ text-align:center; margin-top:18px; }

/* ---------- FAQ (contact) ---------- */
.faq{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.faq details{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); transition:color .25s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--fire-ink); transition:transform .3s var(--ease-out); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details[open] summary{ color:var(--fire-ink); }
.faq details p{ padding:0 20px 18px; font-size:14.5px; color:var(--text-2); }

/* grouped FAQ (dedicated FAQ page) */
.faq-groups{ max-width:880px; margin-inline:auto; }
.faq-group + .faq-group{ margin-top:clamp(36px, 5vw, 52px); }
.faq-group-title{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line-strong); }
.faq-group-title .n{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--fire-ink); }
.faq-group-title h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(21px, 2.6vw, 27px); letter-spacing:.4px; text-transform:uppercase; color:var(--heading); }
.faq-group .faq{ margin-top:0; }

/* ---------- Blog archive ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.blog-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.blog-card:hover{ transform:translateY(-8px); border-color:var(--fire); box-shadow:var(--shadow); }
.blog-thumb{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--black); border-bottom:1px solid var(--line); position:relative; }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.blog-card:hover .blog-thumb img{ transform:scale(1.05); }
.blog-body{ padding:24px; display:flex; flex-direction:column; gap:13px; flex:1; }
.blog-cat{
  align-self:flex-start; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fire-ink); border:1px solid var(--fire-ink); border-radius:100px; padding:5px 12px;
}
.blog-card h3{ font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.15; letter-spacing:.3px; color:var(--heading); }
.blog-card h3 a{ color:inherit; transition:color .25s ease; }
.blog-card h3 a:hover{ color:var(--fire-ink); }
.blog-excerpt{ font-size:14.5px; color:var(--text-2); flex:1; }
.blog-meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:4px; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:11px; color:var(--text-2); letter-spacing:.03em;
}
.blog-meta .rm{ color:var(--fire-ink); font-weight:700; }
.blog-card.filter-in{ animation:filter-in .45s var(--ease-out); }
.pagination{ display:flex; justify-content:center; gap:10px; margin-top:40px; }
.pagination a, .pagination span{
  font-family:var(--font-mono); font-size:13px; font-weight:500; min-width:44px; text-align:center;
  padding:11px 14px; border-radius:var(--radius); border:1px solid var(--line-strong); color:var(--text-2); transition:all .25s ease;
}
.pagination a:hover{ border-color:var(--fire-ink); color:var(--fire-ink); }
.pagination .current{ background:var(--fire); border-color:var(--fire); color:#000; font-weight:700; }
.pagination .disabled{ opacity:.4; pointer-events:none; }

/* ---------- Single article ---------- */
.article-hero .blog-cat{ margin-bottom:20px; }
.page-hero h1.article-title{ font-size:clamp(29px, 4.3vw, 48px); line-height:1.14; letter-spacing:0; text-transform:none; max-width:20ch; }
.page-hero .article-lead{ max-width:640px; }
.article-meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); margin-top:22px; display:flex; gap:14px; flex-wrap:wrap; }
.article-meta .dot{ color:var(--fire-ink); }
.article{ max-width:760px; margin-inline:auto; }
.article-figure{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-bottom:44px; aspect-ratio:16/9; background:var(--black); }
.article-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-body > *{ margin-bottom:22px; }
.article-body > *:last-child{ margin-bottom:0; }
.article-body p{ font-size:16.5px; line-height:1.75; color:var(--text); }
.article-body h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.4vw,32px); letter-spacing:.2px; color:var(--heading); margin-top:14px; }
.article-body h3{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.3px; text-transform:uppercase; color:var(--heading); margin-top:8px; }
.article-body strong{ color:var(--heading); font-weight:700; }
.article-body ul{ padding-left:20px; display:flex; flex-direction:column; gap:11px; list-style:none; }
.article-body ul li{ position:relative; padding-left:22px; font-size:16px; line-height:1.7; color:var(--text); }
.article-body ul li::before{ content:""; position:absolute; left:0; top:11px; width:9px; height:9px; background:var(--fire); border-radius:2px; }
.article-foot{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line-strong); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.article-foot .back{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fire-ink); }

/* ---------- MD's message ---------- */
.md-split{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(40px,5.5vw,68px); align-items:start; }
.md-portrait{ position:sticky; top:104px; }
/* layered portrait: photo card + offset ember frame + corner tick */
.md-figure{ position:relative; margin:14px 18px 18px 14px; }
.md-figure::before{ /* offset ember frame behind the photo */
  content:""; position:absolute; top:16px; left:16px; right:-16px; bottom:-16px;
  border:2px solid var(--fire); border-radius:var(--radius); z-index:0; opacity:.9;
}
.md-figure::after{ /* corner tick, top-left */
  content:""; position:absolute; top:-12px; left:-12px; width:36px; height:36px;
  border-top:3px solid var(--fire); border-left:3px solid var(--fire); z-index:2;
}
.md-figure .detail-visual{ position:relative; z-index:1; margin:0; box-shadow:var(--shadow); }
.md-portrait .plate{ margin-top:30px; text-align:center; position:relative; padding-top:14px; }
.md-portrait .plate::before{ /* ember tick above the name, matching team cards */
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:32px; height:3px; background:var(--fire);
}
.md-portrait .plate b{ display:block; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.4px; text-transform:uppercase; color:var(--heading); }
.md-portrait .plate span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fire-ink); }
.md-message{ position:relative; }
.md-message::before{ /* oversized decorative quote mark */
  content:"\201C"; position:absolute; top:-46px; left:-10px; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:130px; line-height:1;
  color:var(--fire-ink); opacity:.16;
}
.md-message > *{ position:relative; }
.md-message .eyebrow{ margin-bottom:16px; }
.md-message .greeting{ font-family:var(--font-display); font-weight:700; font-size:clamp(21px,2.6vw,26px); letter-spacing:.2px; color:var(--heading); margin-bottom:22px; }
.md-signature{ margin-top:38px; padding-top:26px; border-top:1px solid var(--line-strong); }
.md-signature .sig-name{ font-family:var(--font-display); font-weight:800; font-size:25px; letter-spacing:.3px; color:var(--heading); }
.md-signature .sig-role{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); margin-top:7px; }

/* ---------- Footer ---------- */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:64px 0 32px; }
.footer .logo{ margin-bottom:18px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:48px; }
.footer p{ color:var(--text-2); font-size:14px; line-height:1.55; }
.footer h5{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); margin-bottom:18px; }
.footer ul{ display:flex; flex-direction:column; gap:10px; }
.footer ul a{ color:var(--text-2); font-size:14px; line-height:1.5; transition:color .25s ease; }
.footer .footer-address{ font-size:13px; line-height:1.5; }
.footer ul a:hover{ color:var(--fire-ink); }
.footer-bottom{
  border-top:1px solid var(--line); padding-top:26px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-2); letter-spacing:.04em;
}

/* ---------- Page hero (inner) ---------- */
.page-hero{
  padding-top:172px; padding-bottom:80px; position:relative; overflow:hidden;
  background:#0B0B0D url('../img/briquettes-bg-2.jpg') center 55%/cover no-repeat;
  border-top:2px solid var(--fire);
  /* dark video bg → force dark-mode tokens so text stays readable in light theme */
  --bg-card:#141417; --bg-card-2:#1A1A1E;
  --text:#FAFAFC; --text-2:#BDBBB6; --heading:#EDEDEF;
  --line:rgba(237,237,242,.10); --line-strong:rgba(237,237,242,.20);
  --fire-ink:var(--fire);
}
.page-hero > .container{ position:relative; z-index:2; }
/* stronger scrim than the homepage video hero — the still image's flames are
   brighter, so the headline + lead need extra contrast to stay readable */
.page-hero .hero-overlay{ background:rgba(9,9,11,.58); }
.page-hero h1{ font-size:clamp(34px, 6vw, 72px); }
.page-hero .lead{ margin-top:20px; }
.breadcrumb{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); margin-bottom:22px; display:flex; gap:10px; }
.breadcrumb a:hover{ color:var(--fire-ink); }

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:var(--wa-green); color:#fff; font-size:26px; box-shadow:0 10px 30px rgba(37,211,102,.35);
  transition:transform .3s var(--ease-out);
}
.wa-float svg{ width:28px; height:28px; fill:#fff; }
.wa-float:hover{ transform:scale(1.1) translateY(-3px); }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-visual{ order:-1; }
  .pack-frame{ width:min(320px,70vw); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .process, .process-3{ grid-template-columns:repeat(2,1fr); }
  .attr-band{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .detail-split{ grid-template-columns:1fr; gap:36px; }
  .md-split{ grid-template-columns:1fr; gap:44px; }
  .md-portrait{ position:static; max-width:360px; margin-inline:auto; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .quote-grid{ grid-template-columns:1fr 1fr; }
  /* 7 nav items don't fit between 720–1024px — switch to the burger early */
  .nav-links{
    position:fixed; inset:76px 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line-strong);
    box-shadow:0 32px 56px rgba(0,0,0,.35);
    padding:14px 24px 26px;
    opacity:0; visibility:hidden; transform:translateY(-14px); pointer-events:none;
    transition:opacity .3s ease, transform .38s var(--ease-out), visibility 0s .38s;
  }
  .nav.open .nav-links{
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
    transition:opacity .26s ease, transform .42s var(--ease-out);
  }
  .nav-links a{
    padding:15px 0; width:100%; border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(-10px);
    transition:opacity .3s ease, transform .35s var(--ease-out), color .25s ease;
  }
  .nav-links a:last-child{ border-bottom:none; }
  .nav.open .nav-links a{ opacity:1; transform:none; }
  .nav.open .nav-links a:nth-child(1){ transition-delay:.04s; }
  .nav.open .nav-links a:nth-child(2){ transition-delay:.08s; }
  .nav.open .nav-links a:nth-child(3){ transition-delay:.12s; }
  .nav.open .nav-links a:nth-child(4){ transition-delay:.16s; }
  .nav.open .nav-links a:nth-child(5){ transition-delay:.20s; }
  .nav.open .nav-links a:nth-child(6){ transition-delay:.24s; }
  .nav.open .nav-links a:nth-child(7){ transition-delay:.28s; }
  /* dim the page behind the open menu for clean separation */
  .nav::after{
    content:""; position:fixed; inset:0; z-index:-1;
    background:rgba(5,5,7,.62); opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .nav.open::after{ opacity:1; }
  .nav-burger{ display:flex; }
}
@media (max-width:720px){
  body{ font-size:15.5px; }
  .page-hero{ padding-top:132px; padding-bottom:56px; }
  .stats-band{ grid-template-columns:1fr 1fr; }
  .attr-band{ grid-template-columns:1fr 1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .grid-3, .grid-2, .quote-grid, .product-grid, .process, .process-3, .blog-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .hero-video{ display:none; } /* phones: poster bg only — save data & battery */
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  /* Stacked compare table → one clearly-grouped card per metric.
     Each value carries its product name (data-col, injected by main.js from
     the table's own hidden head row) so label ↔ value stays obvious. */
  .compare{ border:none; border-radius:0; overflow:visible; background:transparent; display:grid; gap:14px; }
  .section-video .compare{ background:transparent; }
  .compare-row{ grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-card); }
  .compare-row:last-child{ border-bottom:1px solid var(--line); }
  .section-video .compare-row{ background:rgba(14,14,17,.82); }
  .compare-row.head{ display:none; }
  .compare-row > div{ padding:12px 18px; }
  .compare-row .metric{
    background:var(--bg-card-2); color:var(--heading);
    font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    padding:10px 18px; border-bottom:1px solid var(--line);
  }
  .section-video .compare-row .metric{ background:rgba(255,255,255,.06); }
  .compare-row .them{ padding-top:12px; }
  .compare-row .us{ border-left:none; border-top:1px solid var(--line); background:transparent; }
  .compare-row .them::before, .compare-row .us::before{
    content:attr(data-col);
    display:block; margin-bottom:3px;
    font-family:var(--font-mono); font-size:10.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); opacity:.75;
  }
  .compare-row .us::before{ color:var(--fire-ink); opacity:1; }
  .compare.reveal .compare-row .us, .compare.reveal.in .compare-row .us{ border-left:none; }
  html[lang^="bn"] .compare-row .them::before,
  html[lang^="bn"] .compare-row .us::before{ font-size:12px; letter-spacing:.02em; }
  html[lang^="bn"] .compare-row .metric{ letter-spacing:.02em; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-specs .spec{ flex:1 1 45%; border-bottom:1px solid var(--line); }
}
@media (max-width:480px){
  .nav-actions .btn{ display:none; } /* WA float + hero CTAs cover the inquiry path */
  .attr-band{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .md-portrait{ max-width:300px; }
  /* Compact header so logo + lang switch + toggle + burger all fit on-screen
     (the burger was pushed past the right edge on ≤390px phones). */
  .nav .container{ width:calc(100% - 32px); }
  .nav-inner{ gap:8px; }
  .logo{ font-size:20px; gap:8px; letter-spacing:1px; }
  .logo-mark{ width:32px; height:32px; }
  .logo-mark svg{ width:18px; height:18px; }
  .nav-actions{ gap:8px; }
  .theme-toggle{ width:38px; height:38px; }
  .theme-toggle svg{ width:17px; height:17px; }
  .nav-burger{ width:36px; height:40px; }
  .lang-switch{ gap:4px; }
  .lang-switch__item{ padding:4px 2px; }
  .hero-badge{ font-size:10.5px; letter-spacing:.1em; padding:8px 14px; }
  .hero-coalbed{ height:64px; }
  .wa-float{ width:52px; height:52px; right:16px; bottom:16px; }
  .wa-float svg{ width:25px; height:25px; }
}

/* Very narrow phones (e.g. 320px foldables): shave the wordmark a touch more. */
@media (max-width:360px){
  .logo{ font-size:18px; letter-spacing:.5px; }
}

/* ============================================================
   WordPress integration & accessibility
   ============================================================ */

/* Accessible hiding (bbPress/WP standard). */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; padding:0; overflow:hidden;
  position:absolute !important; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--fire); color:#fff; clip:auto; clip-path:none;
  display:block; height:auto; width:auto; left:5px; top:5px; padding:12px 18px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  z-index:100000; border-radius:var(--radius); text-decoration:none;
}
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100000; }
.skip-link:focus{ left:5px; top:5px; }
#content{ display:block; }
#content:focus{ outline:none; }

/* Search form (used on 404 / search widget). */
.search-form{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.search-form input[type="search"]{
  flex:1 1 260px; min-width:0; background:var(--bg-2); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:14px 16px; font:inherit; font-size:15px; transition:border-color .25s ease;
}
.search-form input[type="search"]:focus{ border-color:var(--fire-ink); outline:none; }

/* Native Gutenberg alignment support inside page/post content. */
.article-body .alignwide,
.entry-content .alignwide{ margin-inline:calc(-1 * clamp(0px, 4vw, 60px)); max-width:calc(100% + 2 * clamp(0px, 4vw, 60px)); }
.article-body .alignfull,
.entry-content .alignfull{ margin-inline:calc(50% - 50vw); max-width:100vw; }
.article-body figure,
.entry-content figure{ margin-block:28px; }
.article-body figure img,
.entry-content figure img{ border-radius:var(--radius); }
.article-body figcaption,
.entry-content figcaption{ font-size:13.5px; color:var(--text-2); text-align:center; margin-top:10px; }
.article-body blockquote,
.entry-content blockquote{ border-left:3px solid var(--fire); padding:6px 0 6px 22px; margin-block:26px; font-size:18px; color:var(--heading); }
.wp-block-button__link{ /* inherit theme button look when patterns use core buttons */ }
.page-links{ margin-top:24px; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; }
.page-links a{ color:var(--fire-ink); }

/* Comments are intentionally not part of the article design; hide any stray output. */
.article-body .wp-block-comments{ display:none; }

/* Block-editor button styles → theme .btn look (patterns + core buttons). */
.wp-block-button.is-style-blackbolt-fire .wp-block-button__link,
.wp-block-button.is-style-blackbolt-ghost .wp-block-button__link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:16px 30px; border-radius:var(--radius); border:2px solid transparent;
  transition:transform .22s var(--ease-out), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.wp-block-button.is-style-blackbolt-fire .wp-block-button__link{ background:var(--fire); color:#fff; border-color:var(--fire); }
.wp-block-button.is-style-blackbolt-fire .wp-block-button__link:hover{ background:var(--fire-deep); border-color:var(--fire-deep); color:#fff; box-shadow:0 10px 30px rgba(232,83,26,.4); transform:translateY(-2px); }
.wp-block-button.is-style-blackbolt-ghost .wp-block-button__link{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.wp-block-button.is-style-blackbolt-ghost .wp-block-button__link:hover{ border-color:var(--fire-ink); color:var(--fire-ink); transform:translateY(-2px); }

/* Converted button rows (core/buttons carrying the design's container class). */
.wp-block-buttons.center-note{ justify-content:center; }
.wp-block-buttons.hero-cta{ gap:16px; margin-bottom:0; }
.cta-band .wp-block-buttons.hero-cta{ justify-content:center; }
/* neutralise the block editor's default button gap so ours controls it */
.wp-block-buttons.hero-cta, .wp-block-buttons.center-note{ --wp--style--block-gap:0; }

/* ---------- Language switcher (Polylang) ---------- */
.lang-switch{ display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em; }
.lang-switch__item{ color:var(--text-2); padding:4px 4px; border-radius:4px; transition:color .2s ease; }
.lang-switch__item.is-current{ color:var(--fire-ink); }
a.lang-switch__item:hover{ color:var(--fire-ink); }
.lang-switch__sep{ color:var(--line-strong); }
@media (max-width:480px){ .lang-switch{ font-size:11px; } }

/* ---------- Bangla typography system (html[lang^="bn"] only) ---------- */
/* Bengali glyphs are more intricate than Latin: they need slightly larger
   sizes, more leading, lighter bolds (700 smudges below ~16px) and near-zero
   tracking (no letter-case; wide tracking breaks glyph shaping). Everything
   here is scoped to the bn language — English typography is untouched. */

/* Base rhythm */
html[lang^="bn"] body{ font-size:17px; line-height:1.8; }
html[lang^="bn"] p{ line-height:1.85; }
html[lang^="bn"] .lead{ font-size:clamp(18px, 1.5vw, 20.5px); line-height:1.8; }

/* Display headings — Bengali matras/conjuncts clip at line-height:1 and
   negative tracking; open both up. The .hl clip window widens to match. */
html[lang^="bn"] .display{ line-height:1.22; letter-spacing:0; }
html[lang^="bn"] .hl{ padding:.2em 0; margin:-.2em 0; }

/* Buttons — bigger, semibold instead of bold, no wide tracking */
html[lang^="bn"] .btn{ font-size:15px; font-weight:600; letter-spacing:.01em; }
html[lang^="bn"] .filter-tabs button,
html[lang^="bn"] .filter-tabs a{ font-size:13.5px; letter-spacing:.02em; }

/* Navigation */
html[lang^="bn"] .nav-links a{ font-size:14.5px; letter-spacing:.02em; }

/* Small labels — bump size, 700→600, tighten tracking */
html[lang^="bn"] .eyebrow{ font-size:13.5px; font-weight:600; letter-spacing:.03em; }
html[lang^="bn"] .breadcrumb{ font-size:13px; letter-spacing:.02em; }
html[lang^="bn"] .marquee span{ letter-spacing:.02em; }
html[lang^="bn"] .spec .lbl{ font-size:12.5px; letter-spacing:.02em; }
html[lang^="bn"] .stat .lbl{ font-size:13px; letter-spacing:.02em; }
html[lang^="bn"] .pack-tag{ font-size:12.5px; font-weight:600; letter-spacing:.02em; }
html[lang^="bn"] .spec-badge{ font-size:13px; letter-spacing:.02em; }
html[lang^="bn"] .blog-cat{ font-size:12.5px; font-weight:600; letter-spacing:.03em; }
html[lang^="bn"] .blog-meta{ font-size:13px; }
html[lang^="bn"] .product-meta{ font-size:12.5px; letter-spacing:.01em; }
html[lang^="bn"] .team-info p{ font-size:12.5px; letter-spacing:.02em; }
html[lang^="bn"] .compare-row .metric{ font-size:13.5px; letter-spacing:.01em; }
html[lang^="bn"] .size-label{ font-size:13px; font-weight:600; letter-spacing:.03em; }
html[lang^="bn"] .article-meta{ font-size:13px; letter-spacing:.02em; }
html[lang^="bn"] .article-foot .back{ font-size:13.5px; font-weight:600; letter-spacing:.01em; }
html[lang^="bn"] .md-portrait .plate span,
html[lang^="bn"] .md-signature .sig-role{ font-size:12.5px; letter-spacing:.02em; }
html[lang^="bn"] .faq-group-title .n{ letter-spacing:.02em; }
html[lang^="bn"] .quote footer .who span{ font-size:12.5px; }
html[lang^="bn"] .pagination{ font-size:14px; }
html[lang^="bn"] .lang-switch{ letter-spacing:.04em; } /* EN/BN stays Latin */

/* Footer */
html[lang^="bn"] .footer h5{ font-size:13px; font-weight:600; letter-spacing:.04em; }
html[lang^="bn"] .footer p,
html[lang^="bn"] .footer ul a{ font-size:14px; line-height:1.6; }
html[lang^="bn"] .footer-bottom{ font-size:12.5px; letter-spacing:.02em; }

/* Forms */
html[lang^="bn"] .form label{ font-size:13px; font-weight:500; letter-spacing:.03em; }
html[lang^="bn"] .form input,
html[lang^="bn"] .form textarea,
html[lang^="bn"] .form select{ font-size:16px; }
html[lang^="bn"] .form-note{ font-size:14px; line-height:1.75; }

/* FAQ accordions */
html[lang^="bn"] .faq summary{ font-size:14px; font-weight:600; letter-spacing:.01em; line-height:1.6; }
html[lang^="bn"] .faq p{ font-size:15.5px; line-height:1.85; }

/* Mid-size bold headings — keep 700 (clamped Noto axis max) but no tracking */
html[lang^="bn"] .card h3,
html[lang^="bn"] .product-body h3,
html[lang^="bn"] .card-title,
html[lang^="bn"] .faq-group-title h3,
html[lang^="bn"] .step h4,
html[lang^="bn"] .article-body h3,
html[lang^="bn"] .md-portrait .plate b{ letter-spacing:.02em; }

/* Mobile — keep Bangla comfortable at small screens */
@media (max-width:1024px){
  html[lang^="bn"] .nav-links a{ font-size:16px; }
}
@media (max-width:480px){
  html[lang^="bn"] body{ font-size:16.5px; }
  html[lang^="bn"] .btn{ font-size:14.5px; padding:15px 26px; }
  html[lang^="bn"] .lead{ font-size:17px; }
}