/* ==========================================================================
   SABIIEX SHPK
   Pelet cilësor, ngrohtësi e qëndrueshme

   Art direction: light editorial. The page behaves like a printed product
   catalogue. Paper ground, hairline rules, photography set as captioned
   plates, with two dark anchors so the rhythm never goes flat.
   ========================================================================== */

/* ---------- 1. Semantic tokens ------------------------------------------- */
/* Components only ever reference --bg / --fg / --rule / --accent, so a
   section flips between paper and dark simply by carrying .dark            */

:root {
  --bg:         #FAF6EF;
  --bg-2:       #F3ECE0;
  --bg-3:       #EDE4D5;
  --fg:         #241A12;
  --fg-mid:     rgba(36, 26, 18, .72);
  --fg-low:     rgba(36, 26, 18, .46);
  --rule:       rgba(36, 26, 18, .14);
  --rule-2:     rgba(36, 26, 18, .28);
  --accent:     #A9702B;
  --accent-txt: #8A5A1E;
  --inv:        #FAF6EF;

  /* Fixed brand values, never flipped */
  --paper:      #FAF6EF;
  --paper-2:    #F3ECE0;
  --paper-3:    #EDE4D5;
  --ink:        #241A12;
  --bark:       #2A2018;
  --deep:       #100C08;
  --cream:      #EFE7D8;
  --ember:      #A9702B;
  --ember-lt:   #C89152;
  --ember-dp:   #7A4E19;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shell:  1380px;
  --gutter: clamp(20px, 5vw, 76px);
  --bay:    clamp(80px, 10.5vw, 164px);
  --head-h: 82px;

  --ease:    cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.66, 0, .18, 1);
}

.dark {
  --bg:         #100C08;
  --bg-2:       #191209;
  --bg-3:       #241A12;
  --fg:         #EFE7D8;
  --fg-mid:     rgba(239, 231, 216, .72);
  --fg-low:     rgba(239, 231, 216, .46);
  --rule:       rgba(239, 231, 216, .13);
  --rule-2:     rgba(239, 231, 216, .26);
  --accent:     #C89152;
  --accent-txt: #D9A96B;
  --inv:        #100C08;
  background: var(--bg);
  color: var(--fg);
}

@media (max-width: 860px) { :root { --head-h: 64px; } }

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 24px);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: clamp(15px, .4vw + 14px, 17px);
  font-weight: 350;
  line-height: 1.62;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--ember); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 1px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #C9BCA6; border: 3px solid var(--paper-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ember); }

/* ---------- 3. Type scale ------------------------------------------------ */
.display, h1, h2, h3,
.d-xxl, .d-xl, .d-lg, .d-md, .d-sm {
  font-family: var(--f-display);
  font-weight: 370;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  line-height: .99;
  letter-spacing: -.028em;
  text-wrap: balance;
  color: var(--fg);
}

.d-xxl { font-size: clamp(2.6rem, 5.4vw, 5.2rem); }
.d-xl  { font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
.d-lg  { font-size: clamp(1.95rem, 3.4vw, 3.1rem); }
.d-md  { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.06; }
.d-sm  { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.16; letter-spacing: -.022em; }

.it { font-style: italic; font-weight: 340; }
.acc { color: var(--accent-txt); }

.label {
  font-family: var(--f-sans);
  font-size: clamp(10px, .6vw, 11.5px);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg-low);
}
.label--acc { color: var(--accent-txt); }

.lede {
  font-size: clamp(1.05rem, 1.28vw, 1.3rem);
  line-height: 1.58;
  color: var(--fg-mid);
  font-weight: 350;
  letter-spacing: -.012em;
}
.muted { color: var(--fg-mid); }
.tiny  { font-size: .8rem; line-height: 1.55; color: var(--fg-low); letter-spacing: 0; }
.num   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- 4. Layout ---------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1620px; }

.bay { padding-block: var(--bay); position: relative; }
.bay--tight { padding-block: clamp(56px, 6.5vw, 100px); }
.bay--half-t { padding-top: clamp(48px, 5.5vw, 84px); }

section { background: var(--bg); color: var(--fg); }
.tone-2 { --bg: var(--paper-2); }
.tone-3 { --bg: var(--paper-3); }

/* Section head: a full width index rule, then the statement paired with its
   lede. Everything below a sechead shares the same left margin.            */
.sechead { padding-bottom: clamp(34px, 4.2vw, 62px); }
.sechead__rail {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px);
  padding-bottom: clamp(26px, 3.2vw, 48px);
}
.sechead__rail .r { flex: 1; height: 1px; background: var(--rule); transform-origin: left center; }
/* Section indices count themselves, so hiding a section (the pellet pile on
   phones) renumbers the rest instead of leaving a gap in the sequence.     */
main { counter-reset: sec; }
.sec-no::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); }
.sechead__body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(20px, 4vw, 76px);
  align-items: end;
}
.sechead__body .lede { padding-bottom: .4em; }
/* A section head carrying only the index rule needs far less air under it */
.sechead--bare { padding-bottom: clamp(22px, 2.6vw, 38px); }
.sechead--bare .sechead__rail { padding-bottom: 0; }
@media (max-width: 880px) {
  .sechead__body { grid-template-columns: 1fr; gap: 18px; }
  .sechead__body .lede { padding-bottom: 0; }
}

hr, .rule-x { height: 1px; background: var(--rule); border: 0; }

/* ---------- 5. Atmosphere ------------------------------------------------ */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .038; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.dark .grain, .grain { }

.glow {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(200, 145, 82, .20) 0%, rgba(200, 145, 82, 0) 68%);
}
.glow--a { width: min(58vw, 700px); aspect-ratio: 1; top: -16%; right: -10%; animation: drift 28s var(--ease-io) infinite alternate; }
.glow--b { width: min(46vw, 540px); aspect-ratio: 1; bottom: -18%; left: -8%; opacity: .7; animation: drift 34s var(--ease-io) infinite alternate-reverse; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-6%, 8%, 0) scale(1.15); } }

/* ---------- 6. Brand lockup ---------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 36px; height: 36px; flex: none; }
.brand__mark--lg { width: 78px; height: 78px; }
.brand__type { display: flex; flex-direction: column; gap: 3px; }

.wordmark {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1.04rem;
  letter-spacing: .285em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}
.wordmark i { font-style: normal; color: var(--accent); font-weight: 500; }
.wordmark--lg { font-size: clamp(1.35rem, 2.8vw, 2rem); letter-spacing: .3em; }

.brand__sub {
  font-size: 8.5px; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: var(--fg-low); line-height: 1;
}

/* ---------- 7. Buttons, links -------------------------------------------- */
.btn {
  --f: var(--fg);
  --f-h: var(--inv);
  --fill: var(--fg);
  --line: var(--rule-2);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px;
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--f);
  font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; line-height: 1;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color .42s var(--ease), border-color .42s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fill);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .52s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--f-h); border-color: var(--fill); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .42s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--solid { background: var(--fg); border-color: var(--fg); color: var(--inv); --fill: var(--accent); --f-h: var(--inv); }
.btn--ember { --fill: var(--ember); --line: var(--ember); color: var(--accent-txt); --f-h: var(--paper); }
.btn--sm { padding: 11px 18px; font-size: .72rem; }

.link-u {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .3s var(--ease), background-size .5s var(--ease);
}
.link-u:hover { color: var(--accent-txt); }
.link-u svg { width: 14px; height: 14px; transition: transform .42s var(--ease); }
.link-u:hover svg { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- 8. Header ---------------------------------------------------- */
.head {
  position: fixed; inset: 0 0 auto; z-index: 900;
  height: var(--head-h); display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease),
              height .5s var(--ease), transform .45s var(--ease);
}
.head.is-stuck {
  background: rgba(250, 246, 239, .86);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--rule);
  height: calc(var(--head-h) - 12px);
}
.head.is-hidden { transform: translateY(-102%); }
.head__in {
  width: 100%; max-width: 1620px; margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
}
.head__nav { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2.1vw, 32px); }

.navlink {
  position: relative;
  font-size: .77rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mid); padding: 6px 0;
  transition: color .32s var(--ease);
}
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--ember); transform: scaleX(0); transform-origin: right center;
  transition: transform .42s var(--ease);
}
.navlink:hover { color: var(--fg); }
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.navlink[aria-current="page"] { color: var(--accent-txt); }

.burger { display: none; width: 42px; height: 42px; position: relative; margin-right: -10px; }
.burger span {
  position: absolute; left: 10px; width: 22px; height: 1.5px; background: var(--fg);
  transition: transform .45s var(--ease), opacity .25s var(--ease), width .45s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; width: 15px; }
.burger span:nth-child(3) { top: 28px; }
.burger.is-on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-on span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.burger.is-on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 880;
  background: var(--paper);
  padding: calc(var(--head-h) + 26px) var(--gutter) 40px;
  display: flex; flex-direction: column; overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .78s var(--ease);
}
.drawer.is-open { clip-path: inset(0 0 0 0); }
.drawer__nav { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.drawer__nav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--f-display); font-size: clamp(1.8rem, 7.6vw, 2.5rem);
  font-weight: 360; letter-spacing: -.028em; line-height: 1;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), color .3s var(--ease);
  transition-delay: calc(var(--i) * 55ms + 110ms);
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a:hover { color: var(--accent-txt); }
.drawer__foot { margin-top: auto; padding-top: 36px; display: grid; gap: 16px; }

@media (max-width: 1080px) { .head__nav .navlink { display: none; } .burger { display: block; } }
@media (min-width: 1081px) { .drawer { display: none; } }
@media (max-width: 440px) { .brand__type { display: none; } }

/* ---------- 9. Hero ------------------------------------------------------ */
.hero { padding-top: calc(var(--head-h) + clamp(40px, 6vw, 92px)); position: relative; overflow: hidden; }
.hero__eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(22px, 3vw, 34px); }
.hero__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ember); flex: none;
  box-shadow: 0 0 0 4px rgba(169, 112, 43, .16);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(169, 112, 43, .16); }
  50%      { box-shadow: 0 0 0 9px rgba(169, 112, 43, 0); }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(30px, 5vw, 82px);
  align-items: center;
}
.hero__body > * + * { margin-top: clamp(22px, 2.6vw, 34px); }
.hero h1 { max-width: 13ch; }
.hero__lede { max-width: 46ch; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: clamp(34px, 6vw, 50px); }
  .hero h1 { max-width: 16ch; }
}

/* Spec strip beneath the hero */
.strip { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--rule); margin-top: clamp(46px, 6vw, 84px); }
.strip li { padding: 20px clamp(10px, 1.4vw, 22px) 20px 0; border-right: 1px solid var(--rule); display: grid; gap: 6px; }
.strip li:last-child { border-right: 0; }
.strip .k { font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-low); }
.strip .v { font-family: var(--f-display); font-size: clamp(1rem, 1.25vw, 1.22rem); font-weight: 400; letter-spacing: -.02em; color: var(--fg); }
@media (max-width: 1000px) {
  .strip { grid-template-columns: repeat(3, 1fr); }
  .strip li:nth-child(3n) { border-right: 0; }
  .strip li:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip li:nth-child(3n) { border-right: 1px solid var(--rule); }
  .strip li:nth-child(2n) { border-right: 0; }
  .strip li:nth-child(-n+4) { border-bottom: 1px solid var(--rule); }
}

/* Interior page hero */
.hero--sub { padding-bottom: clamp(40px, 5vw, 70px); }
.hero--sub h1 { max-width: 17ch; }
.crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.crumb a { color: var(--fg-low); transition: color .3s var(--ease); }
.crumb a:hover { color: var(--accent-txt); }
.crumb span { color: var(--fg-low); }

/* ---------- 10. Plates (framed media, catalogue style) ------------------- */
.plate { position: relative; }
.plate__frame {
  display: block;                 /* also used on <span> inside gallery buttons */
  position: relative; overflow: hidden; background: var(--bg-3);
  border-radius: 2px;
}
.plate__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--rule);
  border-radius: 2px;
}
/* <picture> is inline by default, which breaks height:100% on the image */
.plate__frame picture, .panel__img picture, .prod__media picture { display: block; width: 100%; height: 100%; }
.plate__frame img, .plate__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate--45 .plate__frame { aspect-ratio: 4 / 5; }
.plate--34 .plate__frame { aspect-ratio: 3 / 4; }
.plate--23 .plate__frame { aspect-ratio: 2 / 3; }
.plate--11 .plate__frame { aspect-ratio: 1 / 1; }
.plate--169 .plate__frame { aspect-ratio: 16 / 9; }

.plate__cap {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.plate__cap .fig { font-family: var(--f-display); font-size: .82rem; color: var(--accent-txt); flex: none; letter-spacing: .02em; }
.plate__cap .txt { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--fg-low); line-height: 1.5; }

/* Hero plate: a responsive still underneath, the clip fading in over it once
   it is actually worth downloading. Phones keep the still and stay light.  */
.hero-still { position: absolute; inset: 0; display: block; }
.hero-still img { width: 100%; height: 100%; object-fit: cover; }
[data-hero-video] {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s var(--ease);
}
[data-hero-video].is-on { opacity: 1; }

/* Shown only when the browser declined to start the clip on its own, which
   no page can prevent. The poster is already up, so this reads as an offer
   rather than an error.                                                    */
.hero-play {
  position: absolute; z-index: 3;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(250, 246, 239, .92);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgba(16, 12, 8, .34);
  display: grid; place-items: center;
  animation: playIn .5s var(--ease) both;
}
.hero-play span {
  width: 0; height: 0; margin-left: 4px;
  border-left: 17px solid var(--ink);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.hero-play:hover { background: #fff; }
@keyframes playIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.82); } }

/* Parallax host */
.par { will-change: transform; }


/* ---------- 12. Company block -------------------------------------------- */
.split2 {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(34px, 6vw, 92px); align-items: start;
}
@media (max-width: 940px) { .split2 { grid-template-columns: 1fr; } }

.pillars { border-top: 1px solid var(--rule); }
.pillars li {
  padding: clamp(20px, 2.5vw, 28px) 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 32px 1fr; gap: clamp(14px, 2vw, 24px); align-items: start;
}
.pillars .ico { width: 28px; height: 28px; color: var(--accent); }
.pillars h3 { font-family: var(--f-sans); font-size: 1rem; font-weight: 700; line-height: 1.35; margin-bottom: 5px; letter-spacing: -.005em; }
.pillars p { font-size: .92rem; line-height: 1.6; color: var(--fg-mid); }

.stamp {
  display: inline-flex; flex-direction: column; gap: 8px;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--rule); border-radius: 2px;
  background: rgba(169, 112, 43, .055);
  max-width: 34ch;
}
.stamp .big { font-family: var(--f-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: var(--accent-txt); letter-spacing: -.03em; }
.stamp .tiny { color: var(--fg-mid); font-size: .86rem; }

/* ---------- 13. Product split (dark anchor) ------------------------------ */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  transition: grid-template-columns .82s var(--ease);
}
.split.is-l { grid-template-columns: 1.26fr .74fr; }
.split.is-r { grid-template-columns: .74fr 1.26fr; }

.panel {
  position: relative; min-height: clamp(540px, 86vh, 880px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(30px, 3.4vw, 60px);
  overflow: hidden; isolation: isolate;
}
.panel + .panel { border-left: 1px solid rgba(239, 231, 216, .13); }
.panel--b { background: #1B1B1E; }
.panel--g { background: #1C1510; }

.panel__img { position: absolute; inset: 0; z-index: -3; }
.panel__img img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .40; filter: saturate(.85) contrast(1.04);
  transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 1.6s var(--ease), filter .9s var(--ease);
}
.panel__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, .95) 12%, rgba(10, 8, 6, .60) 48%, rgba(10, 8, 6, .16) 100%);
}
/* The grey line's photograph is backlit and bright, so it needs a heavier
   scrim than the white line's to sit at the same depth.                    */
.panel--g .panel__img img { opacity: .30; }
.panel--g:hover .panel__img img, .panel--g:focus-within .panel__img img { opacity: .48; }
.panel--g .panel__img::after {
  background: linear-gradient(to top, rgba(12, 9, 6, .96) 12%, rgba(14, 10, 7, .76) 48%, rgba(16, 11, 7, .44) 100%);
}
.panel:hover .panel__img img, .panel:focus-within .panel__img img {
  opacity: .60; transform: scale(1); filter: saturate(1) contrast(1.06);
}
.panel__light {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(224, 169, 97, .18), transparent 68%);
  opacity: 0; transition: opacity .55s var(--ease);
}
.panel:hover .panel__light { opacity: 1; }

.panel__tag {
  position: absolute; top: clamp(26px, 3vw, 46px);
  left: clamp(30px, 3.4vw, 60px); right: clamp(30px, 3.4vw, 60px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.panel__no { font-family: var(--f-display); font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1; color: rgba(239, 231, 216, .15); }
.panel__tag .label { color: rgba(239, 231, 216, .5); }

.panel__body { max-width: 44ch; position: relative; }
.panel__body > * + * { margin-top: 1.05rem; }
.panel h2 { line-height: .97; color: var(--cream); }
.panel p { color: rgba(239, 231, 216, .74); }
.panel__kicker { font-size: .8rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
.panel--b .panel__kicker { color: #CDD2D8; }
.panel--g .panel__kicker { color: #D9A96B; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: .71rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px; border: 1px solid rgba(239, 231, 216, .22); border-radius: 2px;
  color: rgba(239, 231, 216, .8); background: rgba(10, 8, 6, .3);
  backdrop-filter: blur(2px);
}
.panel--g .chips li { border-color: rgba(217, 169, 107, .34); color: #D9A96B; }

.panel .link-u { color: var(--cream); }
.panel .link-u:hover { color: #D9A96B; }

@media (max-width: 940px) {
  .split, .split.is-l, .split.is-r { grid-template-columns: 1fr; }
  .panel { min-height: 72svh; }
  .panel + .panel { border-left: 0; border-top: 1px solid rgba(239, 231, 216, .13); }
}

/* ---------- 14. Datasheet ------------------------------------------------ */
.sheet-wrap { overflow-x: auto; border-top: 1px solid var(--rule-2); }
.sheet-wrap table { min-width: 640px; }
.sheet thead th {
  text-align: left; padding: 22px clamp(10px, 1.4vw, 22px) 16px 0;
  vertical-align: bottom; border-bottom: 1px solid var(--rule-2);
}
.sheet thead th:first-child { width: 36%; }
.sheet .colname { font-family: var(--f-display); font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 400; letter-spacing: -.022em; line-height: 1.1; display: block; }
.sheet .colsub { display: block; margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--fg-low); }
.sheet .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: middle; }
.sw--b { background: #E3D9C4; box-shadow: 0 0 0 1px var(--rule-2); }
.sw--g { background: #7C6A55; box-shadow: 0 0 0 1px var(--rule-2); }

.sheet tbody td, .sheet tbody th {
  padding: 15px clamp(10px, 1.4vw, 22px) 15px 0;
  border-bottom: 1px solid var(--rule);
  font-size: .93rem; text-align: left; vertical-align: baseline;
}
.sheet tbody th { font-weight: 500; color: var(--fg-mid); }
.sheet tbody td { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.sheet tbody tr { transition: background-color .3s var(--ease); }
.sheet tbody tr:hover { background: rgba(169, 112, 43, .06); }

/* ---------- 15. Statistics ----------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.stats li { padding: clamp(26px, 3.2vw, 46px) clamp(14px, 2vw, 30px) clamp(26px, 3.2vw, 46px) 0; border-right: 1px solid var(--rule); }
.stats li:last-child { border-right: 0; }
.stats .fig {
  font-family: var(--f-display); font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  font-weight: 350; line-height: .94; letter-spacing: -.035em; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.stats .fig sup { font-size: .36em; vertical-align: super; color: var(--accent-txt); margin-left: 2px; letter-spacing: 0; }
.stats .cap { margin-top: 12px; font-size: .84rem; line-height: 1.45; color: var(--fg-mid); max-width: 23ch; }
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats li:nth-child(2n) { border-right: 0; }
  .stats li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } .stats li { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* ---------- 16. Process -------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.flow li { background: var(--bg); padding: clamp(24px, 2.6vw, 38px); position: relative; transition: background-color .5s var(--ease); }
.flow li:hover { background: var(--bg-2); }
.flow .step { font-family: var(--f-display); font-size: .95rem; color: var(--accent-txt); letter-spacing: .04em; }
.flow .ico { width: 28px; height: 28px; margin: clamp(24px, 2.8vw, 42px) 0 20px; color: var(--accent); }
.flow h3 { font-family: var(--f-sans); font-size: 1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.35; letter-spacing: -.005em; }
.flow p { font-size: .88rem; line-height: 1.58; color: var(--fg-mid); }
.flow li::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.flow li:hover::after { transform: scaleX(1); }
@media (max-width: 1000px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }

/* ---------- 17. Gallery -------------------------------------------------- */
.plates { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.2vw, 34px); align-items: start; }
.plates > *:nth-child(1) { grid-column: span 4; }
.plates > *:nth-child(2) { grid-column: span 5; margin-top: clamp(18px, 3vw, 46px); }
.plates > *:nth-child(3) { grid-column: span 3; margin-top: clamp(48px, 8.5vw, 136px); }
@media (max-width: 820px) {
  .plates { grid-template-columns: 1fr 1fr; }
  .plates > *:nth-child(1), .plates > *:nth-child(2) { grid-column: span 1; margin-top: 0; }
  .plates > *:nth-child(3) { grid-column: span 2; margin-top: 0; }
  .plates > *:nth-child(3) .plate__frame { aspect-ratio: 16 / 9; }
}

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(16px, 2vw, 30px); }
.gal-grid > button { display: block; width: 100%; text-align: left; }
.gal-grid .plate__frame { aspect-ratio: 4 / 5; }
.gal-grid > button:nth-child(4n+1) .plate__frame { aspect-ratio: 3 / 4; }
.gal-grid > button:nth-child(6n+3) .plate__frame { aspect-ratio: 1 / 1; }
.gal-grid img { transition: transform 1.1s var(--ease), filter .6s var(--ease); filter: saturate(.92); }
.gal-grid > button:hover img { transform: scale(1.045); filter: saturate(1.04); }
.gal-grid .zoom {
  position: absolute; inset: auto 14px 14px auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250, 246, 239, .9); backdrop-filter: blur(6px);
  color: var(--ink); box-shadow: 0 2px 14px rgba(36, 26, 18, .16);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gal-grid > button:hover .zoom { opacity: 1; transform: none; }
.gal-grid .zoom svg { width: 15px; height: 15px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button {
  font-size: .73rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 16px; border: 1px solid var(--rule); border-radius: 2px; color: var(--fg-mid);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.filters button:hover { color: var(--fg); border-color: var(--rule-2); }
.filters button.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Lightbox */
.lbox {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(16, 12, 8, .95); backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: clamp(16px, 4vw, 56px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.lbox.is-open { opacity: 1; visibility: visible; }
.lbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 2px; transform: scale(.96); transition: transform .55s var(--ease); }
.lbox.is-open img { transform: none; }
.lbox__cap { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vw, 32px); text-align: center; padding-inline: 60px; }
.lbox__cap span { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 231, 216, .7); }
.lbox__x, .lbox__nav {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgba(239, 231, 216, .24); border-radius: 50%; color: var(--cream);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.lbox__x:hover, .lbox__nav:hover { background: var(--ember); border-color: var(--ember); color: var(--paper); }
.lbox__x { top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px); }
.lbox__nav--p { left: clamp(10px, 2.4vw, 30px); top: 50%; margin-top: -24px; }
.lbox__nav--n { right: clamp(10px, 2.4vw, 30px); top: 50%; margin-top: -24px; }
.lbox svg { width: 17px; height: 17px; }

/* ---------- 18. Quote block (dark anchor) -------------------------------- */
.quote { position: relative; overflow: hidden; }
.quote__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(34px, 6vw, 88px); align-items: end; position: relative; z-index: 1; }
@media (max-width: 940px) { .quote__grid { grid-template-columns: 1fr; align-items: start; } }
.quote blockquote { max-width: 20ch; }

/* Scroll linked word fill: JS sets --p on the container, CSS does the rest */
.qfill .w {
  display: inline-block;
  opacity: clamp(.16, calc(var(--p, 1) * var(--n) - var(--i)), 1);
  transition: opacity .12s linear;
}
html:not(.js) .qfill .w { opacity: 1; }

.facts { display: grid; border-top: 1px solid var(--rule); }
.facts li { padding: 20px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; }
.facts .ico { width: 21px; height: 21px; color: var(--accent); margin-top: 4px; }
.facts strong { display: block; color: var(--fg); font-weight: 600; font-size: .97rem; margin-bottom: 3px; }
.facts p { font-size: .92rem; color: var(--fg-mid); line-height: 1.55; }

/* ---------- 19. CTA band ------------------------------------------------- */
.band {
  position: relative; overflow: hidden;
  background: linear-gradient(122deg, #7A4E19 0%, #A9702B 44%, #C89152 78%, #A9702B 100%);
  --fg: #17110A;
  --fg-mid: rgba(23, 17, 10, .78);
  --fg-low: rgba(23, 17, 10, .58);
  --rule: rgba(23, 17, 10, .22);
  --rule-2: rgba(23, 17, 10, .34);
  --inv: #F6EFE2;
  color: var(--fg);
}
.band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: .14;
}
.band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(26px, 5vw, 70px); align-items: end; }
@media (max-width: 860px) { .band__grid { grid-template-columns: 1fr; align-items: start; } }
.band p { max-width: 44ch; }
.band .btn { --f: #17110A; --line: rgba(23, 17, 10, .34); --fill: #17110A; --f-h: #F6EFE2; }

/* ---------- 20. Product detail ------------------------------------------- */
.prod { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(30px, 5vw, 76px); align-items: center; }
.prod--flip .prod__media { order: 2; }
@media (max-width: 940px) { .prod, .prod--flip { grid-template-columns: 1fr; } .prod--flip .prod__media { order: 0; } }
.prod__body > * + * { margin-top: 1.2rem; }
.prod__media .badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  padding: 9px 14px; border-radius: 2px;
  background: rgba(250, 246, 239, .92); backdrop-filter: blur(8px);
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}

.keyspecs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.keyspecs li { padding: 20px 14px 20px 0; border-right: 1px solid var(--rule); }
.keyspecs li:last-child { border-right: 0; }
.keyspecs .v { display: block; font-family: var(--f-display); font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1; color: var(--accent-txt); letter-spacing: -.03em; }
.keyspecs .k { display: block; margin-top: 9px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-low); }
@media (max-width: 520px) { .keyspecs { grid-template-columns: 1fr 1fr; } .keyspecs li:nth-child(2n) { border-right: 0; } }

.ticks { display: grid; gap: 11px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 13px; align-items: start; font-size: .94rem; color: var(--fg-mid); }
.ticks svg { width: 16px; height: 16px; color: var(--accent); margin-top: 4px; flex: none; }

.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.packs li { background: var(--bg); padding: clamp(24px, 2.8vw, 38px); transition: background-color .45s var(--ease); }
.packs li:hover { background: var(--bg-2); }
.packs .ico { width: 32px; height: 32px; color: var(--accent); margin-bottom: 22px; }
.packs h3 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 420; letter-spacing: -.025em; margin-bottom: 8px; }
.packs p { font-size: .89rem; color: var(--fg-mid); line-height: 1.58; }
.packs dl { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); display: grid; gap: 7px; }
.packs dl div { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; }
.packs dt { color: var(--fg-low); }
.packs dd { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .packs { grid-template-columns: 1fr; } }

.vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.vals li { padding: clamp(26px, 3vw, 38px); border: 1px solid var(--rule); border-radius: 2px; background: var(--bg-2); transition: border-color .45s var(--ease), transform .55s var(--ease); }
.vals li:hover { border-color: rgba(169, 112, 43, .42); transform: translateY(-4px); }
.vals .ico { width: 28px; height: 28px; color: var(--accent); margin-bottom: 24px; }
.vals h3 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 420; letter-spacing: -.025em; margin-bottom: 10px; }
.vals p { font-size: .91rem; color: var(--fg-mid); line-height: 1.6; }
@media (max-width: 900px) { .vals { grid-template-columns: 1fr; } }

.tl { border-top: 1px solid var(--rule); }
.tl li { display: grid; grid-template-columns: 120px 1fr; gap: clamp(16px, 3vw, 46px); padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.tl .yr { font-family: var(--f-display); font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1; color: var(--accent-txt); letter-spacing: -.03em; }
.tl h3 { font-family: var(--f-sans); font-size: 1.02rem; font-weight: 700; margin-bottom: 7px; }
.tl p { font-size: .93rem; color: var(--fg-mid); max-width: 62ch; }
@media (max-width: 680px) { .tl li { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- 21. Forms ---------------------------------------------------- */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 9px; position: relative; }
.field label { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-low); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--rule-2);
  padding: 13px 0; font-size: 1rem; font-weight: 400; color: var(--fg);
  border-radius: 0; appearance: none;
  transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 116px; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A9702B' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
  padding-right: 26px; cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-low); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ember); }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-bottom-color: #B4482C; }
.field__err { font-size: 11px; color: #A63F24; letter-spacing: .02em; display: none; }
.field.is-bad .field__err { display: block; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.form__note { font-size: 12px; line-height: 1.6; color: var(--fg-low); }
.form__msg { font-size: .92rem; padding: 14px 16px; border-radius: 2px; display: none; }
.form__msg.is-ok { display: block; background: rgba(94, 128, 78, .1); border: 1px solid rgba(94, 128, 78, .34); color: #4A6B3B; }
.form__msg.is-err { display: block; background: rgba(180, 72, 44, .08); border: 1px solid rgba(180, 72, 44, .32); color: #A63F24; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.infocard { border: 1px solid var(--rule); border-radius: 2px; background: var(--bg-2); }
.infocard > * { padding: clamp(22px, 2.6vw, 30px); border-bottom: 1px solid var(--rule); }
.infocard > *:last-child { border-bottom: 0; }
.infocard a.big { font-family: var(--f-display); font-size: clamp(1.12rem, 1.8vw, 1.5rem); letter-spacing: -.022em; color: var(--fg); display: inline-block; margin-top: 8px; transition: color .3s var(--ease); word-break: break-word; }
.infocard a.big:hover { color: var(--accent-txt); }
.infocard address { font-style: normal; margin-top: 8px; color: var(--fg-mid); line-height: 1.6; }

.acco { border-top: 1px solid var(--rule); }
.acco__item { border-bottom: 1px solid var(--rule); }
.acco__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 0; text-align: left;
  font-family: var(--f-display); font-size: clamp(1.02rem, 1.45vw, 1.3rem);
  font-weight: 400; letter-spacing: -.022em; line-height: 1.28; color: var(--fg);
  transition: color .3s var(--ease);
}
.acco__btn:hover { color: var(--accent-txt); }
.acco__sign { flex: none; width: 22px; height: 22px; position: relative; margin-top: 5px; }
.acco__sign::before, .acco__sign::after {
  content: ""; position: absolute; background: var(--ember); left: 50%; top: 50%;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.acco__sign::before { width: 15px; height: 1.5px; transform: translate(-50%, -50%); }
.acco__sign::after { width: 1.5px; height: 15px; transform: translate(-50%, -50%); }
.acco__item.is-open .acco__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acco__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .58s var(--ease); }
.acco__item.is-open .acco__panel { grid-template-rows: 1fr; }
.acco__panel > div { overflow: hidden; }
.acco__panel p { padding-bottom: 26px; max-width: 62ch; color: var(--fg-mid); font-size: .94rem; }

/* ---------- 22. Footer --------------------------------------------------- */
.foot { background: var(--deep); position: relative; overflow: hidden; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .85fr)); gap: clamp(28px, 4vw, 58px); padding-block: clamp(54px, 7vw, 92px) clamp(38px, 5vw, 62px); }
@media (max-width: 1000px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot__top { grid-template-columns: 1fr; } }
.foot__brand p { margin-top: 22px; max-width: 34ch; color: var(--fg-mid); font-size: .92rem; }
.foot h4 { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-low); margin-bottom: 20px; }
.foot ul { display: grid; gap: 12px; }
.foot ul a, .foot address a { font-size: .92rem; color: var(--fg-mid); transition: color .3s var(--ease); }
.foot ul a:hover, .foot address a:hover { color: var(--accent-txt); }
.foot address { font-style: normal; color: var(--fg-mid); font-size: .92rem; line-height: 1.7; }
.foot__bar { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; padding-block: 24px; border-top: 1px solid var(--rule); }
.foot__bar p, .foot__bar a { font-size: 12px; color: var(--fg-low); letter-spacing: .02em; }
.foot__bar a:hover { color: var(--accent-txt); }
.socials { display: flex; gap: 9px; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 2px; color: var(--fg-mid); transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); }
.socials a:hover { color: var(--deep); background: var(--ember); border-color: var(--ember); }
.socials svg { width: 16px; height: 16px; }

.totop {
  position: fixed; right: clamp(16px, 2.4vw, 30px); bottom: clamp(16px, 2.4vw, 30px); z-index: 800;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--rule-2); border-radius: 50%;
  background: rgba(250, 246, 239, .86); backdrop-filter: blur(10px);
  color: var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s,
              background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  box-shadow: 0 2px 18px rgba(36, 26, 18, .1);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.totop svg { width: 15px; height: 15px; }

/* ---------- 23. Intro curtain -------------------------------------------- */
.intro {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--paper);
  display: grid; place-items: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-io);
}
.intro.is-out { clip-path: inset(0 0 100% 0); }
.intro.is-done { display: none; }
.intro__in { display: grid; justify-items: center; gap: 22px; }
.intro__in .brand__mark { animation: introMark 1.1s var(--ease) both; }
.intro__in .wordmark { animation: introWord 1s var(--ease) .12s both; }
.intro__bar { width: 168px; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.intro__bar::after {
  content: ""; position: absolute; inset: 0; background: var(--ember);
  transform: scaleX(0); transform-origin: left center;
  animation: introBar 1.05s var(--ease-io) .05s both;
}
@keyframes introMark { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes introWord { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .3em; } }
@keyframes introBar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 23b. Live pellet pile ---------------------------------------- */
.pile { position: relative; overflow: hidden; }
.pile__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 60px); align-items: end;
  padding-bottom: clamp(26px, 3.4vw, 44px);
}
@media (max-width: 780px) { .pile__head { grid-template-columns: 1fr; align-items: start; gap: 22px; } }
.pile__hint { display: flex; align-items: center; gap: 10px; }
.pile__hint .puck {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 1px solid var(--rule-2); display: grid; place-items: center;
}
.pile__hint .puck::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: nudge 3.2s var(--ease-io) infinite;
}
@keyframes nudge { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }

.pile__stage {
  position: relative;
  height: clamp(290px, 40vh, 440px);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200, 145, 82, .10), rgba(0, 0, 0, 0) 60%),
    var(--bg-2);
  overflow: hidden;
  cursor: crosshair;
}
.pile__stage canvas { display: block; width: 100%; height: 100%; }
.pile__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-2) 18%, var(--rule-2) 82%, transparent);
}
/* The pile is a pointer toy. On a phone it is a heavy canvas that cannot be
   played with properly, so the whole section goes.                         */
@media (max-width: 699px) { .pile { display: none; } }

/* Clipping a playing video to a rounded rectangle stops iOS handing it to a
   straightforward compositing path and makes it mask every frame instead.
   At 2px the corner is invisible anyway, so phones lose nothing. The inset
   hairline goes too: one less layer stacked over the clip.                 */
@media (max-width: 699px) {
  .hero .plate__frame { border-radius: 0; }
  .hero .plate__frame::after { display: none; }
  .par { will-change: auto; }
}

.pile__foot {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
  margin-top: 16px;
}

/* ---------- 23c. Embers -------------------------------------------------- */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.embers b {
  position: absolute;
  bottom: -12px;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: #E8B26A;
  opacity: 0;
  box-shadow: 0 0 var(--g) rgba(226, 171, 97, .85);
  animation: rise var(--dur) linear var(--del) infinite;
  will-change: transform, opacity;
}
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: var(--o); }
  50%  { transform: translate3d(var(--sway), -46%, 0) scale(1); }
  78%  { opacity: var(--o); }
  100% { transform: translate3d(calc(var(--sway) * -.6), -104%, 0) scale(.4); opacity: 0; }
}

/* ---------- 23d. Burning scroll fuse ------------------------------------- */
.fuse {
  position: fixed; z-index: 850; pointer-events: none;
  --p: 0;
}
/* desktop: hairline down the right edge */
.fuse__track {
  position: absolute; inset: 0;
  background: rgba(36, 26, 18, .13);
}
.fuse__burnt {
  position: absolute;
  background: linear-gradient(to bottom, #2A2018, #6B4B22 70%, #A9702B);
}
.fuse__head {
  position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: #F0B463;
  box-shadow: 0 0 8px 2px rgba(226, 171, 97, .9), 0 0 20px 6px rgba(200, 120, 40, .45);
}
.fuse__head::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: rgba(240, 180, 99, .3);
  animation: fuseGlow 1.4s ease-in-out infinite;
}
@keyframes fuseGlow { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.7); opacity: 0; } }

@media (min-width: 861px) {
  .fuse { top: 0; bottom: 0; right: 14px; width: 2px; }
  .fuse__burnt { top: 0; left: 0; right: 0; height: calc(var(--p) * 100%); }
  .fuse__head { left: 50%; margin-left: -3.5px; top: calc(var(--p) * 100%); margin-top: -3.5px; }
}
@media (max-width: 860px) {
  .fuse { left: 0; right: 0; top: var(--head-h); height: 2px; transition: top .5s var(--ease); }
  .head.is-stuck ~ .fuse { top: calc(var(--head-h) - 12px); }
  .fuse__burnt { top: 0; bottom: 0; left: 0; width: calc(var(--p) * 100%);
                 background: linear-gradient(to right, #2A2018, #6B4B22 70%, #A9702B); }
  .fuse__head { top: 50%; margin-top: -3.5px; left: calc(var(--p) * 100%); margin-left: -3.5px; }
}

/* ---------- 24. Reveal motion -------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .95s var(--ease);
  transition-delay: calc(var(--d, 0) * 85ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translateX(-24px); }
.js [data-reveal="scale"] { transform: scale(.975); }

.ln { display: block; overflow: hidden; }
.ln > i {
  display: block; font-style: inherit;
  transform: translateY(104%);
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--d, 0) * 95ms);
}
.js .is-in .ln > i, .js .ln.is-in > i { transform: none; }
html:not(.js) .ln > i { transform: none; }

.js .draw { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease); }
.js .draw.is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ln > i { transform: none !important; }
  .js .draw { transform: none !important; }
  .qfill .w { opacity: 1 !important; }
  .par { transform: none !important; }
  .glow { animation: none; }
  .intro { display: none; }
  .embers, .fuse { display: none; }
  .pile__hint .puck::after { animation: none; }
}

/* ---------- 24b. Performance and touch ----------------------------------- */
/* The grain layer is a fixed, blended, full-screen surface: cheap on a
   desktop GPU, a real scroll cost on a mid-range phone. Drop it there.     */
@media (max-width: 700px) {
  .grain { display: none; }
  .head.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(250, 246, 239, .97); }
}

/* Skip style and layout work for sections still far below the fold */
@media (min-width: 700px) {
  .bay { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  .hero, .pile { content-visibility: visible; }
}

/* ---- Phones: nothing animates, nothing composites, while you scroll -----
   Every rule here exists because iOS re-rasterises or re-composites the
   layer in question on each frame, which competes with video decode.      */
@media (max-width: 699px) {
  /* A 700px element carrying blur(90px) and an animated transform is a
     large blurred layer being redrawn continuously. Keep the warm wash,
     drop the blur and the movement.                                       */
  .glow { filter: none; animation: none; opacity: .5; }
  .glow--a, .glow--b { animation: none; }

  /* The fixed header must not animate its own box mid-scroll */
  .head { transition: background-color .3s var(--ease), border-color .3s var(--ease); }
  .head.is-stuck { height: var(--head-h); }
  .head.is-hidden { transform: none; }

  /* The quote reads at full strength instead of being scrubbed by scroll */
  .qfill .w { opacity: 1 !important; transition: none; }

  /* No blurred shadows painting per frame */
  .embers { display: none; }
}

/* Comfortable touch targets */
@media (pointer: coarse) {
  .filters button { padding: 13px 18px; }
  .socials a { width: 44px; height: 44px; }
  .totop { width: 52px; height: 52px; }
  .navlink, .link-u { padding-block: 10px; }
  .lbox__x, .lbox__nav { width: 52px; height: 52px; }
}

/* Notched phones */
@supports (padding: max(0px)) {
  .head__in, .drawer { padding-left: max(var(--gutter), env(safe-area-inset-left));
                       padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .drawer { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
  .totop { bottom: max(clamp(16px, 2.4vw, 30px), env(safe-area-inset-bottom));
           right: max(clamp(16px, 2.4vw, 30px), env(safe-area-inset-right)); }
}

/* Very narrow phones */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .btn { padding: 14px 18px; font-size: .74rem; }
  .strip li { min-width: 0; }
}

/* ---------- 25. Utilities ------------------------------------------------ */
.stack > * + * { margin-top: var(--gap, 1.1rem); }
.stack-lg > * + * { margin-top: clamp(1.4rem, 2.2vw, 2rem); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rel { position: relative; z-index: 1; }
.mt-a { margin-top: auto; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 9999;
  background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: 2px;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: top .3s var(--ease);
}
.skip:focus { top: 12px; }