@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   0. FONTS — self-hosted
   ───────────────────────────────────────────────────────────────────────────
   Every face is served from this origin. Nothing is fetched from Google Fonts,
   because those hosts are unreachable from inside Iran — which is where most
   of the Persian audience is. A CDN font here would mean the entire Persian
   edition silently falling back to Tahoma for the visitors it was built for.
   Self-hosting also keeps the site fully functional offline.

   THE PERSIAN TYPEFACE IS SET IN ONE PLACE: the --f-fa token below.
   Three faces are declared; a browser downloads only the one actually used,
   so switching is a single-token edit with no other cost.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Latin UI & display — */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/inter-700.woff2") format("woff2"); }

/* — Monospace data lane — */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/plex-mono-500.woff2") format("woff2"); }

/* — Persian option A (active): IBM Plex Sans Arabic —
   Chosen because it is the Arabic-script sibling of IBM Plex Mono, which
   already sets every technical value on the site. That makes the Persian
   edition typographically one system rather than two bolted together, and
   its Persian numerals are the sharpest of the three — which matters on a
   design this numeral-heavy. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex-arabic-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/plex-arabic-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/plex-arabic-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/plex-arabic-700.woff2") format("woff2"); }

/* — Persian option B: Vazirmatn (variable 400–700) —
   Designed by an Iranian type designer specifically for Persian. Softer and
   more neutral; the safest choice for native readability at small sizes. */
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/vazirmatn-arabic.woff2") format("woff2"); }

/* — Persian option C: Estedad (variable 400–700) —
   Wider and heavier. The most assertive of the three. */
@font-face { font-family: "Estedad"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/estedad-arabic.woff2") format("woff2"); }

/* ═══════════════════════════════════════════════════════════════════════════
   TEJARAT TADBIR RASA — DESIGN SYSTEM
   Design language: "The Trade Ledger"
   Derived from specification sheets, bills of lading and commodity records.
   Structure over decoration. Gold is structural, never ornamental.
   Fully bilingual-ready: all directional properties use CSS logical props.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Brand core */
  --navy:        #0D1B2A;
  --gold:        #D4AF37;
  --white:       #FFFFFF;
  --neutral:     #F4F4F4;

  /* Dark canvas scale */
  --ink-950:     #060D15;
  --ink-900:     #0D1B2A;
  --ink-850:     #101F30;
  --ink-800:     #142639;
  --ink-700:     #1B3149;
  --ink-600:     #26425E;
  --ink-500:     #365B7E;

  /* Gold scale */
  --gold-100:    #F6ECC8;
  --gold-300:    #E8CC72;
  --gold-500:    #D4AF37;
  --gold-700:    #A8862A;

  /* Light canvas scale */
  --paper:       #FFFFFF;
  --paper-2:     #F4F4F4;
  --paper-3:     #EBECEE;
  --paper-4:     #E1E3E6;

  /* Text */
  --tx-on-dark:      #E8ECF1;
  --tx-on-dark-mute: #9AA7B6;
  --tx-on-dark-dim:  #6F7F91;
  --tx-on-light:     #0D1B2A;
  --tx-on-light-mute:#4E5A67;
  --tx-on-light-dim: #7A8593;

  /* Lines — the structural signature of the system */
  --rule-dark:       rgba(255,255,255,.10);
  --rule-dark-soft:  rgba(255,255,255,.06);
  --rule-gold:       rgba(212,175,55,.34);
  --rule-gold-soft:  rgba(212,175,55,.16);
  --rule-light:      #DCDFE3;
  --rule-light-soft: #E9EBED;

  /* Type */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── PERSIAN TYPEFACE — change the FIRST NAME in both lines to switch ───
     A: "Vazirmatn"              Persian-native design, softest and most
                                 neutral, best readability at small sizes (active)
     B: "IBM Plex Sans Arabic"   pairs with the mono data lane; more technical
     C: "Estedad"                wider and heavier, most assertive

     Only the Arabic-script subset of each face is self-hosted, so Latin runs
     inside Persian text (SN500, HDPE, CAS, ISO) deliberately resolve to the
     brand's own Latin faces on the next step of each chain — never to an
     arbitrary system font. That is what keeps «گرید SN500» looking like one
     typographic decision instead of two.

     If you change this, also update the two <link rel="preload"> hrefs in
     lib/layout.js so the chosen face is still preloaded.                    */
  --f-fa:      "Vazirmatn", "Inter", -apple-system, "Segoe UI", Tahoma, sans-serif;
  --f-fa-mono: "Vazirmatn", "IBM Plex Mono", ui-monospace, "Segoe UI", Tahoma, monospace;

  /* Fluid type scale */
  --t-display: clamp(2.65rem, 1.35rem + 4.1vw, 5.15rem);
  --t-h1:      clamp(2.25rem, 1.35rem + 2.9vw, 3.75rem);
  --t-h2:      clamp(1.75rem, 1.18rem + 1.8vw, 2.75rem);
  --t-h3:      clamp(1.28rem, 1.06rem + .68vw, 1.65rem);
  --t-h4:      clamp(1.08rem, .98rem + .32vw, 1.24rem);
  --t-body-lg: clamp(1.02rem, .96rem + .26vw, 1.18rem);
  --t-body:    1rem;
  --t-sm:      .875rem;
  --t-xs:      .78rem;
  --t-2xs:     .69rem;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 88px; --s-10: 120px;
  --s-11: 160px;

  /* Layout */
  --wrap:      1320px;
  --wrap-tight:1080px;
  --wrap-text: 760px;
  --gutter:    clamp(20px, 4vw, 56px);
  --header-h:  76px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .42s;
}

/* ── 2. RESET & BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 24px);
}
body {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--tx-on-light);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 1px;
}
::selection { background: var(--gold-500); color: var(--navy); }

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.t-display {
  font-size: var(--t-display);
  line-height: .98;
  letter-spacing: -.038em;
  font-weight: 600;
}
.t-h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.03em; }
.t-h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.026em; }
.t-h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -.018em; }
.t-h4 { font-size: var(--t-h4); line-height: 1.34; letter-spacing: -.012em; }
.lead {
  font-size: var(--t-body-lg);
  line-height: 1.66;
  color: var(--tx-on-light-mute);
  text-wrap: pretty;
}
.on-dark .lead, .dark .lead { color: var(--tx-on-dark-mute); }
p { text-wrap: pretty; }

/* Eyebrow — the mono index label used throughout */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold-700);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.on-dark .eyebrow, .dark .eyebrow { color: var(--gold-500); }
.eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 1px;
  background: currentColor;
  opacity: .65;
  flex: none;
}
.eyebrow.no-rule::before { display: none; }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Phone numbers and other grouped figures.
   Digits carry no strong bidi direction, so "0914 870 0847" is three numeric
   runs separated by spaces — which an RTL paragraph orders right-to-left,
   printing 0847 870 0914. Isolating the span pins the groups in dialling
   order while leaving the surrounding Persian text untouched. It also keeps
   the locale's own typeface, unlike the Latin-data rule further down. */
.ltr-num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* SVG diagram labels follow the same tokens as body text, so switching the
   Persian typeface also restyles the corridor map and supply-chain diagram. */
.svg-mono { font-family: var(--f-mono); }
.svg-fa   { font-family: var(--f-fa-mono); }
.num  { font-variant-numeric: tabular-nums; }

/* ── 4. LAYOUT ─────────────────────────────────────────────────────────── */
.wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-tight { max-inline-size: var(--wrap-tight); }
.wrap-text  { max-inline-size: var(--wrap-text); }

.section { padding-block: clamp(64px, 8vw, 128px); position: relative; }
.section-sm { padding-block: clamp(48px, 5vw, 80px); }
.section-lg { padding-block: clamp(80px, 10vw, 160px); }

.dark  { background: var(--ink-900); color: var(--tx-on-dark); }
.deep  { background: var(--ink-950); color: var(--tx-on-dark); }
.paper { background: var(--paper); color: var(--tx-on-light); }
.tint  { background: var(--paper-2); color: var(--tx-on-light); }

/* The ruled section header — index number + title + optional aside */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--s-5);
  padding-block-end: var(--s-6);
  border-block-end: 1px solid var(--rule-light);
  margin-block-end: var(--s-8);
}
.dark .sec-head, .deep .sec-head { border-block-end-color: var(--rule-dark); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0,1.05fr) minmax(0,.85fr); align-items: end; gap: var(--s-8); }
  .sec-head.stack { grid-template-columns: minmax(0,1fr); }
}
.sec-head h2 { margin-block-start: var(--s-4); }
.sec-head .lead { margin-block-start: 0; }

/* Hairline rule element */
.rule { block-size: 1px; background: var(--rule-light); border: 0; }
.dark .rule, .deep .rule { background: var(--rule-dark); }
.rule-gold { block-size: 1px; background: var(--rule-gold); border: 0; }

/* ── 5. BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--navy);
  --btn-bd: var(--gold-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 15px 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
  z-index: -1;
}
[dir="rtl"] .btn::after { transform-origin: right center; }
.btn:hover::after { transform: scaleX(1); }
.btn:hover { color: var(--gold-500); border-color: var(--navy); }

.btn .arw { transition: transform var(--dur) var(--ease); flex: none; }
.btn:hover .arw { transform: translateX(4px); }
[dir="rtl"] .btn .arw { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arw { transform: scaleX(-1) translateX(4px); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--navy); }
.btn-ghost::after { background: var(--navy); }
.btn-ghost:hover { color: var(--white); }

.btn-line-light { --btn-bg: transparent; --btn-fg: var(--tx-on-dark); --btn-bd: rgba(255,255,255,.28); }
.btn-line-light::after { background: var(--white); }
.btn-line-light:hover { color: var(--navy); border-color: var(--white); }

.btn-sm { padding: 11px 20px; font-size: var(--t-xs); }
.btn-lg { padding: 19px 36px; font-size: var(--t-body); }
.btn-block { inline-size: 100%; }

/* Text link with animated rule */
.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy);
  padding-block-end: 5px;
  position: relative;
  letter-spacing: .01em;
}
.dark .link, .deep .link, .on-dark .link,
.mega .link, .dropdown .link, .drawer .link,
.hero .link, .rail-card .link, .site-footer .link { color: var(--gold-500); }
.link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: currentColor;
  opacity: .32;
}
.link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  block-size: 1px;
  inline-size: 0;
  background: currentColor;
  transition: inline-size var(--dur) var(--ease-out);
}
.link:hover::after { inline-size: 100%; }
.link .arw { transition: transform var(--dur) var(--ease); }
.link:hover .arw { transform: translateX(4px); }
[dir="rtl"] .link .arw { transform: scaleX(-1); }
[dir="rtl"] .link:hover .arw { transform: scaleX(-1) translateX(4px); }

/* ── 6. HEADER & NAVIGATION ────────────────────────────────────────────── */
.topbar {
  background: var(--ink-950);
  color: var(--tx-on-dark-mute);
  font-size: var(--t-2xs);
  font-family: var(--f-mono);
  letter-spacing: .07em;
  border-block-end: 1px solid var(--rule-dark-soft);
  position: relative;
  z-index: 60;
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); block-size: 38px;
}
.topbar-l { display: flex; align-items: center; gap: var(--s-5); min-inline-size: 0; }
.topbar-l span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar a:hover { color: var(--gold-500); }
.topbar .dot { color: var(--gold-700); }
.topbar-r { display: flex; align-items: center; gap: var(--s-4); flex: none; }
@media (max-width: 820px) { .topbar-l span.hide-sm { display: none; } }
@media (max-width: 560px) { .topbar { display: none; } }

/* Language switcher — real links, so language works without JavaScript */
.lang-switch { display: inline-flex; border: 1px solid var(--rule-dark); flex: none; }
.lang-switch a {
  display: block;
  padding: 3px 9px;
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--tx-on-dark-dim);
  transition: all .25s var(--ease);
}
.lang-switch a.on { background: var(--gold-500); color: var(--navy); font-weight: 600; }
.lang-switch a:not(.on):hover { color: var(--gold-500); }
[dir="rtl"] .lang-switch a { letter-spacing: 0; }

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(13,27,42,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid var(--rule-dark);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.scrolled { background: rgba(6,13,21,.97); border-block-end-color: var(--rule-gold-soft); }
.hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); block-size: var(--header-h);
}

/* Logo lockup */
.logo { display: inline-flex; align-items: center; gap: 13px; flex: none; }
.logo-mark { inline-size: 38px; block-size: 38px; flex: none; }
.logo-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.logo-name {
  font-size: 15px; font-weight: 600; letter-spacing: .015em; color: var(--white);
  white-space: nowrap;
}
.logo-sub {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .21em;
  text-transform: uppercase; color: var(--gold-500); white-space: nowrap;
}
@media (max-width: 359px) { .logo-txt { display: none; } }

/* Primary nav */
.nav { display: none; }
@media (min-width: 1060px) { .nav { display: flex; align-items: center; gap: 2px; } }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .005em;
  color: var(--tx-on-dark);
  transition: color .25s var(--ease);
  position: relative;
}
.nav-link::after {
  content: ""; position: absolute; inset-inline: 16px; inset-block-end: 2px;
  block-size: 1px; background: var(--gold-500);
  transform: scaleX(0); transform-origin: center;
  transition: transform .32s var(--ease-out);
}
.nav-link:hover, .nav-item.open .nav-link, .nav-link[aria-current="page"] { color: var(--gold-500); }
.nav-link:hover::after, .nav-item.open .nav-link::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link .chev { transition: transform .3s var(--ease); opacity: .6; }
.nav-item.open .nav-link .chev { transform: rotate(180deg); opacity: 1; }

.hdr-cta { display: none; align-items: center; gap: var(--s-5); flex: none; }
@media (min-width: 1060px) { .hdr-cta { display: flex; } }
/* header link is a plain nav-weight link, not the ruled body link */
.hdr-cta .link { color: var(--tx-on-dark); font-weight: 500; padding-block-end: 0; }
.hdr-cta .link::before { display: none; }
.hdr-cta .link::after { inset-block-end: -4px; background: var(--gold-500); }
.hdr-cta .link:hover { color: var(--gold-500); }

/* Dropdown & mega-menu */
.dropdown {
  position: absolute;
  inset-block-start: calc(100% + 14px);
  inset-inline-start: 0;
  min-inline-size: 320px;
  background: var(--ink-850);
  border: 1px solid var(--rule-dark);
  border-block-start: 2px solid var(--gold-500);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow: 0 32px 64px -20px rgba(0,0,0,.7);
}
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-link {
  display: block; padding: 15px 22px;
  border-block-end: 1px solid var(--rule-dark-soft);
  transition: background .25s var(--ease), padding-inline-start .25s var(--ease);
}
.dd-link:last-child { border-block-end: 0; }
.dd-link:hover { background: var(--ink-800); padding-inline-start: 28px; }
.dd-link strong { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--tx-on-dark); }
.dd-link span { display: block; font-size: var(--t-xs); color: var(--tx-on-dark-dim); margin-block-start: 3px; }
.dd-link:hover strong { color: var(--gold-500); }

.mega {
  position: fixed;
  inset-inline: 0;
  inset-block-start: calc(var(--header-h) + var(--mega-top, 38px));
  background: var(--ink-900);
  border-block: 1px solid var(--rule-dark);
  border-block-start-color: var(--gold-500);
  border-block-start-width: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.75);
  max-block-size: calc(100vh - var(--header-h) - 60px);
  overflow-y: auto;
}
.nav-item.open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(3, minmax(0,1fr));
  padding-block: var(--s-6);
}
@media (min-width: 1180px) { .mega-grid { grid-template-columns: repeat(3, minmax(0,1fr)) 300px; } }
.mega-col { padding-inline: var(--s-5); border-inline-end: 1px solid var(--rule-dark-soft); }
.mega-col:last-child { border-inline-end: 0; }
.mega-cat {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: 13px var(--s-3);
  transition: background .25s var(--ease);
}
.mega-cat:hover { background: var(--ink-800); }
.mega-cat .idx {
  font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--gold-700);
  padding-block-start: 4px; flex: none; letter-spacing: .06em;
}
.mega-cat strong { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--tx-on-dark); }
.mega-cat span { display: block; font-size: var(--t-xs); color: var(--tx-on-dark-dim); margin-block-start: 2px; line-height: 1.45; }
.mega-cat:hover strong { color: var(--gold-500); }
.mega-aside {
  padding-inline: var(--s-5);
  border-inline-start: 1px solid var(--rule-dark-soft);
}
.mega-aside .eyebrow { margin-block-end: var(--s-4); }
.mega-feat { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: var(--s-5); }
.chip {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .06em;
  padding: 5px 10px; border: 1px solid var(--rule-dark);
  color: var(--tx-on-dark-mute);
  transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--gold-500); color: var(--gold-500); }


/* Catalogue dropdown — compact division rows (mirrors the Company/Services
   dropdowns so the whole bar reads as one flat menu). */
.dropdown-cats { min-inline-size: 290px; padding: 6px; }
.dd-cat {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 11px 14px;
  border-block-end: 1px solid var(--rule-dark-soft);
  transition: background .25s var(--ease), padding-inline-start .25s var(--ease);
}
.dd-cat:last-child { border-block-end: 0; }
.dd-cat:hover { background: var(--ink-800); padding-inline-start: 20px; }
.dd-cat .ic { flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; color: var(--gold-500); }
.dd-cat .ic svg { display: block; }
.dd-cat .tx strong { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--tx-on-dark); }
.dd-cat .tx span {
  display: block; font-family: var(--f-mono); font-size: var(--t-2xs);
  letter-spacing: .1em; color: var(--tx-on-dark-dim); margin-block-start: 2px;
}
[dir="rtl"] .dd-cat .tx span { letter-spacing: 0; font-family: var(--f-fa-mono); }
.dd-cat:hover .tx strong { color: var(--gold-500); }
.dd-cat-all { border-block-start: 1px solid var(--rule-gold); margin-block-start: 4px; }
.dd-cat-all .ic { color: var(--gold-500); }
[dir="rtl"] .dd-cat-all .ic svg { transform: scaleX(-1); }

/* Seven top-level items need a little more room before the mobile burger */
@media (min-width: 1060px) and (max-width: 1300px) {
  .nav-link { padding-inline: 11px; font-size: .84rem; }
  .hdr-cta .link { display: none; }
}

/* Burger + mobile drawer */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  inline-size: 44px; block-size: 44px; align-items: center; flex: none;
}
@media (min-width: 1060px) { .burger { display: none; } }
.burger i { display: block; inline-size: 21px; block-size: 1.5px; background: var(--tx-on-dark); transition: transform .3s var(--ease), opacity .2s; }
.burger.on i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.on i:nth-child(2) { opacity: 0; }
.burger.on i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 70;
  background: var(--ink-950);
  transform: translateX(100%);
  transition: transform .45s var(--ease-out);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.on { transform: translateX(0); }
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  block-size: var(--header-h); padding-inline: var(--gutter); flex: none;
  border-block-end: 1px solid var(--rule-dark);
}
.drawer-body { padding: var(--s-6) var(--gutter) var(--s-8); flex: 1; }
.drawer-sec { border-block-end: 1px solid var(--rule-dark); }
.drawer-sec > a, .drawer-tog {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  inline-size: 100%; padding-block: 19px;
  font-size: 1.14rem; font-weight: 600; color: var(--tx-on-dark);
  text-align: start; letter-spacing: -.015em;
}
.drawer-tog .chev { transition: transform .3s var(--ease); color: var(--gold-500); }
.drawer-sec.on .drawer-tog .chev { transform: rotate(180deg); }
.drawer-sub { display: none; padding-block-end: var(--s-5); }
.drawer-sec.on .drawer-sub { display: block; }
.drawer-sub a {
  display: flex; align-items: center; gap: var(--s-4);
  padding-block: 11px; font-size: var(--t-sm); color: var(--tx-on-dark-mute);
  border-block-start: 1px solid var(--rule-dark-soft);
}
.drawer-sub a .idx { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--gold-700); }
.drawer-sub a:hover { color: var(--gold-500); }
.drawer-foot { padding: var(--s-6) var(--gutter) var(--s-8); border-block-start: 1px solid var(--rule-dark); }
.drawer-foot .btn { inline-size: 100%; margin-block-end: var(--s-4); }
.drawer-contact { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--tx-on-dark-dim); line-height: 2; }
.drawer-contact a:hover { color: var(--gold-500); }

body.locked { overflow: hidden; }

/* ── 7. HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink-950);
  color: var(--tx-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg svg, .hero-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(6,13,21,.50) 0%, rgba(6,13,21,.70) 55%, rgba(6,13,21,.95) 100%),
    radial-gradient(120% 90% at 78% 22%, rgba(212,175,55,.13) 0%, transparent 62%);
}
[dir="rtl"] .hero-veil {
  background:
    linear-gradient(to bottom, rgba(6,13,21,.50) 0%, rgba(6,13,21,.70) 55%, rgba(6,13,21,.95) 100%),
    radial-gradient(120% 90% at 22% 22%, rgba(212,175,55,.13) 0%, transparent 62%);
}

/* Home hero: a directional scrim keeps the copy legible on the inline-start
   side while letting the port elevation read clearly on the other. */
.hero-home .hero-veil {
  background:
    linear-gradient(to right, rgba(6,13,21,.93) 0%, rgba(6,13,21,.78) 34%, rgba(6,13,21,.34) 66%, rgba(6,13,21,.46) 100%),
    linear-gradient(to bottom, rgba(6,13,21,.34) 0%, rgba(6,13,21,.16) 42%, rgba(6,13,21,.62) 78%, rgba(6,13,21,.90) 100%),
    radial-gradient(110% 80% at 80% 20%, rgba(212,175,55,.15) 0%, transparent 60%);
}
[dir="rtl"] .hero-home .hero-veil {
  background:
    linear-gradient(to left, rgba(6,13,21,.93) 0%, rgba(6,13,21,.78) 34%, rgba(6,13,21,.34) 66%, rgba(6,13,21,.46) 100%),
    linear-gradient(to bottom, rgba(6,13,21,.34) 0%, rgba(6,13,21,.16) 42%, rgba(6,13,21,.62) 78%, rgba(6,13,21,.90) 100%),
    radial-gradient(110% 80% at 20% 20%, rgba(212,175,55,.15) 0%, transparent 60%);
}
.hero-in { position: relative; z-index: 2; }

.hero-home { min-block-size: min(92vh, 900px); display: flex; align-items: flex-end; }
.hero-home .hero-in { padding-block: clamp(120px, 16vh, 190px) 0; inline-size: 100%; }
.hero-copy { max-inline-size: 900px; }
.hero-title { margin-block: var(--s-5) var(--s-6); }
.hero-title .ln { display: block; }
.hero-title .ln:last-child { color: var(--gold-500); }
.hero-lead { max-inline-size: 660px; color: var(--tx-on-dark-mute); font-size: var(--t-body-lg); line-height: 1.66; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-7); }

/* Slogan rail — brand promise as three ruled columns */
.slogan-rail {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-block-start: clamp(48px, 7vw, 88px);
  border-block-start: 1px solid var(--rule-gold);
}
@media (min-width: 760px) { .slogan-rail { grid-template-columns: repeat(3, 1fr); } }
.slogan-cell {
  padding: var(--s-5) 0 var(--s-6);
  border-block-end: 1px solid var(--rule-dark);
  padding-inline-end: var(--s-6);
}
@media (min-width: 760px) {
  .slogan-cell { border-block-end: 0; border-inline-end: 1px solid var(--rule-dark); padding-inline: 0 var(--s-6); }
  .slogan-cell + .slogan-cell { padding-inline-start: var(--s-6); }
  .slogan-cell:last-child { border-inline-end: 0; }
}
.slogan-cell .n { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--gold-700); letter-spacing: .16em; }
.slogan-cell .k { display: block; font-size: var(--t-h4); font-weight: 600; margin-block: 10px 6px; letter-spacing: -.018em; }
.slogan-cell .v { font-size: var(--t-sm); color: var(--tx-on-dark-dim); line-height: 1.55; }

/* Hero stat strip */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  border-block-start: 1px solid var(--rule-dark);
  background: rgba(6,13,21,.55);
  backdrop-filter: blur(8px);
  position: relative; z-index: 2;
}
.stat-cell {
  padding: var(--s-6) var(--s-5);
  border-inline-end: 1px solid var(--rule-dark);
  display: flex; align-items: baseline; gap: var(--s-4);
}
.stat-cell:last-child { border-inline-end: 0; }
.stat-cell .v {
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.7rem); font-weight: 600;
  color: var(--gold-500); letter-spacing: -.035em; line-height: 1; flex: none;
  font-variant-numeric: tabular-nums;
}
.stat-cell .k { font-size: var(--t-sm); font-weight: 600; color: var(--tx-on-dark); display: block; }
.stat-cell .n { font-size: var(--t-xs); color: var(--tx-on-dark-dim); display: block; margin-block-start: 2px; }

/* Page hero (interior pages) */
.hero-page { padding-block: clamp(90px, 12vw, 150px) clamp(56px, 7vw, 92px); }
.hero-page .hero-in { display: grid; gap: var(--s-6); }
@media (min-width: 980px) {
  .hero-page .hero-in { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); align-items: end; gap: var(--s-9); }
}
.hero-page h1 { margin-block-start: var(--s-5); }

/* Breadcrumb */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: var(--t-2xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-on-dark-dim);
}
.crumbs a:hover { color: var(--gold-500); }
.crumbs .sep { color: var(--gold-700); }
.crumbs [aria-current] { color: var(--tx-on-dark-mute); }

/* ── 8. CARDS & MODULES ────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Category card — the primary product entry point */
.cat-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule-light);
  padding: var(--s-6);
  min-block-size: 100%;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 2px; background: var(--gold-500);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
[dir="rtl"] .cat-card::before { transform-origin: right center; }
.cat-card:hover { border-color: var(--rule-gold); transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(13,27,42,.4); }
.cat-card:hover::before { transform: scaleX(1); }
.cat-card .idx {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .16em;
  color: var(--gold-700); display: block; margin-block-end: var(--s-5);
}
.cat-card .art { margin-block-end: var(--s-5); }
.cat-card h3 { margin-block-end: 10px; }
.cat-card p { font-size: var(--t-sm); color: var(--tx-on-light-mute); line-height: 1.58; }
.cat-card .cc-foot {
  margin-block-start: auto; padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule-light-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-on-light-dim);
}
.cat-card:hover .cc-foot .go { color: var(--gold-700); }
.cat-card .cc-foot .go { transition: color var(--dur) var(--ease); font-weight: 600; }

/* Dark variant */
.dark .cat-card, .deep .cat-card {
  background: var(--ink-850); border-color: var(--rule-dark); color: var(--tx-on-dark);
}
.dark .cat-card p, .deep .cat-card p { color: var(--tx-on-dark-mute); }
.dark .cat-card .cc-foot, .deep .cat-card .cc-foot { border-block-start-color: var(--rule-dark); color: var(--tx-on-dark-dim); }
.dark .cat-card:hover, .deep .cat-card:hover { background: var(--ink-800); box-shadow: 0 24px 48px -28px rgba(0,0,0,.7); }
.dark .cat-card:hover .cc-foot .go, .deep .cat-card:hover .cc-foot .go { color: var(--gold-500); }

/* Featured product tile */
.prod-tile {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--ink-850);
  border: 1px solid var(--rule-dark);
  transition: all var(--dur) var(--ease);
  min-block-size: 100%;
}
.prod-tile:hover { background: var(--ink-800); border-color: var(--rule-gold); transform: translateY(-3px); }
.prod-tile .abbr {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .14em;
  color: var(--gold-500); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.prod-tile .abbr .cat { color: var(--tx-on-dark-dim); letter-spacing: .08em; }
.prod-tile h3 { font-size: var(--t-h4); color: var(--tx-on-dark); }
.prod-tile p { font-size: var(--t-xs); color: var(--tx-on-dark-mute); line-height: 1.55; }
.prod-tile .go {
  margin-block-start: auto; padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--rule-dark-soft);
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-on-dark-dim);
  display: flex; align-items: center; justify-content: space-between;
  transition: color var(--dur) var(--ease);
}
.prod-tile:hover .go { color: var(--gold-500); }

/* Product row — the catalogue list format */
.prod-list { border-block-start: 1px solid var(--rule-light); }
.dark .prod-list, .deep .prod-list { border-block-start-color: var(--rule-dark); }
.prod-row {
  display: grid; gap: var(--s-3) var(--s-5);
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--rule-light);
  transition: background var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
  position: relative;
}
.dark .prod-row, .deep .prod-row { border-block-end-color: var(--rule-dark); }
@media (min-width: 900px) {
  .prod-row { grid-template-columns: 76px minmax(0,2.1fr) minmax(0,2.4fr) auto; padding-inline: var(--s-3); }
  .prod-row:hover { background: var(--paper-2); padding-inline: var(--s-5); }
  .dark .prod-row:hover, .deep .prod-row:hover { background: var(--ink-850); }
}
.prod-row .pn { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--gold-700); letter-spacing: .1em; }
.prod-row .pt { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.prod-row .pt h3 { font-size: var(--t-h4); }
.prod-row .pt .formula { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--tx-on-light-dim); }
.dark .prod-row .pt .formula, .deep .prod-row .pt .formula { color: var(--tx-on-dark-dim); }
.prod-row .pd { font-size: var(--t-sm); color: var(--tx-on-light-mute); line-height: 1.55; }
.dark .prod-row .pd, .deep .prod-row .pd { color: var(--tx-on-dark-mute); }
.prod-row .pa { display: flex; align-items: center; gap: var(--s-4); justify-content: flex-end; }
.prod-row .pa .rfq {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--rule-light); color: var(--tx-on-light-mute);
  transition: all .25s var(--ease); white-space: nowrap;
}
.dark .prod-row .pa .rfq, .deep .prod-row .pa .rfq { border-color: var(--rule-dark); color: var(--tx-on-dark-mute); }
.prod-row .pa .rfq:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy); }
.prod-row .pa .go { color: var(--gold-700); transition: transform .25s var(--ease); }
.dark .prod-row .pa .go, .deep .prod-row .pa .go { color: var(--gold-500); }
.prod-row:hover .pa .go { transform: translateX(4px); }
[dir="rtl"] .prod-row .pa .go { transform: scaleX(-1); }
[dir="rtl"] .prod-row:hover .pa .go { transform: scaleX(-1) translateX(4px); }
@media (max-width: 899px) {
  .prod-row .pn { display: none; }
  .prod-row .pd { grid-column: 1 / -1; }
  .prod-row .pa { grid-column: 1 / -1; justify-content: flex-start; }
}


/* Compact variant — name + arrow only, used where the list sits in a narrow
   column (the home page food spotlight). Without this the four-column product
   grid leaves a wide gap where the description would be. */
@media (min-width: 900px) {
  .prod-list-compact .prod-row { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.prod-list-compact .prod-row { padding-block: 14px; }
.prod-list-compact .pt h3 { font-size: var(--t-body); }

/* Numbered feature list (Why us / values) */
.num-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.num-item {
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  border-block-start: 1px solid var(--rule-light);
  padding-inline-end: var(--s-6);
}
.dark .num-item, .deep .num-item { border-block-start-color: var(--rule-dark); }
.num-item .n {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .16em;
  color: var(--gold-700); display: block; margin-block-end: var(--s-4);
}
.dark .num-item .n, .deep .num-item .n { color: var(--gold-500); }
.num-item h3 { font-size: var(--t-h4); margin-block-end: 10px; }
.num-item p { font-size: var(--t-sm); color: var(--tx-on-light-mute); line-height: 1.62; }
.dark .num-item p, .deep .num-item p { color: var(--tx-on-dark-mute); }

/* Data table — the signature "record" component */
.data-table { border-block-start: 1px solid var(--rule-gold); font-size: var(--t-sm); }
.data-table .dt-row {
  display: grid; gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr;
  padding-block: 15px;
  border-block-end: 1px solid var(--rule-light);
}
.dark .data-table .dt-row, .deep .data-table .dt-row { border-block-end-color: var(--rule-dark); }
@media (min-width: 620px) { .data-table .dt-row { grid-template-columns: minmax(150px, .58fr) minmax(0,1fr); } }
.data-table .k {
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .07em;
  color: var(--tx-on-light-dim); text-transform: uppercase;
}
.dark .data-table .k, .deep .data-table .k { color: var(--gold-700); }
.data-table .v { color: var(--tx-on-light); line-height: 1.55; }
.dark .data-table .v, .deep .data-table .v { color: var(--tx-on-dark); }

/* Standard content table */
.tbl { font-size: var(--t-sm); margin-block: var(--s-5); }
.tbl th, .tbl td { padding: 13px var(--s-4); text-align: start; vertical-align: top; border-block-end: 1px solid var(--rule-light); }
.tbl th {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-on-light-dim); border-block-end-color: var(--rule-gold); font-weight: 500;
}
.tbl td { color: var(--tx-on-light-mute); line-height: 1.55; }
.tbl td:first-child { color: var(--tx-on-light); font-weight: 500; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tag / pill list */
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-size: var(--t-xs); padding: 7px 13px;
  border: 1px solid var(--rule-light); color: var(--tx-on-light-mute);
  transition: all .25s var(--ease);
}
.dark .tag, .deep .tag { border-color: var(--rule-dark); color: var(--tx-on-dark-mute); }
a.tag:hover { border-color: var(--gold-500); color: var(--gold-700); }
.dark a.tag:hover, .deep a.tag:hover { color: var(--gold-500); }
.tag-gold { border-color: var(--rule-gold); color: var(--gold-700); }
.dark .tag-gold, .deep .tag-gold { color: var(--gold-500); }

/* Bullet list with gold markers */
.blist { display: grid; gap: 13px; }
.blist li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3);
  font-size: var(--t-sm); line-height: 1.6; color: var(--tx-on-light-mute);
}
.dark .blist li, .deep .blist li { color: var(--tx-on-dark-mute); }
.blist li::before {
  content: ""; inline-size: 7px; block-size: 7px;
  border: 1px solid var(--gold-500); margin-block-start: 8px;
  transform: rotate(45deg);
}
.blist.tight li { font-size: var(--t-xs); }

/* Split feature block */
.split { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(48px, 6vw, 96px); }
  .split.narrow-first { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); }
  .split.narrow-last  { grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); }
  .split.sticky-first > :first-child { position: sticky; inset-block-start: calc(var(--header-h) + 40px); }
}

/* Quote / pull statement */
.pullquote {
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
  line-height: 1.34; letter-spacing: -.024em; font-weight: 500;
  border-inline-start: 2px solid var(--gold-500);
  padding-inline-start: var(--s-6);
  margin-block: var(--s-7);
  color: var(--tx-on-light);
}
.dark .pullquote, .deep .pullquote { color: var(--tx-on-dark); }

/* Accordion (services) */
.acc { border-block-start: 1px solid var(--rule-light); }
.dark .acc, .deep .acc { border-block-start-color: var(--rule-dark); }
.acc-item { border-block-end: 1px solid var(--rule-light); }
.dark .acc-item, .deep .acc-item { border-block-end-color: var(--rule-dark); }
.acc-btn {
  inline-size: 100%; display: grid; gap: var(--s-4);
  grid-template-columns: 46px minmax(0,1fr) 32px;
  align-items: center; text-align: start;
  padding-block: var(--s-6);
  transition: padding-inline var(--dur) var(--ease);
}
@media (min-width: 900px) { .acc-item:hover .acc-btn { padding-inline-start: var(--s-4); } }
.acc-btn .n { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .14em; color: var(--gold-700); }
.dark .acc-btn .n, .deep .acc-btn .n { color: var(--gold-500); }
.acc-btn h3 { font-size: var(--t-h3); transition: color var(--dur) var(--ease); }
.acc-btn .sub { font-size: var(--t-sm); color: var(--tx-on-light-mute); margin-block-start: 6px; }
.dark .acc-btn .sub, .deep .acc-btn .sub { color: var(--tx-on-dark-mute); }
.acc-item.on .acc-btn h3 { color: var(--gold-700); }
.dark .acc-item.on .acc-btn h3, .deep .acc-item.on .acc-btn h3 { color: var(--gold-500); }
.acc-ico { position: relative; inline-size: 16px; block-size: 16px; justify-self: end; }
.acc-ico::before, .acc-ico::after {
  content: ""; position: absolute; background: var(--gold-500);
  inset-block-start: 50%; inset-inline-start: 0;
  inline-size: 16px; block-size: 1.5px; transform: translateY(-50%);
  transition: transform .35s var(--ease);
}
.acc-ico::after { transform: translateY(-50%) rotate(90deg); }
.acc-item.on .acc-ico::after { transform: translateY(-50%) rotate(0); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.acc-item.on .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-inner {
  display: grid; gap: var(--s-6);
  padding-block-end: var(--s-7);
  padding-inline-start: calc(46px + var(--s-4));
}
@media (min-width: 900px) { .acc-inner { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--s-8); } }
@media (max-width: 620px) { .acc-inner { padding-inline-start: 0; } .acc-btn { grid-template-columns: 34px minmax(0,1fr) 20px; } }

/* Timeline / route list */
.route-list { display: grid; gap: 0; }
.route-item {
  display: grid; gap: var(--s-2) var(--s-5);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--rule-dark);
  position: relative;
}
@media (min-width: 760px) { .route-item { grid-template-columns: minmax(180px, .5fr) minmax(0,1fr); } }
.route-item .k {
  font-size: var(--t-h4); font-weight: 600; color: var(--tx-on-dark);
  display: flex; align-items: center; gap: var(--s-4); letter-spacing: -.016em;
}
.route-item .k::before {
  content: ""; inline-size: 6px; block-size: 6px; background: var(--gold-500);
  transform: rotate(45deg); flex: none;
}
.route-item .v { font-size: var(--t-sm); color: var(--tx-on-dark-mute); line-height: 1.6; }

/* Industry grid */
.ind-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%,270px),1fr)); border-block-start: 1px solid var(--rule-light); }
.dark .ind-grid, .deep .ind-grid { border-block-start-color: var(--rule-dark); }
.ind-item {
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  border-block-end: 1px solid var(--rule-light);
  padding-inline-end: var(--s-6);
  transition: padding-inline-start var(--dur) var(--ease);
}
.dark .ind-item, .deep .ind-item { border-block-end-color: var(--rule-dark); }
.ind-item h3 { font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; }
.ind-item p { font-size: var(--t-xs); color: var(--tx-on-light-dim); margin-block-start: 6px; }
.dark .ind-item p, .deep .ind-item p { color: var(--tx-on-dark-dim); }

/* Insight card */
.ins-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6) 0;
  border-block-start: 1px solid var(--rule-light);
  transition: padding-inline var(--dur) var(--ease);
  min-block-size: 100%;
}
.dark .ins-card, .deep .ins-card { border-block-start-color: var(--rule-dark); }
.ins-card .meta {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-700);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
}
.dark .ins-card .meta, .deep .ins-card .meta { color: var(--gold-500); }
.ins-card .meta .sep { opacity: .45; }
.ins-card .meta .dt { color: var(--tx-on-light-dim); }
.dark .ins-card .meta .dt, .deep .ins-card .meta .dt { color: var(--tx-on-dark-dim); }
.ins-card h3 { font-size: var(--t-h3); transition: color var(--dur) var(--ease); }
.ins-card:hover h3 { color: var(--gold-700); }
.dark .ins-card:hover h3, .deep .ins-card:hover h3 { color: var(--gold-500); }
.ins-card p { font-size: var(--t-sm); color: var(--tx-on-light-mute); line-height: 1.6; }
.dark .ins-card p, .deep .ins-card p { color: var(--tx-on-dark-mute); }
.ins-card .go { margin-block-start: auto; padding-block-start: var(--s-4); }

/* ── 9. PRODUCT DETAIL ─────────────────────────────────────────────────── */
.pd-layout { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1040px) {
  .pd-layout { grid-template-columns: minmax(0,1fr) 372px; gap: clamp(48px, 5vw, 80px); }
}
.pd-block { padding-block-end: var(--s-7); }
.pd-block + .pd-block { border-block-start: 1px solid var(--rule-light); padding-block-start: var(--s-7); }
.pd-block h2 {
  font-size: var(--t-h3); margin-block-end: var(--s-5);
  display: flex; align-items: baseline; gap: var(--s-4);
}
.pd-block h2 .n { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--gold-700); letter-spacing: .14em; }

/* Spec rail — sticky conversion module, the site's signature UX device */
.rail { position: relative; }
@media (min-width: 1040px) { .rail { position: sticky; inset-block-start: calc(var(--header-h) + 28px); } }
.rail-card { background: var(--ink-900); color: var(--tx-on-dark); border: 1px solid var(--rule-gold); }
.rail-head {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-block-end: 1px solid var(--rule-dark);
  background: linear-gradient(135deg, var(--ink-850), var(--ink-900));
}
.rail-head .eyebrow { color: var(--gold-500); }
.rail-head h2 { font-size: var(--t-h4); margin-block-start: var(--s-3); color: var(--white); }
.rail-body { padding: var(--s-5); }
.rail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-block: 11px; border-block-end: 1px solid var(--rule-dark-soft);
  font-size: var(--t-xs);
}
.rail-row:last-of-type { border-block-end: 0; }
.rail-row .k { font-family: var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-700); flex: none; }
.rail-row .v { color: var(--tx-on-dark); text-align: end; line-height: 1.5; }
.rail-actions { padding: var(--s-5); border-block-start: 1px solid var(--rule-dark); display: grid; gap: var(--s-3); }
.rail-note {
  padding: var(--s-4) var(--s-5); background: var(--ink-950);
  border-block-start: 1px solid var(--rule-dark);
  font-size: var(--t-2xs); font-family: var(--f-mono); line-height: 1.7;
  color: var(--tx-on-dark-dim); letter-spacing: .04em;
}
.rail-note strong { color: var(--gold-500); font-weight: 500; }

/* ── 10. FORMS ─────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--s-5); }
.form-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); }
.field { display: grid; gap: 9px; min-inline-size: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-on-light-dim);
  display: flex; align-items: center; gap: var(--s-3);
}
.dark .field label, .deep .field label { color: var(--gold-700); }
.field label .req { color: var(--gold-700); }
.dark .field label .req, .deep .field label .req { color: var(--gold-500); }
.field input, .field select, .field textarea {
  inline-size: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-light);
  color: var(--tx-on-light);
  font-size: var(--t-sm);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.dark .field input, .dark .field select, .dark .field textarea,
.deep .field input, .deep .field select, .deep .field textarea {
  background: var(--ink-850); border-color: var(--rule-dark); color: var(--tx-on-dark);
}
.field textarea { min-block-size: 130px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--tx-on-light-dim); opacity: .75; }
.dark .field input::placeholder, .dark .field textarea::placeholder,
.deep .field input::placeholder, .deep .field textarea::placeholder { color: var(--tx-on-dark-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(212,175,55,.16);
}
.field select {
  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 1.5L6 6.5L11 1.5' stroke='%23D4AF37' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-inline-end: 42px;
}
[dir="rtl"] .field select { background-position: left 16px center; padding-inline-end: 16px; padding-inline-start: 42px; }
.field .hint { font-size: var(--t-2xs); color: var(--tx-on-light-dim); line-height: 1.5; }
.dark .field .hint, .deep .field .hint { color: var(--tx-on-dark-dim); }
.field.err input, .field.err select, .field.err textarea { border-color: #C0392B; }
.field .err-msg { display: none; font-size: var(--t-2xs); color: #C0392B; font-family: var(--f-mono); letter-spacing: .06em; }
.field.err .err-msg { display: block; }

.form-note {
  font-size: var(--t-xs); color: var(--tx-on-light-dim); line-height: 1.6;
  padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule-light);
}
.dark .form-note, .deep .form-note { color: var(--tx-on-dark-dim); border-block-start-color: var(--rule-dark); }

.form-ok {
  display: none; padding: var(--s-6);
  border: 1px solid var(--rule-gold); background: rgba(212,175,55,.07);
}
.form-ok.on { display: block; }
.form-ok h3 { font-size: var(--t-h4); margin-block-end: 10px; color: var(--gold-700); }
.dark .form-ok h3, .deep .form-ok h3 { color: var(--gold-500); }
.form-ok p { font-size: var(--t-sm); color: var(--tx-on-light-mute); }
.dark .form-ok p, .deep .form-ok p { color: var(--tx-on-dark-mute); }

/* Multi-line quote builder — RFQ line items */
.rfq-lines { display: grid; gap: var(--s-4); }
.rfq-line {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%,215px),1fr));
  padding: calc(var(--s-5) + 16px) var(--s-5) var(--s-5);
  border: 1px solid var(--rule-dark);
  background: var(--ink-850);
  position: relative;
}
.rfq-line .ln-idx {
  position: absolute; inset-block-start: -1px; inset-inline-start: -1px;
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .12em;
  padding: 4px 9px; background: var(--gold-500); color: var(--navy); font-weight: 600;
}
.rfq-line-rm {
  position: absolute; inset-block-start: 10px; inset-inline-end: 12px;
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em;
  color: var(--tx-on-dark-dim); text-transform: uppercase;
}
.rfq-line-rm:hover { color: #E07A6B; }
.rfq-add {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-500);
  padding: 13px 18px; border: 1px dashed var(--rule-gold);
  transition: all .25s var(--ease); justify-self: start;
}
.rfq-add:hover { background: rgba(212,175,55,.09); border-style: solid; }

/* Steps indicator */
.steps { display: flex; flex-wrap: wrap; gap: 0; border-block: 1px solid var(--rule-dark); margin-block-end: var(--s-7); }
.step {
  flex: 1 1 160px; padding: var(--s-5) var(--s-4);
  border-inline-end: 1px solid var(--rule-dark);
  display: flex; align-items: flex-start; gap: var(--s-4);
}
.step:last-child { border-inline-end: 0; }
.step .n {
  font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--gold-500);
  letter-spacing: .12em; flex: none; padding-block-start: 3px;
}
.step .k { font-size: var(--t-sm); font-weight: 600; color: var(--tx-on-dark); display: block; }
.step .v { font-size: var(--t-xs); color: var(--tx-on-dark-dim); display: block; margin-block-start: 3px; line-height: 1.5; }

/* ── 11. FILTER BAR (products overview) ────────────────────────────────── */
.filter-bar {
  display: grid; gap: var(--s-4);
  padding: var(--s-5); border: 1px solid var(--rule-light);
  background: var(--paper); margin-block-end: var(--s-7);
  position: sticky; inset-block-start: calc(var(--header-h) + 8px); z-index: 20;
}
@media (min-width: 860px) { .filter-bar { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; align-items: end; } }
.filter-bar .field label { color: var(--tx-on-light-dim); }
.filter-count {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-on-light-dim); white-space: nowrap;
  padding-block-end: 15px;
}
.no-results { padding: var(--s-8) 0; text-align: center; color: var(--tx-on-light-dim); font-size: var(--t-sm); }


/* ── Product sheets gallery ───────────────────────────────────────────────
   These are documents, not photographs: the source sheets are 810x1080, so
   every frame is locked to 3:4 and nothing is ever cropped. Uniform frames
   also keep the grid even — a wider "lead" tile would both crop the sheet and
   leave a hole at the end of the row. */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--s-4); }
.gal-item {
  padding: 0; border: 1px solid var(--rule-light); background: var(--paper-2);
  cursor: zoom-in; overflow: hidden; aspect-ratio: 3 / 4; position: relative;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dark .gal-item, .deep .gal-item { border-color: var(--rule-dark); background: var(--ink-850); }
.gal-item img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.gal-item:hover { border-color: var(--gold-500); transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(13,27,42,.45); }
@media (max-width: 560px) { .gal { grid-template-columns: repeat(2, 1fr); } }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  place-items: center; padding: clamp(16px, 4vw, 48px);
  background: rgba(6,13,21,.94); cursor: zoom-out;
}
.lb.on { display: grid; animation: lbin .25s var(--ease) both; }
@keyframes lbin { from { opacity: 0 } to { opacity: 1 } }
.lb img {
  max-inline-size: min(620px, 92vw); max-block-size: 92vh;
  object-fit: contain; border: 1px solid var(--rule-gold);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.75); cursor: default;
}
.lb-close {
  position: fixed; inset-block-start: 20px; inset-inline-end: 24px;
  inline-size: 46px; block-size: 46px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 20px; cursor: pointer; transition: background .25s var(--ease);
}
.lb-close:hover { background: var(--gold-500); color: var(--navy); border-color: var(--gold-500); }
.lb-nav {
  position: fixed; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 46px; block-size: 46px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24);
  color: #fff; cursor: pointer; transition: background .25s var(--ease);
}
.lb-nav:hover { background: var(--gold-500); color: var(--navy); }
.lb-prev { inset-inline-start: 20px; }
.lb-next { inset-inline-end: 20px; }
@media (max-width: 620px) { .lb-nav { display: none; } }

/* ── 12. FOOTER ────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink-950); color: var(--tx-on-dark); }
.foot-cta {
  border-block-end: 1px solid var(--rule-dark);
  padding-block: clamp(56px, 7vw, 96px);
  background:
    radial-gradient(90% 130% at 88% 10%, rgba(212,175,55,.11) 0%, transparent 58%),
    var(--ink-900);
}
[dir="rtl"] .foot-cta { background: radial-gradient(90% 130% at 12% 10%, rgba(212,175,55,.11) 0%, transparent 58%), var(--ink-900); }
.foot-cta-in { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 940px) { .foot-cta-in { grid-template-columns: minmax(0,1.25fr) auto; gap: var(--s-8); } }
.foot-cta h2 { max-inline-size: 620px; }
.foot-cta p { color: var(--tx-on-dark-mute); font-size: var(--t-body-lg); max-inline-size: 580px; margin-block-start: var(--s-4); }
.foot-cta .acts { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.foot-main { padding-block: clamp(56px, 6vw, 80px) var(--s-7); }
.foot-grid { display: grid; gap: var(--s-7); }
@media (min-width: 800px) { .foot-grid { grid-template-columns: minmax(0,1.5fr) repeat(2, minmax(0,1fr)); gap: var(--s-8); } }
@media (min-width: 1120px) { .foot-grid { grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)); } }
.foot-brand .logo { margin-block-end: var(--s-5); }
.foot-slogan {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-500); line-height: 2;
  padding-block: var(--s-4); border-block: 1px solid var(--rule-dark-soft);
  margin-block-end: var(--s-5);
}
.foot-fa { font-family: var(--f-fa); font-size: var(--t-sm); color: var(--tx-on-dark-dim); direction: rtl; margin-block-start: var(--s-4); }
.foot-brand p { font-size: var(--t-sm); color: var(--tx-on-dark-mute); line-height: 1.65; max-inline-size: 400px; }
.foot-col h3 {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-500); font-weight: 500;
  padding-block-end: var(--s-4); margin-block-end: var(--s-4);
  border-block-end: 1px solid var(--rule-dark);
}
.foot-col li { margin-block-end: 11px; }
.foot-col a, .foot-col span { font-size: var(--t-sm); color: var(--tx-on-dark-mute); transition: color .25s var(--ease); line-height: 1.5; display: inline-block; }
.foot-col a:hover { color: var(--gold-500); }
.foot-col .addr { font-size: var(--t-sm); color: var(--tx-on-dark-mute); line-height: 1.8; }
.foot-col .hrs { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--tx-on-dark-dim); letter-spacing: .06em; margin-block-start: var(--s-4); line-height: 1.8; }

.foot-bottom {
  border-block-start: 1px solid var(--rule-dark);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .07em;
  color: var(--tx-on-dark-dim);
}
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.foot-bottom a:hover { color: var(--gold-500); }

/* ── 13. FLOATING QUICK ACTIONS ────────────────────────────────────────── */
.quick {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 40;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.quick.on { opacity: 1; visibility: visible; transform: translateY(0); }
.quick a {
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  background: var(--ink-900); border: 1px solid var(--rule-gold); color: var(--gold-500);
  transition: all .28s var(--ease);
  position: relative;
}
.quick a:hover { background: var(--gold-500); color: var(--navy); }
.quick a[data-tip]::after {
  content: attr(data-tip);
  position: absolute; inset-inline-end: calc(100% + 10px); inset-block-start: 50%;
  transform: translateY(-50%);
  background: var(--ink-950); color: var(--tx-on-dark);
  border: 1px solid var(--rule-dark);
  padding: 6px 11px; white-space: nowrap;
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .08em;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.quick a:hover::after { opacity: 1; }
@media (max-width: 560px) { .quick { inset-block-end: 16px; inset-inline-end: 16px; } .quick a[data-tip]::after { display: none; } }

/* ── 14. ARTICLE ───────────────────────────────────────────────────────── */
.article { font-size: var(--t-body-lg); line-height: 1.75; color: var(--tx-on-light-mute); }
.article > * + * { margin-block-start: var(--s-5); }
.article h2 {
  font-size: var(--t-h3); color: var(--tx-on-light);
  margin-block-start: var(--s-8); padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule-light);
}
.article ul { display: grid; gap: 12px; margin-block: var(--s-5); }
.article li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); font-size: var(--t-body); line-height: 1.65; }
.article li::before { content: ""; inline-size: 7px; block-size: 7px; border: 1px solid var(--gold-500); margin-block-start: 9px; transform: rotate(45deg); }
.article .pullquote { margin-block: var(--s-7); }

/* ── 15. UTILITY / MOTION ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal[data-d="1"].in { transition-delay: .08s; }
.reveal[data-d="2"].in { transition-delay: .16s; }
.reveal[data-d="3"].in { transition-delay: .24s; }
.reveal[data-d="4"].in { transition-delay: .32s; }
.reveal[data-d="5"].in { transition-delay: .4s; }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-block-start: -60px; inset-inline-start: var(--gutter);
  z-index: 100; background: var(--gold-500); color: var(--navy);
  padding: 12px 20px; font-size: var(--t-sm); font-weight: 600;
  transition: inset-block-start .25s var(--ease);
}
.skip:focus { inset-block-start: 10px; }

.mb-0 { margin-block-end: 0; }
.mt-5 { margin-block-start: var(--s-5); }
.mt-6 { margin-block-start: var(--s-6); }
.mt-7 { margin-block-start: var(--s-7); }
.max-text { max-inline-size: var(--wrap-text); }

/* Decorative corner-notch module (used sparingly) */
.notch { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
[dir="rtl"] .notch { clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }

/* ── 16. RTL & PERSIAN ───────────────────────────────────────────────────
   Persian is a first-class locale, not a mirrored afterthought. Latin
   letter-spacing is removed (it breaks Arabic-script joining), the type
   scale is rebalanced for a taller script, and line-height is opened up. */
/* The RTL rule sets tokens on <html>, but `body` declares font-family
   explicitly — so it must be reassigned here or Persian silently falls back
   to a system Arabic face. Buttons, inputs and selects inherit `font: inherit`
   but are listed anyway so form controls are never left behind. */
/* Scale tuned to Vazirmatn, which sets a little larger on the body than the
   Latin faces at the same px — so the Persian scale runs slightly tighter
   than the English one rather than matching it numerically. */
[dir="rtl"] {
  --t-display: clamp(2.1rem, 1.1rem + 3.2vw, 4.1rem);
  --t-h1:      clamp(1.85rem, 1.2rem + 2.2vw, 3rem);
  --t-h2:      clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  --t-h3:      clamp(1.18rem, 1rem + .58vw, 1.5rem);
  --t-h4:      clamp(1.02rem, .95rem + .28vw, 1.16rem);
  --t-body-lg: clamp(1.02rem, .96rem + .26vw, 1.18rem);
}
[dir="rtl"],
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] .btn,
[dir="rtl"] .link,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5 {
  font-family: var(--f-fa);
}
/* The mono lane carries Persian text and Persian numerals, so it uses the
   Persian face rather than IBM Plex Mono (which has no Arabic glyphs). */
[dir="rtl"] .mono,
[dir="rtl"] .eyebrow,
[dir="rtl"] .crumbs,
[dir="rtl"] .foot-slogan,
[dir="rtl"] .logo-sub,
[dir="rtl"] .data-table .k,
[dir="rtl"] .field label,
[dir="rtl"] .rail-row .k,
[dir="rtl"] .rail-note,
[dir="rtl"] .foot-col h3,
[dir="rtl"] .tbl th,
[dir="rtl"] .filter-count,
[dir="rtl"] .ins-card .meta,
[dir="rtl"] .cat-card .cc-foot,
[dir="rtl"] .prod-tile .go,
[dir="rtl"] .rfq-add,
[dir="rtl"] .rfq-line .ln-idx { font-family: var(--f-fa-mono); }

/* …but genuinely Latin data keeps the true monospace face */
[dir="rtl"] [dir="ltr"],
[dir="rtl"] .formula,
[dir="rtl"] .topbar-l,
[dir="rtl"] .lang-switch a { font-family: var(--f-mono); }

[dir="rtl"] body { line-height: 1.9; }

/* Arabic script must never be letter-spaced — it breaks glyph joining */
[dir="rtl"] .mono,
[dir="rtl"] .eyebrow,
[dir="rtl"] .crumbs,
[dir="rtl"] .foot-bottom,
[dir="rtl"] .foot-slogan,
[dir="rtl"] .logo-sub,
[dir="rtl"] .topbar,
[dir="rtl"] .data-table .k,
[dir="rtl"] .field label,
[dir="rtl"] .rail-row .k,
[dir="rtl"] .rail-note,
[dir="rtl"] .prod-row .pn,
[dir="rtl"] .prod-row .pa .rfq,
[dir="rtl"] .prod-tile .abbr,
[dir="rtl"] .prod-tile .go,
[dir="rtl"] .cat-card .idx,
[dir="rtl"] .cat-card .cc-foot,
[dir="rtl"] .num-item .n,
[dir="rtl"] .acc-btn .n,
[dir="rtl"] .step .n,
[dir="rtl"] .ins-card .meta,
[dir="rtl"] .slogan-cell .n,
[dir="rtl"] .foot-col h3,
[dir="rtl"] .tbl th,
[dir="rtl"] .rfq-line .ln-idx,
[dir="rtl"] .rfq-add,
[dir="rtl"] .filter-count,
[dir="rtl"] .drawer-contact,
[dir="rtl"] .chip { letter-spacing: 0; }

/* Headings: no negative tracking, more leading — Persian sets taller */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5,
[dir="rtl"] .t-display, [dir="rtl"] .t-h1, [dir="rtl"] .t-h2,
[dir="rtl"] .t-h3, [dir="rtl"] .t-h4 { letter-spacing: 0; }
[dir="rtl"] .t-display { line-height: 1.36; }
[dir="rtl"] .t-h1 { line-height: 1.4; }
[dir="rtl"] .t-h2 { line-height: 1.42; }
[dir="rtl"] .t-h3, [dir="rtl"] .t-h4 { line-height: 1.55; }
[dir="rtl"] .lead { line-height: 1.95; }
[dir="rtl"] .article { line-height: 2.05; }
[dir="rtl"] .article li { line-height: 1.95; }
[dir="rtl"] .pullquote { line-height: 1.65; }
[dir="rtl"] .hero-lead { line-height: 1.95; }
[dir="rtl"] .stat-cell .v { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }

/* The hero elevation is composed to sit opposite the copy — mirror it in RTL
   so the drawing still falls on the open side of the page. */
[dir="rtl"] .hero-bg > svg { transform: scaleX(-1); transform-origin: center; }

/* Values stay aligned to the reading edge */
[dir="rtl"] .rail-row .v { text-align: end; }
[dir="rtl"] .rail-row { align-items: baseline; }

/* Latin data (formulas, CAS, Incoterms, emails) keeps its own direction */
[dir="rtl"] [dir="ltr"]:not(.ltr-num) { font-family: var(--f-mono); unicode-bidi: isolate; }
[dir="rtl"] .formula, [dir="rtl"] .prod-tile .abbr > span:first-child { unicode-bidi: isolate; }

/* Persian numerals in the mono lane still need tabular alignment */
[dir="rtl"] .mono, [dir="rtl"] .num { font-variant-numeric: normal; }

/* Blockquote rule flips to the reading edge automatically via logical props */
[dir="rtl"] .foot-alt { text-align: start; }
.foot-alt {
  font-family: var(--f-mono); font-size: var(--t-2xs); line-height: 1.9;
  color: var(--tx-on-dark-dim); margin-block-start: var(--s-4);
  padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule-dark-soft);
}
[dir="ltr"] .foot-alt { font-family: var(--f-fa); font-size: var(--t-sm); }

/* ── 17. RESPONSIVE ADJUSTMENTS ────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .stat-cell { border-inline-end: 0; border-block-end: 1px solid var(--rule-dark); }
  .stat-cell:last-child { border-block-end: 0; }
  .hero-home { min-block-size: auto; }
  .hero-home .hero-in { padding-block: 96px 0; }
  .filter-bar { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-header, .topbar, .quick, .foot-cta, .drawer { display: none !important; }
  body { color: #000; background: #fff; }
}