/* ============================================================
   MARAL CO TRADING — Design System
   Deep ground, brand gold. Geometric sans for voice,
   neo-grotesque for data. Structure after Montfort — the pinned
   scene, the chapters, the wide-tracked wordmark, hairlines and
   whitespace doing the work a border would otherwise do — carried
   in Maral's own colours rather than Montfort's alpine palette.
   ============================================================ */

/* ── Tokens ── */
:root {
  /* Surfaces — the original deep ground. Sections alternate --bg and
     --surface, which is where the banded rhythm comes from. */
  --bg:            #0A0E13;
  --surface:       #111823;
  --surface-2:     #172030;
  --surface-3:     #1E2939;

  /* Brand gold */
  --accent:        #C9A84C;
  --accent-2:      #E8C97A;
  --accent-dim:    #8A7233;
  --accent-wash:   rgba(201,168,76,.15);

  /* Text sitting on an accent fill. On this ground that is the ground
     colour itself — but it stays its own token, because the sheet no
     longer hard-codes the assumption. */
  --on-accent:     #0A0E13;

  /* Product image panels. The owner's rule: never zoom or crop, square,
     contain, black. */
  --img-bg:        #000000;

  /* rgb triple of --bg, for gradient scrims that need to fade to it */
  --bg-rgb:        10,14,19;

  /* Lines */
  --line:          rgba(201,168,76,.16);
  --line-strong:   rgba(201,168,76,.42);
  --line-neutral:  rgba(255,255,255,.08);

  /* Text */
  --text:          #F2EFEA;
  --text-2:        #B9C0C8;
  --muted:         #838C96;
  --muted-2:       #7A838C;

  /* Semantic */
  --ok:            #4BA373;
  --info:          #4A8DB7;

  /* Type — Jost is the Futura-adjacent geometric that carries the
     wide-tracked logotype; Archivo is the neo-grotesque for reading
     and for spec tables. */
  --display: 'Jost', 'Futura', 'Avenir Next', 'Century Gothic', sans-serif;
  /* The wordmark specifically. layout.mjs rewrites --display to Vazirmatn or
     Noto Naskh on RTL pages; MARAL is the brand and must not follow it. */
  --wordmark: 'Jost', 'Futura', 'Avenir Next', 'Century Gothic', sans-serif;
  --body:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sans:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale */
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(.95rem, .92rem + .15vw, 1.02rem);
  --step-1:  clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + .7vw, 1.9rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.4vw, 2.75rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.8vw, 4rem);

  /* Space */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --nav-h: 68px;
  --maxw: 1240px;
  --maxw-text: 68ch;
  --radius: 3px;
  --radius-lg: 6px;
  --tr: .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@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 {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul,ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* Numerals: lining everywhere; tabular inside data tables */
body { font-variant-numeric: lining-nums; }
.spec-table, .stat__value, .num { font-variant-numeric: lining-nums tabular-nums; }

::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── Layout ── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.wrap--narrow { max-width: 920px; }
.section { padding-block: clamp(3.5rem, 8vw, var(--s9)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--s7)); }
.section--alt { background: var(--surface); }
.page { padding-top: var(--nav-h); }

/* ── Typography ── */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.14; letter-spacing: -.01em; }
.h-xl { font-size: var(--step-4); }
.h-lg { font-size: var(--step-3); }
.h-md { font-size: var(--step-2); }
.h-sm { font-size: var(--step-1); }

.eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.lede { font-size: var(--step-1); color: var(--text-2); max-width: var(--maxw-text); line-height: 1.6; }
.prose { color: var(--text-2); max-width: var(--maxw-text); }
.prose p + p { margin-top: var(--s4); }
.muted { color: var(--muted); }
.rule { width: 44px; height: 1px; background: var(--accent); border: 0; }
.rule--center { margin-inline: auto; }

.section-head { margin-bottom: clamp(2rem, 4vw, var(--s7)); }
/* Page-intro sections contain only the heading. Its trailing margin then
   stacks with the next section's padding and reads as a gap. */
.section-head:last-child { margin-bottom: 0; }
.section-head--center { text-align: center; }
.section-head--center .rule { margin-inline: auto; }
.section-head .eyebrow { display: block; margin-bottom: var(--s3); }
.section-head h2 { margin-bottom: var(--s4); }
.section-head--center .lede { margin-inline: auto; }

/* ── Buttons ── */
.btn {
  --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .95em 1.9em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-2); --btn-bd: var(--accent-2); }
.btn--ghost:hover { --btn-bg: var(--accent-wash); --btn-bd: var(--accent); }
.btn--sm { padding: .7em 1.3em; font-size: .72rem; }
.btn--block { display: flex; width: 100%; }
.btn--wa { --btn-bg: #1F8C4D; --btn-fg: #fff; --btn-bd: #1F8C4D; }
.btn--wa:hover { --btn-bg: #24A55B; --btn-bd: #24A55B; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ── Navbar ── */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--tr), border-color var(--tr);
}
.nav.is-stuck {
  background: rgba(var(--bg-rgb),.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; gap: var(--s5); height: 100%; }
.logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
/* Montfort's logotype is light-weight and widely tracked, not bold.
   The restraint is the point — a heavy wordmark reads as a startup. */
.logo__name { font-family: var(--wordmark); font-size: 1.32rem; font-weight: 300; color: var(--accent-2); letter-spacing: .22em; }
.logo__sub { font-family: var(--sans); font-size: .53rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem,2.2vw,2rem); margin-inline-start: auto; }
.nav__link {
  position: relative; font-family: var(--sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-2);
  padding-block: .4rem; transition: color var(--tr);
}
.nav__link::after {
  content:''; position:absolute; inset-inline-start:0; bottom:0; height:1px; width:100%;
  background: var(--accent); transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--tr);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
/* Below 480px the logo + actions exceed the header width. The quote action is
   still offered in the mobile menu and the fixed .rfq-fab. */
@media (max-width: 479px) { .nav__actions > .btn--primary { display: none; } }

/* Language menu */
.langmenu { position: relative; }
.langmenu__btn {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5em .8em; transition: color var(--tr), border-color var(--tr);
}
.langmenu__btn:hover { color: var(--accent); border-color: var(--line-strong); }
.langmenu__btn svg { width: 9px; height: 9px; transition: transform var(--tr); }
.langmenu[open] .langmenu__btn svg { transform: rotate(180deg); }
.langmenu__list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 168px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s2); z-index: 20;
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}
.langmenu__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  font-family: var(--sans); font-size: .8rem; color: var(--text-2);
  padding: .55em .7em; border-radius: 2px; transition: background var(--tr), color var(--tr);
}
.langmenu__item:hover { background: var(--surface-3); color: var(--text); }
.langmenu__item[aria-current="true"] { color: var(--accent); }
.langmenu__item span:last-child { font-size: .68rem; letter-spacing: .08em; color: var(--muted-2); text-transform: uppercase; }

/* Burger */
.burger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.burger span { width: 22px; height: 1.5px; background: var(--text); transition: transform var(--tr), opacity var(--tr); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobilenav {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
  background: rgba(var(--bg-rgb),.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: var(--s5) clamp(1rem,4vw,2.5rem) var(--s6);
  display: none; flex-direction: column; gap: var(--s2);
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.mobilenav.is-open { display: flex; }
.mobilenav .nav__link { font-size: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line-neutral); }
.mobilenav .nav__link::after { display: none; }

/* ══════════════════════════════════════════════════════════
   SCENE LAYER
   One canvas pinned behind the entire page, exactly as Montfort
   pins its WebGL wrapper. The page scrolls normally over it;
   assets/js/scene.js reads the scroll position and moves the
   scene between chapters. Nothing is scroll-hijacked.
   ══════════════════════════════════════════════════════════ */
#scene {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;              /* never eats a click meant for the page */
}
#scene canvas { width: 100%; height: 100%; display: block; }

/* Content rides above the scene. .nav already sits at z-index 100. */
.page, .footer { position: relative; z-index: 1; }

/* Chapters are veiled rather than opaque, so the scene stays present
   underneath instead of switching on and off. Cards stay near-solid —
   the copy inside them still has to be comfortable to read. */
.section--alt { background: rgba(17,24,35,.82); }
.trustbar     { background: rgba(17,24,35,.70); }
.footer       { background: rgba(17,24,35,.92); }
.card         { background: rgba(17,24,35,.94); }

/* The connectivity chapter is the one the scene builds to, so it keeps
   no panel at all — the globe reads straight through the copy. */
.section--scene {
  /* Directional, not radial. The copy lives in the leading column and the
     planet sits in the trailing half, so the veil is solid where the words
     are and clears away where the photograph is. A centred veil is what let
     the planet sit on top of the lane table. */
  background: linear-gradient(to right,
    rgba(10,14,19,.97) 0%, rgba(10,14,19,.94) 40%,
    rgba(10,14,19,.62) 58%, rgba(10,14,19,.10) 100%);
}
[dir="rtl"] .section--scene {
  background: linear-gradient(to left,
    rgba(10,14,19,.97) 0%, rgba(10,14,19,.94) 40%,
    rgba(10,14,19,.62) 58%, rgba(10,14,19,.10) 100%);
}

/* Copy in the leading column, the scene left to breathe in the trailing one.
   The stage is an empty spacer — the planet is painted on the fixed canvas
   behind, so nothing here can ever overlap the words. */
.scene-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(1.5rem, 4vw, var(--s8));
  align-items: center;
}
.scene-split__stage { min-height: clamp(18rem, 42vh, 30rem); }
.scene-split .lane { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; }
.scene-split .lane__t:last-child { grid-column: 3; }
@media (max-width: 60rem) {
  .scene-split { grid-template-columns: 1fr; }
  .scene-split__stage { display: none; }
  .section--scene,
  [dir="rtl"] .section--scene { background: rgba(10,14,19,.90); }
}

@supports not (backdrop-filter: blur(2px)) {
  /* Without backdrop-filter the veil is doing all the work; make it opaque
     enough that small type never sits on a moving lane. */
  .section--alt { background: rgba(17,24,35,.94); }
  .trustbar     { background: rgba(17,24,35,.90); }
}

/* ── Trade lanes list (connectivity chapter) ── */
.lanes { display: grid; gap: 1px; background: var(--line-neutral); border-block: 1px solid var(--line-neutral); margin-top: var(--s6); }
.lane {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) auto auto;
  gap: var(--s3) var(--s5);
  align-items: baseline;
  padding: var(--s4) var(--s2);
  background: rgba(17,24,35,.78);
}
.lane__port {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text);
  direction: ltr;                     /* port names are proper nouns */
}
.lane__region { font-size: .88rem; color: var(--text-2); }
.lane__t {
  font-family: var(--sans); font-size: .74rem; color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.lane__t b { color: var(--accent); font-weight: 600; margin-inline-end: .35em; }
@media (max-width: 700px) {
  .lane { grid-template-columns: 1fr auto; row-gap: var(--s2); }
  .lane__region { grid-column: 1/-1; }
}

/* ── Chapter rail ──
   Diamond markers down the leading edge, the current one filled.
   Built by assets/js/chrome.js, so it simply does not exist without JS. */
.crail {
  position: fixed; inset-block: 0; inset-inline-start: clamp(.9rem, 2.4vw, 2rem);
  z-index: 2; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(.7rem, 1.6vw, 1.1rem); pointer-events: none;
}
.crail__d {
  width: 26px; height: 26px; display: grid; place-items: center;
  transform: rotate(45deg);
  border: 1px solid var(--line);
  transition: border-color .45s ease, background .45s ease;
}
.crail__d i {
  transform: rotate(-45deg);
  font-family: var(--mono); font-style: normal; font-size: .58rem;
  color: var(--muted-2); transition: color .45s ease;
  font-variant-numeric: lining-nums;
}
.crail__d.is-on { border-color: var(--accent); background: var(--accent-wash); }
.crail__d.is-on i { color: var(--accent); }
@media (max-width: 1080px) { .crail { display: none; } }

/* ── Cursor ring ──
   Trails the pointer, and opens up over anything clickable. Fine
   pointers only — on a touchscreen it would just be a stray dot. */
.cring {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  z-index: 98; pointer-events: none; opacity: 0;
  transition: opacity .3s ease, width .25s ease, height .25s ease, border-color .25s ease;
  will-change: transform;
}
.cring.is-on { opacity: .7; }
.cring.is-hot { border-color: var(--accent); opacity: 1; }
@media (pointer: coarse) { .cring { display: none; } }
@media (prefers-reduced-motion: reduce) { .cring { display: none; } }

/* ── Ambient sound control ──
   Four bars that animate only while sound is actually playing, so the
   control reports state rather than decorating the nav. */
.sound {
  display: inline-grid; place-items: center;
  width: 34px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--tr), background var(--tr);
}
.sound[hidden] { display: none; }
.sound:hover { border-color: var(--line-strong); background: var(--accent-wash); }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.sound__bars i { width: 2px; height: 3px; background: var(--muted); transition: background var(--tr); }
.sound.is-on .sound__bars i { background: var(--accent); animation: sound-bar 1.1s ease-in-out infinite; }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: .18s; }
.sound.is-on .sound__bars i:nth-child(3) { animation-delay: .36s; }
.sound.is-on .sound__bars i:nth-child(4) { animation-delay: .54s; }
@keyframes sound-bar { 0%,100% { height: 3px; } 50% { height: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .sound.is-on .sound__bars i { animation: none; height: 8px; }
}

/* ── Hero ──
   Montfort's composition: one atmospheric field bled to every edge,
   the wordmark set enormous and very wide-tracked over it, and the
   nav floating on top with no bar of its own. Montfort's field is a
   commissioned photograph of the Alps; ours is the trade-lane globe,
   which has the advantage of being true — it draws the routes rather
   than borrowing a mood. */
.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* Ground under the copy. A soft ellipse on the copy side plus a wash
   down from the nav, so the wordmark never sits on a lane. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--bg-rgb),.72) 0%, rgba(var(--bg-rgb),0) 34%),
    radial-gradient(ellipse 76% 70% at 20% 52%,
      rgba(var(--bg-rgb),.94) 0%, rgba(var(--bg-rgb),.62) 44%, rgba(var(--bg-rgb),0) 76%);
}
[dir="rtl"] .hero::before {
  background:
    linear-gradient(to bottom, rgba(var(--bg-rgb),.72) 0%, rgba(var(--bg-rgb),0) 34%),
    radial-gradient(ellipse 76% 70% at 80% 52%,
      rgba(var(--bg-rgb),.94) 0%, rgba(var(--bg-rgb),.62) 44%, rgba(var(--bg-rgb),0) 76%);
}

.hero__inner { position: relative; z-index: 2; padding-block: clamp(2rem,5vw,3.5rem); }

/* The wordmark. Weight 300 and .2em of tracking is the whole effect —
   at display size the letters have to be thin or the tracking reads as
   a mistake rather than as confidence. */
.hero__mark { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.6rem,1.4vw,1rem); margin-bottom: clamp(1.4rem,3.5vw,2.4rem); }
.hero__mark-name {
  font-family: var(--wordmark);
  font-weight: 300;
  font-size: clamp(2.5rem, 8.6vw, 6.25rem);
  letter-spacing: .2em;
  line-height: .96;
  color: var(--accent-2);
  white-space: nowrap;
}
.hero__mark-rule { width: clamp(72px, 20vw, 240px); height: 1px; background: var(--line-strong); }
.hero__mark-sub {
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .38em; text-transform: uppercase; color: var(--muted);
}

.hero h1 { font-size: var(--step-2); font-weight: 500; max-width: 26ch; margin-block: 0 var(--s4); letter-spacing: -.005em; }
.hero .eyebrow { display: block; margin-bottom: var(--s3); }
.hero .lede { font-size: var(--step-1); max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

@media (max-width: 900px) {
  /* The scene drops back to a quiet backdrop — the copy has to win on a phone. */
  .hero { min-height: auto; }
  #scene { opacity: .55; }
  .section--alt { background: rgba(17,24,35,.92); }
  .section--scene { background: rgba(17,24,35,.80); }
  .hero::before {
    background: linear-gradient(to bottom,
      rgba(var(--bg-rgb),.90) 0%, rgba(var(--bg-rgb),.72) 55%, rgba(var(--bg-rgb),.42) 100%);
  }
  [dir="rtl"] .hero::before {
    background: linear-gradient(to bottom,
      rgba(var(--bg-rgb),.90) 0%, rgba(var(--bg-rgb),.72) 55%, rgba(var(--bg-rgb),.42) 100%);
  }
  .hero__mark-sub { letter-spacing: .26em; }
}

/* Trust bar under hero */
.trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trustbar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.trustbar__item { padding: var(--s5) var(--s4); text-align: center; border-inline-end: 1px solid var(--line); }
.trustbar__item:last-child { border-inline-end: 0; }
.trustbar__v { font-family: var(--display); font-size: var(--step-2); font-weight: 600; color: var(--accent); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.trustbar__l { font-family: var(--sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: var(--s2); }

/* ── Grids ── */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(288px,1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,var(--s8)); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ── Cards ── */
.card {
  background: var(--surface); border: 1px solid var(--line-neutral); border-radius: var(--radius);
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
  display: flex; flex-direction: column; overflow: hidden;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.42); }
.card__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.card__title { font-family: var(--display); font-size: var(--step-1); font-weight: 600; }
.card__text { font-size: .9rem; color: var(--muted); line-height: 1.6; flex: 1; }

/* Product card */
.pcard__media {
  position: relative; aspect-ratio: 1/1; background: var(--img-bg);
  border-bottom: 1px solid var(--line-neutral); display: grid; overflow: hidden;
}
.pcard__slide { grid-area: 1/1; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; }
.pcard__slide picture { display: block; width: 100%; height: 100%; }
.pcard__slide img { width: 100%; height: 100%; object-fit: contain; }
.pcard__slide.is-on { opacity: 1; }
.pcard__badge {
  position: absolute; inset-block-start: var(--s3); inset-inline-start: var(--s3); z-index: 2;
  font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(10,14,19,.82); color: var(--accent);
  border: 1px solid var(--line); border-radius: 2px; padding: .35em .7em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pcard__meta { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .06em;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--line-neutral); border-radius: 999px; padding: .3em .75em;
}
.chip--key { color: var(--accent); border-color: var(--line); }
.card__actions { display: flex; gap: var(--s2); margin-top: auto; padding-top: var(--s2); }
.card__actions .btn { flex: 1; }

/* ── Spec table ──
   Wrapped in .table-scroll so narrow screens scroll the table itself
   rather than dropping columns or squeezing them past readability. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .spec-table { min-width: 460px; }
.spec-table { font-family: var(--sans); font-size: .84rem; }
.spec-table caption {
  text-align: start; font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  padding-bottom: var(--s3);
}
.spec-table th, .spec-table td { text-align: start; padding: .72rem .9rem; border-bottom: 1px solid var(--line-neutral); vertical-align: top; }
.spec-table thead th { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.spec-table tbody th { font-weight: 500; color: var(--text-2); width: 42%; }
.spec-table td { color: var(--text); }
.spec-table tbody tr:hover { background: rgba(255,255,255,.02); }
.spec-table .u { color: var(--muted); font-size: .92em; }
.spec-note { font-family: var(--sans); font-size: .74rem; color: var(--muted); margin-top: var(--s3); line-height: 1.55; }

/* Identity strip (CAS / HS / formula) */
/* Flex rather than grid: the cell count varies per product (3 for polyols,
   4 for the commodity chemicals, 6 on the about page) and auto-fit columns
   leave a dead panel whenever the last row is short. Flex items grow to
   fill it instead. */
.idstrip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line-neutral); border: 1px solid var(--line-neutral); border-radius: var(--radius); overflow: hidden; }
.idstrip__cell { flex: 1 1 150px; background: var(--surface); padding: var(--s4); }
.idstrip__k { font-family: var(--sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.idstrip__v { font-family: var(--mono); font-size: .92rem; color: var(--text); margin-top: .35rem; word-break: break-word; }

/* ── Filter bar ── */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.filter {
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); background: transparent; border: 1px solid var(--line-neutral);
  border-radius: 999px; padding: .55em 1.15em; transition: all var(--tr);
}
.filter:hover { border-color: var(--line-strong); color: var(--text); }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filter__n { opacity: .6; margin-inline-start: .4em; }
.catalog-bar { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; margin-bottom: var(--s6); }
.searchbox { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.searchbox input {
  width: 100%; font-family: var(--sans); font-size: .85rem;
  background: var(--surface); border: 1px solid var(--line-neutral); border-radius: var(--radius);
  padding: .7em 1em .7em 2.4em; color: var(--text); transition: border-color var(--tr);
}
.searchbox input:focus { outline: none; border-color: var(--accent); }
.searchbox svg { position: absolute; inset-inline-start: .85em; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
[dir="rtl"] .searchbox input { padding: .7em 2.4em .7em 1em; }

/* ── Forms ── */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field__label { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field__label .req { color: var(--accent); }
.input, .select, .textarea {
  width: 100%; font-family: var(--sans); font-size: .92rem;
  background: var(--surface); border: 1px solid var(--line-neutral); border-radius: var(--radius);
  padding: .8em 1em; color: var(--text); transition: border-color var(--tr), background var(--tr);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
.textarea { resize: vertical; min-height: 120px; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23838C96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; padding-inline-end: 2.4em;
}
[dir="rtl"] .select { background-position: left 1em center; padding-inline-end: 1em; padding-inline-start: 2.4em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form-grid .field--full { grid-column: 1/-1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-family: var(--sans); font-size: .74rem; color: var(--muted); }

/* ── RFQ list ── */
.rfq-line { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); background: var(--surface); border: 1px solid var(--line-neutral); border-radius: var(--radius); }
.rfq-line__img { width: 56px; height: 56px; flex-shrink: 0; background: var(--img-bg); border-radius: 2px; object-fit: contain; }
.rfq-line__name { font-family: var(--display); font-size: 1.05rem; }
.rfq-line__cat { font-family: var(--sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.rfq-line__qty { width: 130px; }
.rfq-line__rm { color: var(--muted); font-size: 1.3rem; line-height: 1; padding: .2em .4em; transition: color var(--tr); }
.rfq-line__rm:hover { color: #C1554F; }
.rfq-empty { text-align: center; padding: var(--s8) var(--s4); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

.rfq-fab {
  position: fixed; inset-block-end: 92px; inset-inline-end: 24px; z-index: 90;
  display: none; align-items: center; gap: .6em;
  background: var(--surface-2); color: var(--accent);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .8em 1.3em; font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 34px rgba(0,0,0,.5); transition: all var(--tr);
}
.rfq-fab.is-on { display: inline-flex; }
.rfq-fab:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rfq-fab__n {
  min-width: 20px; height: 20px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); border-radius: 999px;
  font-size: .68rem; font-weight: 700; padding-inline: .35em;
}
.rfq-fab:hover .rfq-fab__n { background: var(--on-accent); color: var(--accent); }

/* ── Detail page ── */
.detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(2rem,5vw,var(--s8)); align-items: start; }
/* minmax(0,1fr), not 1fr: a bare 1fr has a min-content floor, so the 460px
   spec table propped the column open and pushed every product page 101px
   wider than a 375px phone. */
@media (max-width: 940px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.gallery { display: grid; gap: var(--s3); position: sticky; top: calc(var(--nav-h) + var(--s4)); }
@media (max-width: 940px) { .gallery { position: static; } }
.gallery__main { aspect-ratio: 4/3; background: var(--img-bg); border: 1px solid var(--line-neutral); border-radius: var(--radius); overflow: hidden; display: grid; }
.gallery__slot { grid-area: 1/1; width: 100%; height: 100%; opacity: 0; transition: opacity .35s ease; }
.gallery__slot.is-on { opacity: 1; }
.gallery__slot picture { display: block; width: 100%; height: 100%; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.gallery__thumb { width: 72px; aspect-ratio: 1/1; background: var(--img-bg); border: 1px solid var(--line-neutral); border-radius: 2px; overflow: hidden; transition: border-color var(--tr); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb[aria-current="true"] { border-color: var(--accent); }

.breadcrumb { font-family: var(--sans); font-size: .72rem; color: var(--muted); margin-bottom: var(--s5); display: flex; flex-wrap: wrap; gap: .45em; align-items: center; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { opacity: .45; }

.detail__title { font-size: var(--step-3); margin-block: var(--s3) var(--s4); }
.detail__block { margin-top: var(--s7); }
.detail__block > h2 { font-size: var(--step-2); margin-bottom: var(--s4); }
.applist { display: flex; flex-wrap: wrap; gap: var(--s2); }
.applist li { font-family: var(--sans); font-size: .8rem; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line-neutral); border-radius: 999px; padding: .5em 1.05em; }

.callout { border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: var(--radius); padding: var(--s4) var(--s5); background: var(--surface); }
.callout__k { font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }

/* Document rows */
.docrow { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border: 1px solid var(--line-neutral); border-radius: var(--radius); background: var(--surface); transition: border-color var(--tr); }
.docrow:hover { border-color: var(--line-strong); }
.docrow__ico { width: 34px; height: 34px; flex-shrink: 0; color: var(--accent); }
.docrow__t { font-family: var(--sans); font-size: .88rem; font-weight: 600; }
.docrow__d { font-family: var(--sans); font-size: .74rem; color: var(--muted); }

/* ── Feature / process ── */
.feature { display: flex; gap: var(--s4); align-items: flex-start; }
.feature__ico { width: 34px; height: 34px; flex-shrink: 0; color: var(--accent); }
.feature__t { font-family: var(--display); font-size: var(--step-1); font-weight: 600; margin-bottom: var(--s2); }
.feature__d { font-size: .9rem; color: var(--muted); line-height: 1.65; }

.steps { counter-reset: step; display: grid; gap: var(--s5); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.step__n {
  counter-increment: step; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: lining-nums;
}
.step__n::before { content: counter(step,decimal-leading-zero); }

/* ── Footer ── */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--s8) var(--s5); margin-top: var(--s8); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid var(--line-neutral); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__h { font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s4); }
.footer__list { display: flex; flex-direction: column; gap: .7rem; }
.footer__list a, .footer__contact a { font-size: .88rem; color: var(--muted); transition: color var(--tr); }
.footer__list a:hover, .footer__contact a:hover { color: var(--text); }
.footer__tag { font-size: .9rem; color: var(--muted); max-width: 32ch; margin-top: var(--s4); line-height: 1.7; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; padding-top: var(--s5); }
.footer__copy { font-family: var(--sans); font-size: .74rem; color: var(--muted-2); }
.footer__legal { display: flex; gap: var(--s4); font-family: var(--sans); font-size: .74rem; }
.footer__legal a { color: var(--muted-2); }
.footer__legal a:hover { color: var(--text-2); }

/* ── WhatsApp float ── */
.wa {
  position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 95;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: #1F8C4D; border-radius: 50%;
  box-shadow: 0 8px 26px rgba(31,140,77,.42); transition: transform var(--tr), background var(--tr);
}
.wa:hover { transform: translateY(-2px) scale(1.04); background: #24A55B; }
.wa svg { width: 26px; height: 26px; fill: #fff; }

/* ── Utility ── */
.stack { display: grid; gap: var(--s4); }
.stack--lg { gap: var(--s6); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hide { display: none !important; }
[hidden] { display: none !important; }

/* Skip link */
.skip { position: absolute; inset-block-start: -60px; inset-inline-start: var(--s4); z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: .7em 1.2em; border-radius: var(--radius);
  font-family: var(--sans); font-size: .8rem; font-weight: 600; transition: top var(--tr); }
.skip:focus { inset-block-start: var(--s4); }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .burger { display: flex; }
}
@media (max-width: 700px) {
  :root { --nav-h: 60px; }
  .trustbar__item { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .trustbar__grid { grid-template-columns: 1fr 1fr; }
  .card__actions { flex-direction: column; }
  .rfq-line { flex-wrap: wrap; }
  .rfq-fab { inset-block-end: 84px; inset-inline-end: 16px; }
  .wa { inset-block-end: 16px; inset-inline-end: 16px; }
}

/* ── RTL ── */
[dir="rtl"] .logo__sub,
[dir="rtl"] .eyebrow,
[dir="rtl"] .footer__h { letter-spacing: 0; }
[dir="rtl"] .nav__link,
[dir="rtl"] .btn,
[dir="rtl"] .filter,
[dir="rtl"] .field__label { letter-spacing: 0; }
[dir="rtl"] .idstrip__v { direction: ltr; text-align: start; }
/* The wordmark stays Latin and LTR in every language — it is the brand,
   not a translated string — so its tracking must not be zeroed out. */
[dir="rtl"] .hero__mark { align-items: flex-start; }
[dir="rtl"] .hero__mark-name { direction: ltr; }

/* ══════════════════════════════════════════════════════════
   3D VIEWERS
   ══════════════════════════════════════════════════════════ */

/* ── Packaging / molecule viewer (assets/js/viewer3d.js) ── */
.v3d {
  position: relative;
  aspect-ratio: 4/3;
  background:
    radial-gradient(ellipse 60% 60% at 50% 42%, rgba(201,168,76,.07), transparent 70%),
    var(--surface);
  border: 1px solid var(--line-neutral);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: pan-y;           /* let the page scroll; drag still rotates */
}
.v3d__canvas { width: 100%; height: 100%; display: block; }
.v3d--off { display: none; }     /* no 2D context — fall back to the photos */

.v3d__cap {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding: .6rem .9rem;
  background: linear-gradient(to top, rgba(10,14,19,.92), rgba(10,14,19,0));
  font-family: var(--sans); font-size: .7rem; letter-spacing: .06em;
  color: var(--muted); pointer-events: none;
}
.v3d__cap b { color: var(--accent); font-weight: 600; }
.v3d__hint { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

.v3d-pick { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.v3d-pick button {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-2); background: transparent;
  border: 1px solid var(--line-neutral); border-radius: 999px;
  padding: .5em 1.05em; transition: all var(--tr);
}
.v3d-pick button:hover { border-color: var(--line-strong); color: var(--text); }
.v3d-pick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Machinery model, click-to-load (assets/js/machine3d.js) ── */
.machine3d { position: relative; aspect-ratio: 16/10; background: var(--img-bg);
  border: 1px solid var(--line-neutral); border-radius: var(--radius); overflow: hidden; }
.machine3d iframe { width: 100%; height: 100%; border: 0; display: block; }
.machine3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.machine3d__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.machine3d__load {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: var(--s3);
  text-align: center; padding: var(--s5);
  background: linear-gradient(rgba(10,14,19,.38), rgba(10,14,19,.74));
  transition: background var(--tr);
}
.machine3d__load:hover { background: linear-gradient(rgba(10,14,19,.28), rgba(10,14,19,.64)); }
.machine3d__ico { width: 46px; height: 46px; color: var(--accent); }
.machine3d__t { font-family: var(--display); font-size: var(--step-1); color: var(--text); }
.machine3d__w { font-family: var(--sans); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   MOTION — scroll reveal
   Content is visible by default; the reveal class is only added
   by JS, so a no-JS or failed-script page still shows everything.
   ══════════════════════════════════════════════════════════ */
.js-reveal { opacity: 0; transform: translateY(18px); }
.js-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal, .js-reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ── Divisional sub-nav: categories as peers, not a dropdown ── */
.subnav { border-bottom: 1px solid var(--line-neutral); background: var(--surface); }
.subnav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem,3vw,2.25rem); padding-block: .85rem; }
.subnav__link {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  transition: color var(--tr);
}
.subnav__link:hover, .subnav__link.is-active { color: var(--accent); }
.subnav__sep { color: var(--muted-2); opacity: .5; }
[dir="rtl"] .subnav__link { letter-spacing: 0; }

/* ══════════════════════════════════════════════════════════
   GUIDES — editorial article body
   ══════════════════════════════════════════════════════════ */
.guide-body { max-width: var(--maxw-text); }
.guide-body h2 {
  font-family: var(--display); font-size: var(--step-2); line-height: 1.2;
  margin-top: var(--s7); margin-bottom: var(--s3);
}
.guide-body h3 {
  font-family: var(--display); font-size: var(--step-1); line-height: 1.25;
  margin-top: var(--s6); margin-bottom: var(--s2);
}
.guide-body p { margin-top: var(--s4); }
.guide-body p:first-child { margin-top: 0; }
.guide-body strong { color: var(--text); font-weight: 600; }
.guide-body a {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: opacity var(--tr);
}
.guide-body a:hover { opacity: .72; }
.guide-body .table-scroll { margin-block: var(--s5); }
.guide-body ul.guide-list {
  margin-top: var(--s4); display: grid; gap: var(--s3);
}
.guide-body ul.guide-list li {
  position: relative; padding-inline-start: 1.25rem; line-height: 1.55;
}
.guide-body ul.guide-list li::before {
  content: ''; position: absolute; inset-block-start: .62em; inset-inline-start: 0;
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
}