/* Layout: dark furnace stages (hero, producer track, producer heroes) pinned between white paper sections;
   red marks the brand, molten orange appears only where something is hot. Single deliberate look, independent of the viewer's theme. */
:root {
  --ink: #141012;          /* furnace black */
  --graphite: #221d1f;     /* cooled metal */
  --paper: #ffffff;        /* site's white content ground */
  --mist: #f3f1f1;         /* alternate ground, warm-neutral toward the red */
  --red: #d2343a;          /* Finnfjord International logo red */
  --red-deep: #a9262c;
  --molten: #ff7a1f;       /* heat only */
  --text: #1d191b;
  --muted: #5d5557;
  --on-dark: #f4efee;
  --on-dark-muted: #b9aeae;
  --line: #e2dddd;
  --line-dark: #3a3234;

  --font: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --stencil: "Saira Stencil One", "Libre Franklin", Impact, "Arial Black", sans-serif;  /* the grade markings stencilled on big bags */
  --grain-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cut: 12px;            /* chamfer: corners are cut like steel plate, never rounded */

  --t-display: clamp(2.5rem, 6.6vw, 6.4rem);
  --t-h2: clamp(2rem, 4.4vw, 3.8rem);
  --t-statement: clamp(1.55rem, 3.3vw, 2.9rem);
  --t-h3: clamp(1.25rem, 1.9vw, 1.6rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-label: .75rem;

  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --maxw: 1200px;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.65;
  overflow-x: clip;
}
img, canvas { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--molten); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 96px); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
@media (min-width: 900px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }

.eyebrow {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--muted);
}
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
p { margin: 0; }

/* ---------- top progress + nav ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .35s ease, box-shadow .35s ease, color .35s ease;
  color: var(--on-dark);
}
.nav-in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav.solid { background: rgba(255, 255, 255, .94); color: var(--text); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.nav.clear-red .nav-cta { background: #fff; color: var(--red); }
.nav.on-dark-solid { background: rgba(20, 16, 18, .9); color: var(--on-dark); box-shadow: 0 1px 0 var(--line-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.lockup { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; background: var(--red); padding: 7px 12px 6px; text-decoration: none; color: #fff; line-height: 1; flex: none; }
.lockup img { width: 118px; height: auto; }
.lockup span { font-size: 11.5px; font-weight: 400; letter-spacing: .01em; padding-left: 25px; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; text-decoration: none; font-size: .9rem; font-weight: 500; padding: 10px 12px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--molten)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links .nav-cta {
  background: var(--red) var(--grain-on-dark); color: #fff; padding-inline: 18px; margin-left: 8px;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.nav-links .nav-cta::after { display: none; }
.nav-links .nav-cta:hover { background-color: var(--red-deep); }
.menu-btn {
  display: none; font: inherit; font-size: .9rem; font-weight: 600; color: inherit; background: transparent;
  border: 1.5px solid currentColor; min-height: 44px; padding: 0 18px; cursor: pointer; font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav-links {
    position: fixed; inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--ink); color: var(--on-dark);
    padding: 8px var(--gut-r) 20px var(--gut-l); transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { border-radius: 0; border-bottom: 1px solid var(--line-dark); font-size: 1.15rem; padding: 14px 4px; }
  .nav-links .nav-cta { margin: 14px 0 0; justify-content: center; border: 0; }
  .nav-links a::after { display: none; }
}

/* ---------- reveal primitives (visible by default; JS lowers --r only for content below the fold) ---------- */
[data-reveal] { opacity: calc(.08 + .92 * var(--r, 1)); transform: translate3d(0, calc((1 - var(--r, 1)) * 40px), 0); will-change: opacity, transform; }
.words .w { transition: opacity .25s linear; }

/* ---------- HERO (home) ---------- */
.hero { position: relative; height: 230vh; background: var(--ink); color: var(--on-dark); }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.furnace, .embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.furnace { background: radial-gradient(120% 90% at 70% 90%, #ff7a1f 0%, #a9262c 30%, #2a1210 62%, #141012 100%); }
.embers { pointer-events: none; mix-blend-mode: screen; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 10, 11, .82) 0%, rgba(14, 10, 11, .55) 38%, rgba(14, 10, 11, 0) 70%), linear-gradient(0deg, rgba(14, 10, 11, .55), rgba(14, 10, 11, 0) 35%); }
.hero-grid {
  position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: 32px;
  padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(40px, 9vh, 96px);
}
.hero-copy { display: grid; gap: 22px; max-width: 40rem; will-change: transform, opacity; }
.hero-copy .eyebrow { color: #f0b9a8; }
.hero h1 { font-size: var(--t-display); letter-spacing: -.04em; line-height: .94; }
.hero h1 em { font-style: normal; color: var(--molten); }
.hero-sub { font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--on-dark-muted); max-width: 34rem; }
.hero-rock { margin: 0; align-self: center; justify-self: center; width: min(100%, 520px); position: relative; }
.hero-rock canvas { width: 100%; height: auto; will-change: transform; filter: drop-shadow(0 0 calc(var(--heat, 1) * 60px) rgba(255, 110, 30, calc(var(--heat, 1) * .75))) drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.hero-rock figcaption { margin-top: 14px; text-align: center; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }

.gauge { position: absolute; right: var(--gut-r); top: calc(var(--nav-h) + 28px + env(safe-area-inset-top, 0px)); display: grid; gap: 6px; justify-items: end; font-family: var(--mono); color: var(--on-dark); }
.gauge-label { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.gauge-value { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gauge-bar { width: 160px; height: 3px; background: rgba(255, 255, 255, .15); }
.gauge-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--molten), #ffd38a); transform-origin: 0 50%; }
@media (min-width: 900px) { .gauge { right: max(48px, env(safe-area-inset-right, 0px)); } }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); display: grid; justify-items: center; gap: 8px; }
.scroll-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--on-dark-muted), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: end; padding-top: calc(var(--nav-h) + 64px); padding-bottom: 32px; gap: 12px; }
  .hero-rock { order: -1; width: min(50vw, 240px, 30svh); align-self: center; }
  .hero-rock figcaption { display: none; }
  .hero-copy { gap: 16px; }
  .hero-sub { font-size: .98rem; }
  .hero-shade { background: linear-gradient(0deg, rgba(14, 10, 11, .9) 0%, rgba(14, 10, 11, .55) 45%, rgba(14, 10, 11, .1) 100%); }
  .gauge { top: calc(var(--nav-h) + 14px + env(safe-area-inset-top, 0px)); gap: 2px; }
  .gauge-value { font-size: 1.35rem; }
  .gauge-bar { width: 96px; }
  .scroll-cue { display: none; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .hero-sub { display: none; }
  .hero-grid { padding-top: calc(var(--nav-h) + 52px); }
  .hero-rock { width: min(50vw, 22svh); }
}

/* ---------- ABOUT ---------- */
.about { padding-block: clamp(96px, 16vh, 180px) clamp(72px, 12vh, 140px); }
.about .eyebrow { margin-bottom: 28px; }
.statement { font-size: var(--t-statement); font-weight: 600; line-height: 1.18; letter-spacing: -.022em; max-width: 26ch; text-wrap: pretty; }
.statement.wide { max-width: 30ch; }
.words .w { opacity: var(--wo, 1); }
.pillars { margin-top: clamp(64px, 10vh, 120px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.pillar { padding: 28px 28px 8px 0; display: grid; gap: 12px; align-content: start; }
.pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--line); }
.pillar h3 { font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.15; }
.pillar p { color: var(--muted); max-width: 32ch; }
.pillar svg { width: 40px; height: 40px; color: var(--red); }
@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- PRODUCERS TRACK ---------- */
.producers { background: var(--ink) var(--grain-on-dark); color: var(--on-dark); }
.producers-head { padding-block: clamp(80px, 12vh, 140px) 48px; display: grid; gap: 20px; }
.producers-head .eyebrow { color: #f0b9a8; }
.producers-head h2 { font-size: var(--t-h2); max-width: 18ch; }
.track-pin { position: relative; }
.track-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1000px; overflow: hidden; }
.track { display: flex; height: 100%; width: 300%; will-change: transform; touch-action: pan-y; }
.pcard { position: relative; flex: 0 0 calc(100% / 3); height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.pcard .ff-melt { height: 100%; }
.pcard-copy { display: grid; align-content: center; gap: 22px; padding: calc(var(--nav-h) + 24px) clamp(24px, 5vw, 80px) 72px; background: var(--ink) var(--grain-on-dark); }
.pcard-copy .eyebrow { color: #f0b9a8; }
.pcard-copy h3 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); letter-spacing: -.04em; }
.pcard-copy > p { color: var(--on-dark-muted); max-width: 38ch; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line-dark); }
.figs div { padding: 16px 16px 4px 0; }
.figs div + div { padding-left: 16px; border-left: 1px solid var(--line-dark); }
.figs dt { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.figs dd { margin: 4px 0 0; font-family: var(--stencil); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 400; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 24px 0 22px;
  background: var(--red) var(--grain-on-dark); color: #fff; text-decoration: none; justify-self: start;
  font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: color .3s, gap .3s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #ffcf7a, var(--molten) 55%, var(--red) 100%);
  transform: translateX(-102%); transition: transform .5s var(--ease);
}
.btn:hover { color: var(--ink); gap: 20px; }
.btn:hover::before { transform: none; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.btn.ghost { background: transparent; color: inherit; clip-path: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.ghost::before { background: currentColor; opacity: .12; }
.btn.ghost:hover { color: inherit; }
.btn.ghost:focus-visible { outline-color: currentColor; }
.btn svg { width: 18px; height: 18px; }
.track-ui {
  position: absolute; z-index: 3; bottom: 20px; right: clamp(24px, 5vw, 80px);
  width: calc(100% * 4 / 9 - 2 * clamp(24px, 5vw, 80px)); display: flex; align-items: flex-end; gap: 14px;
}
.track-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.track-tabs button {
  font: inherit; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; text-align: left;
  color: var(--on-dark-muted); background: none; border: 0; padding: 8px 0 0; min-height: 44px; cursor: pointer;
  display: grid; gap: 8px; align-content: end;
}
.track-tabs button:hover, .track-tabs button[aria-current="true"] { color: var(--on-dark); }
.tbar { display: block; height: 2px; background: var(--line-dark); }
.tbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--molten)); transform-origin: 0 50%; transform: scaleX(0); }
.track-pause {
  font: inherit; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark); background: transparent; border: 1px solid #4a4144; min-height: 44px; min-width: 72px; padding: 0 12px; cursor: pointer;
}
.track-pause:hover { border-color: var(--on-dark-muted); }
@media (max-width: 860px) {
  .track-ui { left: var(--gut-l); right: var(--gut-r); width: auto; bottom: 12px; }
}
@media (max-width: 860px) {
  .pcard { grid-template-columns: 1fr; grid-template-rows: minmax(0, 46%) minmax(0, 1fr); }
  .pcard-copy { padding: 22px var(--gut-r) 76px var(--gut-l); gap: 14px; align-content: start; }
  .pcard-copy h3 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .pcard-copy > p { font-size: .98rem; }
  .figs dd { font-size: 1.35rem; }
}

/* short producer chapters on the home: one screen each, the same card as the automatic sequence */
.chapter { background: var(--ink) var(--grain-on-dark); color: var(--on-dark); }
.chapter .pcard { flex: none; height: 100vh; height: 100svh; min-height: 560px; max-height: 980px; }
.chapter .pcard .ff-melt { cursor: pointer; }
.next.slim { padding-block: clamp(26px, 4.5vh, 44px); }
.next.slim .eyebrow { margin-bottom: 8px; }
.next.slim .next-title { font-size: clamp(1.8rem, 4vw, 3.2rem); }
@media (max-width: 860px) { .chapter .pcard .pcard-copy { padding-bottom: 40px; } }

/* melt canvas (shared with the live banners' engine) */
.ff-melt { position: relative; overflow: hidden; background: var(--bgc, #1b1617); }
.ff-melt canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.ff-melt.ff-live canvas { opacity: 1; }
.ff-melt.ff-in-panel canvas { object-fit: cover; }
.ff-melt .ff-fallback { position: absolute; left: 50%; top: 50%; width: min(56%, 420px); transform: translate(-50%, -50%); }
.ff-melt.ff-live .ff-fallback { visibility: hidden; }

/* ---------- MARQUEE ---------- */
.marquee { background: var(--paper); border-block: 1px solid var(--line); overflow: hidden; padding-block: 22px; }
.marquee { background: var(--paper) var(--grain-on-light); }
.marquee-row { display: flex; gap: 56px; white-space: nowrap; width: max-content; will-change: transform; font-family: var(--stencil); font-size: clamp(2.2rem, 6vw, 5.2rem); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.marquee-row span { color: var(--text); }
.marquee-row span:nth-child(3n+2) { color: var(--red); }

/* ---------- PRODUCTS ---------- */
.products { padding-block: clamp(96px, 14vh, 160px); background: var(--paper); }
.products-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: 56px; }
.products-head h2 { font-size: var(--t-h2); max-width: 14ch; }
.products-head p { color: var(--muted); max-width: 44ch; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile {
  position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 18px; min-height: 230px; padding: 18px 18px 16px;
  color: var(--on-dark); text-decoration: none; overflow: hidden; isolation: isolate;
  background-color: #2a2527;
  background-image: linear-gradient(165deg, rgba(14, 10, 11, .25) 0%, rgba(14, 10, 11, .62) 55%, rgba(14, 10, 11, .86) 100%), var(--tex, none);
  background-size: auto, var(--tz, 520%) auto; background-position: center, var(--tx, 50%) var(--ty, 50%); background-repeat: no-repeat;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; mix-blend-mode: screen;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 196, 120, .9), rgba(255, 122, 31, .65) 30%, rgba(210, 52, 58, .35) 55%, transparent 75%);
}
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-on-dark); pointer-events: none; }
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--molten); }
.tile .sym { font-family: var(--stencil); font-size: clamp(2.3rem, 3.6vw, 3.3rem); font-weight: 400; letter-spacing: .01em; line-height: 1; }
.tile .sym sub { font-size: .42em; letter-spacing: 0; vertical-align: baseline; position: relative; top: .05em; margin-left: .08em; }
.tile .name { font-weight: 700; line-height: 1.25; align-self: end; }
.tile .grade { font-family: var(--mono); font-size: var(--t-small); color: #d6cbca; line-height: 1.4; letter-spacing: .04em; }
.tile.cta { background: var(--red) var(--grain-on-dark); color: #fff; grid-template-rows: auto 1fr auto; }
/* who supplies it: each tile opens that producer's page (Finnfjord International's own products: the contact) */
.tile .src {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -6px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .18); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em;
  text-transform: uppercase; color: #f0b9a8; transition: color .3s;
}
.tile .src svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.tile:hover .src, .tile:focus-visible .src { color: #fff; }
.tile:hover .src svg, .tile:focus-visible .src svg { transform: translateX(4px); }
.tile.cta .grade { color: #ffe1dc; }
.tile.cta svg { width: 28px; height: 28px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .products-head { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { min-height: 168px; padding: 14px; }
}

/* ---------- PRODUCER PAGES ---------- */
.phero { position: relative; height: 170vh; background: var(--ink); }
.phero-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  background: var(--ink) var(--grain-on-dark);
}
/* the company name sits in its own panel, so it can never cover the metal or the logo */
.phero .phero-title {
  order: 1; position: relative; display: grid; align-content: center; gap: 18px; max-width: none; margin: 0;
  padding-top: calc(var(--nav-h) + 32px); padding-bottom: 72px; padding-right: clamp(24px, 4vw, 64px); color: var(--on-dark);
}
.phero .ff-melt { order: 2; position: relative; height: 100%; cursor: pointer; }
.phero-title .eyebrow { color: #f0b9a8; }
.phero-title h1, .phero-title .ph-title { font-size: clamp(2.6rem, 5vw, 5rem); letter-spacing: -.045em; max-width: 10ch; }
.phero-title p.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; max-width: 30ch; color: var(--on-dark-muted); }
.phero-cue { position: absolute; left: var(--gut-l); bottom: 24px; z-index: 2; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
@media (min-width: 900px) { .phero-cue { left: max(48px, env(safe-area-inset-left, 0px)); } }
@media (max-width: 860px) {
  .phero-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 56%) minmax(0, 1fr); }
  .phero .ff-melt { order: 1; }
  .phero .phero-title { order: 2; align-content: start; padding-top: 24px; padding-bottom: 56px; gap: 12px; }
  .phero-title h1, .phero-title .ph-title { font-size: clamp(2.3rem, 10vw, 3.2rem); }
}

.pintro { padding-block: clamp(96px, 14vh, 160px) clamp(64px, 10vh, 112px); }
.pintro .eyebrow { margin-bottom: 28px; }

.figures { padding-bottom: clamp(80px, 12vh, 140px); }
.fig-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--text); }
@media (max-width: 1180px) { .fig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fig:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.fig { min-width: 0; padding: 22px 16px 12px 0; display: grid; gap: 8px; align-content: start; border-bottom: 1px solid var(--line); }
.fig .num { font-family: var(--stencil); font-size: clamp(1.9rem, 2.75vw, 2.7rem); font-weight: 400; letter-spacing: .01em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig .num small { font-family: var(--font); font-size: .34em; font-weight: 700; letter-spacing: 0; margin-left: .25em; }
.fig .lbl { color: var(--muted); font-size: var(--t-small); max-width: 24ch; line-height: 1.45; }

.dark-band { background: var(--ink) var(--grain-on-dark); color: var(--on-dark); padding-block: clamp(96px, 14vh, 160px); }
.dark-band .eyebrow { color: #f0b9a8; margin-bottom: 24px; }
.dark-band h2 { font-size: var(--t-h2); max-width: 20ch; }
.dark-band p { color: var(--on-dark-muted); max-width: 52ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 80px; align-items: start; }
.split .stack { display: grid; gap: 22px; align-content: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.flow { display: grid; gap: 0; margin-top: 8px; }
.flow-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center; padding-block: 18px; }
.flow-step .dot { width: 56px; height: 56px; display: grid; place-items: center; color: var(--on-dark); background: #3a3335 var(--grain-on-dark); clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.flow-step .dot svg { width: 26px; height: 26px; }
.flow-step h3 { font-size: 1.2rem; letter-spacing: -.01em; }
.flow-step p { font-size: var(--t-small); }
.flow-line { margin-left: 27px; width: 2px; height: 34px; background: var(--line-dark); position: relative; overflow: hidden; }
.flow-line span { position: absolute; inset: 0; background: linear-gradient(var(--molten), var(--red)); transform-origin: top; transform: scaleY(var(--r, 1)); }
.dark-band .big-figure, .big-figure { font-family: var(--stencil); font-size: clamp(4rem, 12vw, 10rem); font-weight: 400; letter-spacing: 0; line-height: .9; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.big-figure small { font-family: var(--font); font-weight: 700; font-size: .26em; letter-spacing: 0; color: var(--molten); margin-left: .2em; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border: 1px solid var(--line); background: var(--paper); }
.dark-band .chip { border-color: #4a4144; background: #2b2527 var(--grain-on-dark); color: var(--on-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

.plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.plist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.plist li strong { font-size: 1.15rem; letter-spacing: -.01em; }
.plist li span { font-family: var(--mono); font-size: var(--t-small); color: var(--muted); text-align: right; }
@media (max-width: 560px) { .plist li { grid-template-columns: 1fr; gap: 4px; } .plist li span { text-align: left; } }

.section { padding-block: clamp(80px, 12vh, 140px); }
.section.mist { background: var(--mist) var(--grain-on-light); }
.section h2 { font-size: var(--t-h2); max-width: 18ch; }
.section .eyebrow { margin-bottom: 24px; }
.section .intro { color: var(--muted); max-width: 52ch; margin-top: 20px; }

.sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.site-card { background: var(--paper); padding: 26px; display: grid; gap: 14px; align-content: start; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.site-card .coord { font-family: var(--mono); font-size: var(--t-small); color: var(--red); }
.site-card h3 { font-size: 1.8rem; letter-spacing: -.03em; }
.site-card p { color: var(--muted); }
@media (max-width: 760px) { .sites { grid-template-columns: 1fr; } }

.next { display: block; text-decoration: none; background: var(--red) var(--grain-on-dark); color: #fff; padding-block: clamp(64px, 12vh, 120px); position: relative; overflow: hidden; }
.next .eyebrow { color: #ffd9d3; margin-bottom: 18px; }
.next-title { display: flex; align-items: center; gap: .3em; font-size: clamp(2.6rem, 8vw, 7rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.next-title svg { width: .7em; height: .7em; flex: none; transition: transform .4s var(--ease); }
.next:hover .next-title svg { transform: translateX(.18em); }
.next:hover { background-color: var(--red-deep); }
/* end of each producer: the red box with the other two producers, side by side, to choose from */
.next-pair { background: var(--red) var(--grain-on-dark); color: #fff; padding-block: clamp(64px, 11vh, 112px) clamp(48px, 8vh, 88px); }
.np-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vh, 52px); }
.np-head .eyebrow { color: #ffd9d3; }
.np-head h2 { font-size: var(--t-h2); max-width: 18ch; color: #fff; }
.np-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .42); }
.np {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 12px; align-items: baseline;
  padding: clamp(28px, 4.5vh, 44px) 76px clamp(28px, 4.5vh, 44px) 0; color: #fff; text-decoration: none;
}
.np + .np { border-left: 1px solid rgba(255, 255, 255, .42); padding-left: clamp(20px, 3vw, 44px); }
.np .pi-n { grid-row: 1 / 3; font-family: var(--stencil); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: rgba(255, 255, 255, .6); }
.np .pi-name { font-size: clamp(1.9rem, 3.8vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.np .pi-meta { grid-column: 2; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: #ffd9d3; }
.np svg { position: absolute; right: clamp(16px, 2vw, 30px); top: 50%; width: clamp(26px, 2.6vw, 36px); height: clamp(26px, 2.6vw, 36px); transform: translate(-8px, -50%); transition: transform .4s var(--ease); }
.np::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.np:hover svg, .np:focus-visible svg { transform: translate(0, -50%); }
.np:hover::after, .np:focus-visible::after { transform: scaleX(1); }
.np:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 760px) {
  .np-grid { grid-template-columns: 1fr; }
  .np { padding-right: 56px; }
  .np + .np { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .42); padding-left: 0; }
}

/* ---------- CONTACT / FOOTER ---------- */
.contact { background: var(--ink) var(--grain-on-dark); color: var(--on-dark); padding-block: clamp(96px, 14vh, 150px) 40px; }
.contact .eyebrow { color: #f0b9a8; margin-bottom: 24px; }
.contact h2 { font-size: var(--t-h2); max-width: 16ch; }
.contact-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-dark); }
.contact-col { padding: 26px 28px 8px 0; display: grid; gap: 14px; align-content: start; }
.contact-col + .contact-col { padding-left: 28px; border-left: 1px solid var(--line-dark); }
.contact-col h3 { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.contact-col address { font-style: normal; }
.copy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.copy-row .val { font-size: 1.15rem; font-weight: 600; user-select: all; overflow-wrap: anywhere; }
.copy-btn { font: inherit; font-size: .72rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); background: transparent; border: 1px solid #4a4144; min-height: 36px; padding: 0 12px; cursor: pointer; }
.copy-btn:hover { border-color: var(--on-dark-muted); }
.contact-col a { color: var(--on-dark); text-decoration-color: var(--red); text-underline-offset: 4px; }
.foot { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; font-size: var(--t-small); color: var(--on-dark-muted); }
.foot .proposal { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-col, .contact-col + .contact-col { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line-dark); }
}

/* ---------- page change wipe ---------- */
.wipe { position: fixed; inset: 0; z-index: 80; background: var(--red) var(--grain-on-dark); display: grid; place-items: center; transform: translateY(100%); pointer-events: none; }
.wipe img { width: min(46vw, 300px); opacity: 0; transition: opacity .25s .15s; }
.wipe.in { transform: translateY(0); transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.ffi-arriving .wipe { transform: none; transition: none; }
.ffi-arriving .wipe img { opacity: 1; }
.wipe.in img { opacity: 1; }
.wipe.out { transform: translateY(-100%); transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.wipe.out img { opacity: 0; transition-delay: 0s; }

/* ---------- reduced motion: no pinned scrubbing, everything at its final state ---------- */
.rm .hero { height: auto; }
.rm .hero-stage { position: relative; height: 100vh; height: 100svh; }
.rm .track-pin { height: auto; }
.rm .track-stage { position: relative; height: auto; }
.rm .track { width: 100%; flex-direction: column; transform: none !important; }
.rm .pcard { height: auto; min-height: 90vh; }
.rm .phero { height: auto; }
.rm .phero-stage { position: relative; }
.rm .scroll-cue, .rm .phero-cue, .rm .track-ui { display: none; }
.rm [data-reveal] { opacity: 1; transform: none; }
.rm .wipe { display: none; }

/* ---------- WordPress admin bar (logged-in editors only) ---------- */
.admin-bar .nav, .admin-bar .progress { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .nav, .admin-bar .progress { top: 46px; } }