/* ==========================================================================
   AL ARFAN GLOBAL EXPORTS
   Design system.

   The palette is sampled directly from the company seal:
     navy ring   #283050        gold edge  #B58E4B        highlight #FDE09A
   The structure (deep ground, muted gold, serif display over wide-tracked
   micro caps, 4px radii) follows the "royal" register the client pointed at.
   ========================================================================== */

:root {
  color-scheme: light;   /* the <meta> offers light+dark; the chosen theme decides */
  /* --- Ground layers: cream at the back, lifting to white at the front ---
     Sampled from the seal's own cream field, not a neutral grey. --- */
  --ink-0: #F7F2E6;   /* page ground */
  --ink-1: #F0E8D7;   /* alternating section */
  --ink-2: #FFFFFF;   /* card - lifts forward off the cream */
  --ink-3: #FBF6EC;   /* raised / hover */
  --ink-line: #E4D9C2;

  /* --- Navy, straight off the seal's ring. On cream it carries the type. --- */
  --navy: #232C49;
  --navy-deep: #1A2137;

  /* --- Gold, straight off the seal.
     On a light ground the prominent gold must be DARKER, not brighter,
     or it disappears. --gold-bright is therefore the deeper one here. --- */
  --gold: #B58E4B;
  --gold-bright: #7F5F26;
  --gold-glow: #C9A45F;
  --gold-accent: #8A6A33;   /* large display text only */
  --gold-deep: #6F5225;
  --gold-hair: rgba(181, 142, 75, 0.34);
  --gold-hair-soft: rgba(181, 142, 75, 0.18);

  /* --- Text --- */
  --text: #232C49;
  /* Alphas solved against the darkest ground in use (#EDE3CE, the filter rail).
     0.70 is the lowest alpha that still clears 4.5:1 for small text, so
     --text-faint sits exactly there and never goes lighter. */
  --text-muted: rgba(35, 44, 73, 0.80);
  --text-faint: rgba(35, 44, 73, 0.70);

  /* Text that sits ON a gold fill. */
  --on-gold: #1E2740;

  /* --- Component colours that differ between light and dark ---------------
     Everything theme-sensitive is a token here, so [data-theme="dark"] below
     only has to swap values. --- */
  --shade-rgb: 35, 44, 73;              /* shadows, scrims: navy on cream */
  --header-glass: rgba(247, 242, 230, .88);
  --header-glass-stuck: rgba(247, 242, 230, .97);
  --tag-bg: rgba(255, 255, 255, .93);
  --map-land: #C7B794;
  --map-stroke: #A38E66;
  --map-served: #D2A95E;
  --map-primary: #B58E4B;
  --map-origin: #232C49;
  --map-lit: #7F5F26;
  --map-card: var(--ink-2);
  --map-hover: var(--gold-bright);
  --map-pin: var(--gold-bright);
  --map-pin-ring: #FFFFFF;              /* keeps a port pin apart from the land under it */
  --drawer-bg: var(--ink-0);
  --scrim-alpha: .38;
  --footer-bg: #1A2137;
  --logo-plate: transparent;            /* behind authority logos */

  /* Shadows are warm and shallow on light ground - a black shadow on cream
     reads as dirt. */
  --shadow-sm: 0 2px 8px -2px rgba(35, 44, 73, .10);
  --shadow-md: 0 14px 30px -18px rgba(35, 44, 73, .30);
  --shadow-lg: 0 24px 48px -26px rgba(35, 44, 73, .34);

  /* --- Type --- */
  /* The reference site's type (client, 18-09-26: "they want this exact font",
     abdullahbakheetksa.com). Text is Outfit - the same font. Its headings are
     Fiorello CG Condensed, a paid Monotype face; League Gothic, set a little
     narrower and thickened, is the closest free match (research/fonts/
     heading_match.py). Big headings and figures only - small titles use
     Outfit, where a condensed face would be hard to read. The "Al Arfan"
     lettering stays Playfair: it is the logo. Arabic and Chinese swap these
     tokens - see "Languages" below. */
  --display: "League Gothic", "Arial Narrow", "Impact", sans-serif;
  --display-wdth: 88;
  --display-stroke: .016em;     /* thickens League Gothic towards Fiorello */
  --display-case: uppercase;
  --display-track: .02em;
  --ui: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --title: var(--ui);           /* card titles, product names, questions */
  --brand: "Playfair Display", "Georgia", serif;

  --radius: 4px;
  --radius-lg: 8px;
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Dark mode - the original navy design (git tag stage-1), behind the
   sun/moon switch in the header. Light (cream) stays the default.
   Only token values change; every rule above reads the tokens.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink-0: #080B14;
  --ink-1: #0B1020;
  --ink-2: #121A2E;
  --ink-3: #1A2440;
  --ink-line: #223052;

  /* On navy the prominent gold is the BRIGHT one again - the reverse of cream. */
  --gold-bright: #E4C179;
  --gold-glow: #FDE09A;
  --gold-accent: #E4C179;
  --gold-deep: #8A6A33;
  --gold-hair: rgba(181, 142, 75, 0.28);
  --gold-hair-soft: rgba(181, 142, 75, 0.14);

  --text: #F2EEE4;
  /* Stage-1 had --text-faint at 0.42, which fails 4.5:1. Solved against the
     lightest dark ground (#223052): 0.55 is the floor, so 0.60 / 0.74. */
  --text-muted: rgba(242, 238, 228, 0.74);
  --text-faint: rgba(242, 238, 228, 0.60);

  --shade-rgb: 0, 0, 0;
  --header-glass: rgba(8, 11, 20, .86);
  --header-glass-stuck: rgba(8, 11, 20, .96);
  --tag-bg: rgba(8, 11, 20, .82);
  /* Land lifted off the card (1.7:1 against it) so the continents read as
     shapes, not just outlines - the card itself drops to --ink-1 as in stage-1. */
  --map-land: #2A3A5E;
  --map-stroke: #3A4D78;
  --map-served: #8A6A33;
  --map-primary: #B58E4B;
  --map-origin: #E4C179;
  --map-lit: #FDE09A;
  --map-card: var(--ink-1);
  --map-hover: #F2EEE4;                 /* cream: not the origin gold, so hover never looks like "India" */
  --map-pin: #FFF6DE;
  --map-pin-ring: #080B14;
  /* A drawer the same black as the page, over a black dim, has no edge. */
  --drawer-bg: var(--ink-2);
  --scrim-alpha: .62;
  --footer-bg: #0B1020;
  /* Authority logos are drawn for white paper - many have navy lettering that
     vanishes on a navy card. They sit on a cream plate in dark mode. */
  --logo-plate: #F7F2E6;

  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .45);
  --shadow-md: 0 14px 30px -18px rgba(0, 0, 0, .70);
  --shadow-lg: 0 24px 48px -26px rgba(0, 0, 0, .80);
}
/* The footer is a navy block on cream; on the navy page it keeps the light type
   it already defines, and just needs a hairline to separate it. */
:root[data-theme="dark"] .footer { border-top: 1px solid var(--gold-hair-soft); }

/* Colours ease across when the switch is pressed, not on every page load. */
/* After base.html removes a browser-forced inverting filter from the page, that
   browser's matching filter on images (meant to un-invert them) would now
   invert them instead. Clear it, and put back the site's own image shadows. */
html.app-dark img:not(#_), html.app-dark video:not(#_), html.app-dark picture:not(#_) { filter: none !important; }
html.app-dark .hero__seal img:not(#_) {
  filter: drop-shadow(0 16px 28px rgba(var(--shade-rgb), .22)) drop-shadow(0 2px 4px rgba(var(--shade-rgb), .10)) !important;
}
html.app-dark .partner__mark img:not(#_) { filter: drop-shadow(0 6px 12px rgba(var(--shade-rgb), .18)) !important; }

html.theme-anim .theme-toggle svg { transition: opacity .3s var(--ease), transform .45s var(--ease) !important; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease,
              fill .35s ease, stroke .35s ease, box-shadow .35s ease !important;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;   /* no sideways jump when the intro releases the scroll lock */
  /* Kept on <html>, never on <body>: overflow-x on body forces overflow-y to
     auto, which spawns a second scroll container and breaks sticky headers. */
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Phones ignore overflow-x: hidden on <html> for panning, so anything poking
   past the right edge let the page be dragged sideways onto an empty strip.
   `clip` is honoured and, unlike hidden, creates no scroll container - so it is
   safe on <body> too and the sticky header keeps working. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  /* Stops a stray word ("to") dropping alone onto its own line. */
  text-wrap: balance;
}
h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  text-transform: var(--display-case);
  letter-spacing: var(--display-track);
  font-variation-settings: "wdth" var(--display-wdth);
  -webkit-text-stroke: var(--display-stroke) currentColor;
}
h3, h4 {
  font-family: var(--title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
p, .lead { text-wrap: pretty; }
h1 { font-size: clamp(2.9rem, 6.6vw, 5.4rem); }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
p { margin: 0 0 1.1em; color: var(--text-muted); }

::selection { background: var(--gold); color: var(--on-gold); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* Accent half of a two-part heading */
.accent { color: var(--gold-accent); }

/* ==========================================================================
   Layout
   ========================================================================== */

.shell {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--alt { background: var(--ink-1); }
.section--tight { padding: clamp(44px, 6vw, 76px) 0; }

/* A hairline rule with a diamond centred on it — echoes the seal's ring */
.rule {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 34px;
}
.rule::before, .rule::after {
  content: ""; height: 1px; background: var(--gold-hair); flex: 1;
}
.rule span {
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--gold); flex: none;
}

/* Small wide-tracked label above a heading */
.eyebrow {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 16px;
  display: block;
}

.lead { font-size: 1.18rem; color: var(--text-muted); max-width: 62ch; }
.section-head { max-width: 70ch; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  font-family: var(--ui);
  font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .3s var(--ease);
  white-space: nowrap;
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold) 100%);
  color: var(--on-gold);
  box-shadow: 0 1px 0 rgba(253, 224, 154, .5) inset;
}
/* 21-09-2026 (client): the gold button looked dark - in the light theme its gradient ran through #7F5F26 (the
   deep "gold-bright" of the cream palette). A lighter, cleaner gold here; the dark theme keeps its own on navy. */
:root:not([data-theme="dark"]) .btn--gold {
  background: linear-gradient(135deg, #CFA85F 0%, #E6C886 50%, #CBA35C 100%);
  box-shadow: 0 1px 0 rgba(255, 244, 214, .7) inset, 0 6px 16px -9px rgba(150, 112, 48, .55);
}
.btn--gold:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgba(181, 142, 75, .7);
}

.btn--ghost {
  border-color: var(--gold-hair);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--gold);
  background: rgba(181, 142, 75, .08);
  transform: translateY(-2px);
}

/* 21-09-2026 (client): in the hero the outlined button sits on the triangle backdrop - give it the page's own solid
   colour so the pattern does not show through it (same look, no dots inside). */
.hero .btn--ghost { background: var(--ink-0); }
.hero .btn--ghost:hover { background: linear-gradient(rgba(181, 142, 75, .08), rgba(181, 142, 75, .08)), var(--ink-0); }

.btn--sm { padding: 9px 18px; font-size: 12px; }
/* The header's quote button keeps its size: the menu row is measured to fit. */
.nav .btn--sm { font-size: 11px; }

/* ==========================================================================
   Header
   ========================================================================== */

/* The frosted glass lives on a layer BEHIND the header, not on the header.
   backdrop-filter makes an element the containing block for every
   position:fixed descendant, so with it on .header the mobile menu drawer was
   pinned to the header's 90px instead of the screen - a squashed strip - and its
   closed, off-to-the-right position widened the page on phones. */
.header {
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid var(--gold-hair-soft);
  transition: box-shadow .3s var(--ease);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  transition: background .3s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-md); }
.header.is-stuck::before { background: var(--header-glass-stuck); }
/* The header keeps ONE height when the page scrolls. It used to shrink once
   scrolled past 40px; a sticky header is part of the page flow, so shrinking it
   pulled everything below up by 12-26px, the browser's scroll anchoring moved
   the scroll position back above 40px, the header grew again - and it jumped up
   and down at that point (reported on an iPhone 15). Only shadow and glass change. */
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand img { width: 52px; height: 52px; }
.brand__name {
  font-family: var(--brand);
  font-size: 19px; font-weight: 600; line-height: 1.1;
  letter-spacing: .01em;
}
/* 21-09-2026 (client): Playfair Display's "A" crossbar is a hairline - 0.018em, under half a pixel in the header -
   so the "A"s of "Al Arfan" read badly. A bar 2.6x as thick is drawn exactly over it, measured from the font at
   weight 600 (F:\ModelLab\alarfan_font\crossbar.py); the rest of the letter is untouched. The ::before takes no
   width (its margins cancel it), so letter spacing stays as it was. */
.brand__A::before {
  content: ""; display: inline-block;
  width: .214em; height: .0468em;
  background: currentColor;
  vertical-align: .2556em;                  /* bottom of the bar, measured above the baseline */
  margin-left: .159em; margin-right: -.373em;
}
.brand__sub {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-bright); font-weight: 600;
}
/* Header mark enlarged at the client's request; the footer keeps the smaller size. */
.header .brand img { width: 74px; height: 74px; }
.header .brand__name { font-size: 27px; }
.header .brand__sub { font-size: 13px; }
/* 21-09-2026 (client): the name and "Global Exports" sat too far apart - the text block inherited the body's
   1.65 line height. Tighter lines, a small fixed gap. Mark and name enlarged again at the client's request. */
.brand > span { line-height: 1.12; }
.brand__sub { display: inline-block; margin-top: 3px; }

/* Link spacing tightened (17-09-26) to make room for the language switcher. */
.nav { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative;
  padding: 10px 9px;
  font-size: 12px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  transition: color .25s var(--ease);
  white-space: nowrap;
}
.nav__link:hover, .nav__link.is-active { color: var(--gold-bright); }
.nav__link::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 4px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* Logistics dropdown */
.nav__item { position: relative; }
/* The Logistics link sits inside this wrapper, not directly in the menu row;
   as a flex box the wrapper lays it out exactly like its siblings, so all the
   labels share one line (it sat 1.7px low). Desktop only - the phone drawer
   stacks the link above its sub-menu. */
@media (min-width: 1341px) {
  .nav__item { display: flex; align-items: center; }
  /* Room for "Home" and "Charcoal" (client, 18-09-26) beside the language
     button: links sit a little closer and the header may use up to 1340px
     where the screen has it (1460px on wide screens, below). Measured in
     every language with research/i18n/home_try.py and header_fit.py. */
  /* The menu takes the room between the logo and the language button and
     spreads its items evenly: packed tight only where the screen is narrow,
     airy on wide screens (client: items looked too close together). */
  .nav { gap: 0; flex: 1 1 auto; justify-content: space-between; margin-inline-start: clamp(28px, 3vw, 56px); }
  .nav__link { padding-inline: 7px; letter-spacing: .045em; }
  .nav__link::after { left: 7px; right: 7px; }
  .header .shell { width: min(1340px, 100% - var(--gutter) * 2); }
}
/* Narrow desktops (1341-1499px) are where the full menu is tightest: a
   slightly smaller logo, closer header items and no caret on the language
   button keep every label on the row in every language. */
@media (min-width: 1341px) and (max-width: 1499px) {
  .header__inner { gap: 10px; }
  .header .brand { gap: 10px; }
  .header .brand img { width: 58px; height: 58px; }
  .header .brand__name { font-size: 22.5px; }
  .header .brand__sub { font-size: 11.5px; letter-spacing: .16em; }
  .nav { margin-inline-start: 14px; }
  /* 21-09-2026 (client): room between the logo and HOME on these laptops too (the plain .nav margin above never
     applied - a later .nav { margin-left: auto } wins). German/Spanish have no spare room at 1341, so it starts small; checked in every language. */
  .header .nav { margin-inline-start: clamp(18px, calc(14vw - 170px), 46px); }   /* 18px at 1341, 21 at 1366, 32 at 1440, 40 at 1499 */
  .lang__caret { display: none; }
  .lang__btn { padding: 0 11px; }
}
/* Wide screens: more room, so the menu breathes. */
@media (min-width: 1500px) {
  .header .shell { width: min(1460px, 100% - var(--gutter) * 2); }
  /* 21-09-2026 (client): more room between the logo and HOME; the spread-out items then sit a little closer.
     ".header" is needed: the later plain ".nav { margin-left: auto }" otherwise wins and the gap stays ~16px. */
  .header .nav { margin-inline-start: clamp(48px, calc(12vw - 132px), 96px); }   /* 48px at 1500, 52 at 1536, 96 at 1900+ */
}
.nav__panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 244px;
  background: var(--ink-2);
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius);
  padding: 7px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .25s var(--ease);
  box-shadow: var(--shadow-lg);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__panel a {
  display: block; padding: 11px 13px;
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--text-muted);
  border-radius: 3px;
  transition: all .2s var(--ease);
}
.nav__panel a:hover {
  background: rgba(181, 142, 75, .1); color: var(--gold-bright);
  padding-left: 18px;
}
.caret { font-size: 9px; opacity: .7; margin-left: 3px; }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; padding: 10px;
  flex-direction: column; justify-content: center; gap: 5px;
}

/* --- Light / dark switch ------------------------------------------------
   Shows the moon in light mode (press for dark) and the sun in dark mode
   (press for light). Sits at the right end of the header on every width. */
.theme-toggle {
  order: 3; flex: none;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--gold-hair); border-radius: 50%;
  background: transparent; color: var(--gold-bright);
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .4s var(--ease);
}
.theme-toggle:hover { border-color: var(--gold); background: rgba(181, 142, 75, .10); }
.theme-toggle:active { transform: rotate(-25deg) scale(.94); }
.theme-toggle svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg) scale(.6); }
.theme-toggle .icon-moon { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
.header .brand { order: 0; }

/* --- Language switcher ---------------------------------------------------
   Globe and the current language's code; opens this page's languages, each in
   its own name. A <details> element, so it opens with no JavaScript at all
   (site.js only closes it on an outside tap or Escape). Sits just before the
   light/dark switch on every width. */
.lang { order: 3; position: relative; flex: none; }
.lang__btn {
  display: flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 10px 0 9px;
  border: 1px solid var(--gold-hair); border-radius: 999px;
  color: var(--gold-bright);
  font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn::marker { content: ""; }
.lang__btn:hover, .lang[open] .lang__btn { border-color: var(--gold); background: rgba(181, 142, 75, .10); }
.lang__globe { width: 18px; height: 18px; flex: none; }
.lang__code { color: var(--text); white-space: nowrap; }
.lang__caret { width: 11px; height: 11px; flex: none; opacity: .75; transition: transform .25s var(--ease); }
.lang[open] .lang__caret { transform: rotate(180deg); }
.lang__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 5;
  min-width: 214px; margin: 0; padding: 6px; list-style: none;
  background: var(--ink-2);
  border: 1px solid var(--gold-hair); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.lang__menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius);
  font-family: var(--ui), "Segoe UI", system-ui, sans-serif;
  font-size: 15px; line-height: 1.3; color: var(--text);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang__menu a:hover { background: rgba(181, 142, 75, .10); color: var(--gold-bright); }
.lang__menu a.is-active { color: var(--gold-bright); font-weight: 600; }
/* The country flag beside each language (client, 18-09-26). */
.lang__menu .flag {
  flex: none; width: 24px; height: 16px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(var(--shade-rgb), .18);
}
.lang__name { flex: 1; }
/* Ten languages make a tall menu: while it is open the header sits above the
   floating quote / WhatsApp buttons so they do not cover its lower rows. */
.header:has(.lang[open]) { z-index: 310; }
.lang__short {
  margin-inline-start: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--text-faint);
}
.lang__menu a.is-active .lang__short { color: var(--gold-bright); }
.lang__menu a.is-active .lang__short::before { content: "\2713\00A0"; }
.nav { order: 2; margin-left: auto; }
.burger span {
  display: block; height: 1.5px; background: var(--gold-bright);
  transition: all .3s var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-scrim { display: none; }

/* The full menu - with the enlarged logo and the light/dark switch - needs about
   1200px of header (link padding and gaps were tightened to get it there). Below
   1340px - measured with a Windows scrollbar - the row spills past the shell's
   right edge, so the burger takes over. site.js uses the same number. */
@media (max-width: 1340px) {
  /* The burger turns into the close X and must stay tappable above the drawer. */
  .burger { display: flex; position: relative; z-index: 3; order: 4; }
  /* brand | sun/moon | menu - and both buttons stay usable over the open drawer */
  .theme-toggle { order: 3; position: relative; z-index: 3; }
  .lang { margin-inline-start: auto; z-index: 4; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
    height: 100vh; height: 100dvh;
    width: min(340px, 86vw);
    background: var(--drawer-bg);
    border-left: 1px solid var(--gold-hair);
    box-shadow: -18px 0 40px -18px rgba(var(--shade-rgb), .35);
    flex-direction: column; align-items: stretch;
    padding: 96px 22px 32px; gap: 2px;
    transform: translateX(100%);
    overflow-y: auto; overscroll-behavior: contain;
    /* visibility is toggled so a closed drawer is not keyboard-focusable and
       is not announced by screen readers. Delayed so the slide-out still plays. */
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .38s var(--ease), visibility 0s;
  }
  .nav__link {
    padding: 15px 10px; font-size: 13px;
    border-bottom: 1px solid var(--ink-line);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--gold-bright); }
  .nav__item .nav__link { display: flex; justify-content: space-between; }
  .nav__item.is-open .caret { transform: rotate(180deg); }
  .nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; min-width: 0;
    padding: 4px 0 8px 16px; display: none;
  }
  .nav__item.is-open .nav__panel { display: block; }
  .nav .btn { margin: 22px 0 0 !important; justify-content: center; }

  /* Dims the page behind the open drawer; tapping it closes the menu. */
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(var(--shade-rgb), var(--scrim-alpha));
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
  .nav__item .caret { font-size: 18px; line-height: 1; opacity: .8; transition: transform .25s var(--ease); }
  /* The floating WhatsApp / quote pair sits above the header; hide it while the
     menu is open so it does not float over the drawer's links. */
  body.menu-open .floats { opacity: 0; visibility: hidden; }
}

/* Phones: a smaller mark so the name and the menu button sit comfortably. */
@media (max-width: 600px) {
  .header .brand img { width: 54px; height: 54px; }
  .header__inner { padding: 11px 0; gap: 10px; }
  .header .brand__name { font-size: 22px; }
  .header .brand__sub { font-size: 11.5px; }
  /* The language button becomes a round one like the light/dark switch. */
  .lang__btn { width: 40px; padding: 0; justify-content: center; }
  .lang__globe, .lang__caret { display: none; }
  .lang__code { font-size: 11.5px; letter-spacing: .02em; }
}
@media (max-width: 400px) {
  .header__inner { gap: 7px; }
  .header .brand { gap: 9px; }
  .header .brand img { width: 46px; height: 46px; }
  .header .brand__name { font-size: 19.5px; }
  .header .brand__sub { font-size: 10px; letter-spacing: .18em; }
  .lang__btn, .theme-toggle { width: 36px; height: 36px; }
  .burger { width: 38px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Top space trimmed (client, 18-09-26: too much empty space above the headline). */
.hero {
  position: relative;
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(52px, 7vw, 88px);
  overflow: hidden;
}
/* Warm gold bloom behind the headline, like light off the seal */
.hero::before {
  content: ""; position: absolute;
  top: -22%; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px;
  background: radial-gradient(ellipse at center,
              rgba(181, 142, 75, .17) 0%,
              rgba(181, 142, 75, .06) 38%,
              transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--gold-hair-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--gold-hair-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
  opacity: .5; pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; }
.hero__grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(36px, 6vw, 76px); align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 22px; }
.hero .lead { font-size: 1.2rem; margin-bottom: 32px; }
.hero__actions { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 40px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--gold-hair);
  border-radius: 100px;
  color: var(--text-muted);
  background: rgba(181, 142, 75, .05);
  transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--gold-bright); }

/* The seal, slowly breathing, with a shine crossing it. Rings, rays and
   sparkles around it were removed at the client's request (twice: 17-09-26
   and 18-09-26) - keep the seal on its own. */
.hero__seal {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; max-width: 430px; margin-inline: auto; width: 100%;
}
/* 21-09-2026 (client): a live halftone of gold triangles across the whole hero (static/js/hero-mesh.js) - small
   behind the copy, full on the seal side, faded at the section's edges by the script. Above the hero's own glow and
   grid, below its content (.hero__inner is z-index 2). */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* The coin floats; its glint rides with it. */
.hero__coin {
  width: 82%; position: relative; z-index: 2;
  animation: breathe 7s ease-in-out infinite;
}
.hero__seal img {
  width: 100%;
  /* A gold bloom hugging the coin reads better on navy than a black shadow. */
  filter:
    drop-shadow(0 16px 28px rgba(var(--shade-rgb), .22))
    drop-shadow(0 2px 4px rgba(var(--shade-rgb), .10));
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.015); }
}
/* A band of light crossing the coin every few seconds, cut to the seal's own
   outline (the logo's transparency is the mask). */
.hero__coin::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 42%, rgba(255, 246, 220, 0) 44.5%, rgba(255, 246, 220, .5) 50%,
    rgba(255, 246, 220, 0) 55.5%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-mask: var(--seal) center / contain no-repeat;
          mask: var(--seal) center / contain no-repeat;
  animation: coin-glint 7s ease-in-out 1.5s infinite;
}
@keyframes coin-glint {
  0%        { background-position: 100% 0; }
  26%, 100% { background-position: 0% 0; }
}

/* ==========================================================================
   Bowl carousel - two rows of products travelling opposite ways
   ========================================================================== */

.bowls {
  --bowl: clamp(128px, 15vw, 208px);
  --bowl-gap: clamp(18px, 2.6vw, 40px);
  position: relative;
  padding: clamp(30px, 4vw, 46px) 0 clamp(26px, 3.4vw, 40px);
  background: var(--ink-1);
  border-block: 1px solid var(--gold-hair-soft);
  overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 26px);
  /* Bowls dissolve at the edges rather than being sliced off by the frame. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* The track holds the list twice and slides by exactly half its own width.
   Spacing is a right margin on every bowl, NOT flex gap: gap puts n-1 spaces in
   n items, so half the track is half a space short of one copy and the loop
   visibly jumps each time round. */
.bowls__track { display: flex; width: max-content; }
.bowls__row--l .bowls__track { animation: bowls-l 72s linear infinite; }
.bowls__row--r .bowls__track { animation: bowls-r 80s linear infinite; }

/* Stop while pointed at or tabbed into - a moving link is hard to hit. Mouse
   only: on a phone a tap leaves :hover stuck and the carousel stayed frozen. */
@media (hover: hover) {
  .bowls__row:hover .bowls__track { animation-play-state: paused; }
}
.bowls__row:focus-within .bowls__track { animation-play-state: paused; }

@keyframes bowls-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes bowls-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.bowl {
  flex: none; width: var(--bowl); margin-right: var(--bowl-gap);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--text); text-decoration: none;
  padding-top: 10px;              /* room for the lift and the ring */
  outline: none;
}
.bowl__dish {
  position: relative; display: block;
  width: var(--bowl); height: var(--bowl); border-radius: 50%;
  box-shadow: 0 20px 28px -22px rgba(var(--shade-rgb), .38);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bowl__dish img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
/* A gold ring draws in around the bowl on hover - the brand's rim colour. */
.bowl__dish::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0; transform: scale(.93);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.bowl__name {
  margin-top: 15px;
  font-family: var(--title); font-size: clamp(.9rem, 1.2vw, 1.05rem);
  font-weight: 600; line-height: 1.25; color: var(--text);
  transition: color .3s var(--ease);
}
.bowl__cat {
  margin-top: 4px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-faint);
}
.bowl:hover .bowl__dish,
.bowl:focus-visible .bowl__dish {
  transform: translateY(-7px);
  box-shadow: 0 30px 34px -24px rgba(var(--shade-rgb), .48);
}
.bowl:hover .bowl__dish::after,
.bowl:focus-visible .bowl__dish::after { opacity: 1; transform: scale(1); }
.bowl:hover .bowl__name,
.bowl:focus-visible .bowl__name { color: var(--gold-bright); }
.bowl:focus-visible .bowl__dish::after { border-width: 2px; border-color: var(--gold-bright); }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--gold-hair-soft);
  border: 1px solid var(--gold-hair-soft);
  border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--ink-1); padding: 30px 22px; text-align: center; }
.stat__value {
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 600; color: var(--gold-bright); line-height: 1;
  margin-bottom: 9px;
}
.stat__label {
  font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }
/* Keeps empty tracks, so one or two cards stay card-sized instead of
   stretching across the whole row (e.g. a category with one related product). */
.grid--fill { grid-template-columns: repeat(auto-fill, minmax(max(224px, calc((100% - 60px) / 4)), 1fr)); }

/* Equal-height cards.

   Product cards sit inside a [data-reveal] wrapper for the scroll animation;
   the wrapper stretches to the grid row but the card would size to its own
   content. Scoped with :has() so it only ever touches a wrapper that actually
   holds a product card — a broader rule flattened the pillar cards and the
   product page's two columns into rows. */
.grid > [data-reveal]:has(> .product) { display: flex; }
.grid > [data-reveal]:has(> .product) > .product { width: 100%; }
.grid > .card,
.grid > [data-reveal].card,
.grid .product { height: 100%; }

.card {
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative; overflow: hidden;
  transition: all .35s var(--ease);
}
/* Gold wipes in along the top edge on hover */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transition: transform .45s var(--ease);
}
.card:hover {
  border-color: var(--gold-hair);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.card:hover::before { transform: scaleX(1); }

.card__icon {
  /* A circle for one glyph; grows into a pill when a card needs two (ship + plane). */
  min-width: 46px; width: max-content; height: 46px; padding: 0 11px; border-radius: 23px;
  display: grid; grid-auto-flow: column; place-items: center; gap: 4px;
  border: 1px solid var(--gold-hair);
  background: rgba(181, 142, 75, .07);
  font-size: 19px; margin-bottom: 18px;
}
.card h3 { font-size: 1.28rem; margin-bottom: 10px; }
.card p { font-size: 1rem; margin: 0; }
.card .card__subtitle {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-bright); margin: -2px 0 10px;
}
.card p + .util, .card p + .btn, .card p + a.btn { margin-top: 18px; }

.card__num {
  font-family: var(--display); font-size: 2.4rem;
  color: var(--gold-deep); line-height: 1; margin-bottom: 12px;
}

/* ==========================================================================
   Product cards
   ========================================================================== */

.product {
  position: relative;              /* anchor for the stretched link */
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .35s var(--ease);
  text-align: left; width: 100%;
}
.product:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(181, 142, 75, .18);
}
.product:hover {
  border-color: var(--gold-hair);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.product__media {
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--ink-3), var(--ink-1));
  overflow: hidden;
}
.product__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.product:hover .product__media img { transform: scale(1.07); }
/* Keeps a bright photo from fighting the dark page */
.product__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--shade-rgb), .10), transparent 45%);
}
.product__fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-size: 2.4rem; color: var(--gold-deep);
}
.product__tag {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px;
  background: var(--tag-bg);
  border: 1px solid var(--gold-hair);
  color: var(--gold-bright);
  backdrop-filter: blur(4px);
}
.product__tag--sourcing { color: var(--text-muted); border-color: var(--ink-line); }
.product__body { padding: 17px 18px 19px; flex: 1; display: flex; flex-direction: column; }
.product__name {
  font-family: var(--title); font-size: 1.08rem; font-weight: 600;
  margin: 0 0 5px; line-height: 1.2;
  /* Two lines maximum, so a long name cannot push a card taller than its row. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Always reserves two lines. Packing strings vary from "25 kgs PP bags" to a
   six-size list, and letting that vary made cards in the same row uneven. */
.product__meta {
  font-size: .8rem; color: var(--text-faint); margin: 0 0 13px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em; line-height: 1.25;
}
/* Stretched link: the anchor on the title covers the whole card, so the card
   navigates to the specification page without nesting a button in an anchor. */
.product__link { position: static; }
.product__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product__link:hover { color: var(--gold-bright); }

.product__actions {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.product__more {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-bright);
  display: inline-flex; align-items: center; gap: 6px;
}
.product__more span { transition: transform .3s var(--ease); }
.product:hover .product__more span { transform: translateX(4px); }

/* Sits above the stretched link so it remains separately clickable. */
.product__quote {
  position: relative; z-index: 2;
  flex: none; cursor: pointer;
  font-family: var(--ui);
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--gold-hair);
  background: rgba(181, 142, 75, .08);
  color: var(--text-muted);
  transition: all .25s var(--ease);
}
.product__quote:hover {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}

/* ==========================================================================
   Filter rail
   ========================================================================== */

.catalog { display: grid; grid-template-columns: 244px 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .catalog { grid-template-columns: 1fr; } }
/* Where the glide to #results stops (site.js reads it): just below the
   sticky header, not under it. */
.catalog__results, [data-scroll-target], #specs { scroll-margin-top: 112px; }
@media (max-width: 900px) { .catalog__results, [data-scroll-target], #specs { scroll-margin-top: 104px; } }

/* Sticky, but never taller than the window. Without the cap the filter list
   plus the sourcing card outgrew a laptop screen, and a sticky box taller than
   the viewport cannot show its lower half until the page scrolls past the end
   of the product grid - the bottom categories were unreachable. It scrolls on
   its own instead; overscroll is left to chain, so reaching its end hands the
   wheel back to the page rather than trapping it. */
.rail {
  position: sticky; top: 104px;
  max-height: calc(100vh - 150px);   /* measured: it sticks at 126px, not 104 */
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-hair) transparent;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--gold-hair); border-radius: 3px; }
@media (max-width: 900px) { .rail { position: static; max-height: none; overflow: visible; padding-right: 0; } }
.rail__title {
  font-size: 10px; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.rail__link {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 13px; margin-bottom: 2px;
  border-radius: 3px; font-size: 13px;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: all .22s var(--ease);
}
.rail__link:hover { background: rgba(181, 142, 75, .07); color: var(--text); }
.rail__link.is-active {
  background: rgba(181, 142, 75, .13);
  border-color: var(--gold-hair);
  color: var(--gold-bright);
}
.rail__count { font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rail__group { margin-bottom: 26px; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
/* Phones: a three-column attribution table would hide its licence column
   off-screen, so each row becomes a small labelled block instead. */
@media (max-width: 640px) {
  .table-wrap--stack { overflow: visible; }
  .table-wrap--stack table, .table-wrap--stack tbody { display: block; min-width: 0; }
  .table-wrap--stack thead { display: none; }
  .table-wrap--stack tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--ink-line); }
  .table-wrap--stack td { display: block; border: 0 !important; padding: 3px 0 !important; width: auto !important; overflow-wrap: anywhere; }
  .table-wrap--stack td::before {
    content: attr(data-label); display: block;
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
  }
  .table-wrap--stack td:empty { display: none; }
  .table-wrap--stack tr:last-child { border-bottom: 0; }
}
thead th {
  background: var(--ink-1);
  font-family: var(--ui);
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-bright); text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gold-hair);
  white-space: nowrap;
}
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--ink-line); color: var(--text-muted); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .22s var(--ease); }
tbody tr:hover { background: rgba(181, 142, 75, .05); }
td.code {
  font-family: var(--display); font-size: 1.15rem;
  color: var(--gold-bright); font-weight: 600; letter-spacing: .04em;
}

/* Spec blocks on a product page */
.spec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.spec-note {
  font-size: 12px; line-height: 1.55; color: var(--text-faint);
  margin: 12px 0 0; padding-left: 13px;
  border-left: 1px solid var(--gold-hair);
}

.specs { display: grid; gap: 1px; background: var(--ink-line); border-radius: var(--radius); overflow: hidden; }
.spec-row {
  display: grid; grid-template-columns: 170px 1fr; gap: 16px;
  background: var(--ink-2); padding: 12px 16px; font-size: .89rem;
}
@media (max-width: 560px) { .spec-row { grid-template-columns: 1fr; gap: 3px; } }
.spec-row dt {
  color: var(--text-faint); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; padding-top: 3px;
}
.spec-row dd { margin: 0; color: var(--text); }

/* ==========================================================================
   Accordion
   ========================================================================== */

.acc { border-top: 1px solid var(--ink-line); }
.acc__item { border-bottom: 1px solid var(--ink-line); }
.acc__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; text-align: left;
  font-family: var(--title); font-size: 1.06rem; font-weight: 600;
  color: var(--text);
  transition: color .25s var(--ease);
}
.acc__q:hover { color: var(--gold-bright); }
.acc__sign {
  flex: none; width: 26px; height: 26px; position: relative;
  border: 1px solid var(--gold-hair); border-radius: 50%;
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 7px auto; height: 1px;
  background: var(--gold); transition: transform .3s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item.is-open .acc__sign::after { transform: rotate(0); }
.acc__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p { padding: 0 44px 22px 4px; margin: 0; font-size: .95rem; }

/* ==========================================================================
   Reach map
   ========================================================================== */

.map-wrap {
  position: relative;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 58% 42%, rgba(181, 142, 75, .07), transparent 62%),
    var(--map-card);
  padding: clamp(18px, 4vw, 40px);
  overflow: hidden;
}
.map-wrap svg { width: 100%; height: auto; display: block; }
/* The name of the country (or port) under the pointer - site.js places it. */
.map-tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px;
  background: var(--text); color: var(--ink-0);
  font-family: var(--ui); font-size: 13px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; unicode-bidi: plaintext;
  box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity .15s var(--ease);
}
.map-tip.is-on { opacity: 1; }
/* The routes are decoration: the pointer passes through them to the country
   (or port) underneath, so its name shows even where lines cross it. */
.map-arcs { pointer-events: none; }
/* Land darkened at the client's request, so the continents stand out from the
   white card. Unserved land is kept desaturated so the served markets still
   read apart from it by colour, not only by depth. */
.map-land {
  fill: var(--map-land); stroke: var(--map-stroke); stroke-width: .45;
  transition: fill .35s var(--ease);
}
/* On a light ground the hierarchy inverts: the most important territory is the
   DARKEST, not the brightest. India is navy so the origin reads at a glance. */
.map-land.is-served  { fill: var(--map-served); }
.map-land.is-primary { fill: var(--map-primary); }
.map-land.is-origin  { fill: var(--map-origin); }
.map-land.is-lit     { fill: var(--map-lit); }
.map-land:hover      { fill: var(--map-hover); cursor: pointer; }

/* Routes from India: every port gets one, drawn as the first design had them
   - gold dashes marching out from India (client, 18-09-26: "the moving line
   design you did the first time"). */
.trade-arc {
  fill: none;
  stroke: var(--gold-bright);
  stroke-linecap: round;
}
.trade-arc--port  {
  stroke-width: 1.1; opacity: .75;
  stroke-dasharray: 4 5;
  animation: travel 2.4s linear infinite;
}
.trade-arc--major,
.trade-arc--hub   {
  stroke-width: 1.05; opacity: .7;
  stroke-dasharray: 4 5;
  animation: travel 2.4s linear infinite;
}
.trade-arc--hub   { stroke-width: 1.7; opacity: .95; }
@keyframes travel { to { stroke-dashoffset: -18; } }

/* Legend under the map */
.map-key {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--ink-line);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.map-key span { display: inline-flex; align-items: center; gap: 8px; }
.map-key i {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
}
.map-key .k-origin  { background: var(--map-origin); }
.map-key .k-primary { background: var(--map-primary); }
.map-key .k-served  { background: var(--map-served); }
.map-key .k-port    { background: var(--map-pin); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--map-pin-ring), 0 0 0 2.5px var(--gold-hair); }
.map-key .k-port-sm { width: 7px; height: 7px; margin-inline: 2px; }

/* --- Port directory (Reach) ------------------------------------------- */
.port-regions {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.port-region h3 { font-size: 1.22rem; margin: 0 0 12px; }
.port-list { list-style: none; margin: 0; padding: 0; }
.port-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--ink-line);
  font-size: 13.5px; color: var(--text-muted);
}
.port-list li:last-child { border-bottom: 0; }
.port-list__where { font-size: 11.5px; color: var(--text-faint); text-align: right; flex: none; }
.port-list .is-major { color: var(--text); font-weight: 600; }
.port-list .is-major::before, .port-list .is-hub::before {
  content: "\2605"; color: var(--gold-bright); margin-right: 6px; font-size: 11px;
}
.port-list .is-hub { color: var(--gold-bright); font-weight: 700; }

.pin { transform-box: fill-box; transform-origin: center; }
.pin--port .pin__dot { stroke-width: .8; opacity: .9; }
.pin--hub .pin__dot  { stroke-width: 1.8; }
.pin--hub .pin__ping { stroke-width: 1.6; }
.pin__label {
  font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  fill: var(--gold-bright);
  paint-order: stroke; stroke: var(--map-card); stroke-width: 3.5px; stroke-linejoin: round;
  pointer-events: none;
}
.pin__dot { fill: var(--map-pin); stroke: var(--map-pin-ring); stroke-width: 1.3; }
.pin__ping {
  fill: none; stroke: var(--map-pin); stroke-width: 1.2;
  transform-origin: center; transform-box: fill-box;
  animation: ping 2.8s ease-out infinite;
}
@keyframes ping {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}

.region { margin-bottom: 30px; }
.region__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.region__name { font-family: var(--title); font-size: 1.2rem; font-weight: 600; margin: 0; }
.badge {
  font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--gold-hair); color: var(--gold-bright);
  background: rgba(181, 142, 75, .09);
}
.badge--muted { color: var(--text-faint); border-color: var(--ink-line); background: none; }
.countries { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.countries li {
  font-size: 12.5px; color: var(--text-muted);
  padding: 6px 13px;
  border: 1px solid var(--ink-line); border-radius: 100px;
  transition: all .25s var(--ease);
}
.countries li:hover { border-color: var(--gold-hair); color: var(--gold-bright); }

/* ==========================================================================
   Forms
   ========================================================================== */

.field-input, textarea.field-input, select.field-input {
  width: 100%;
  background: var(--ink-1);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 13px 15px;
  color: var(--text);
  font-family: var(--ui); font-size: 14px;
  transition: all .25s var(--ease);
}
.field-input::placeholder { color: var(--text-faint); }
input.field-input, textarea.field-input { -webkit-appearance: none; appearance: none; }   /* no iOS inner shadow */
/* iPhone Safari zooms the page into any field whose text is under 16px and leaves
   it zoomed - the layout then looks broken and pans sideways. */
@media (max-width: 900px), (pointer: coarse) {
  .field-input, textarea.field-input, select.field-input { font-size: 16px; }
}
.field-input:focus {
  outline: none;
  border-color: var(--gold);
  background-color: var(--ink-2);   /* not the shorthand: it would wipe the select's chevron */
  box-shadow: 0 0 0 3px rgba(181, 142, 75, .13);
}
select.field-input {
  appearance: none; cursor: pointer;
  padding-right: 40px;
  /* a drawn chevron - appearance:none removes the native one */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Until a term is picked the select shows its label, so it should look like
   the other empty fields' placeholders, not like an answer. */
select.field-input.is-empty { color: var(--text-faint); }   /* class set by site.js */
select.field-input option { background: var(--ink-2); color: var(--text); }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Stacked on phones: the row gap goes, so each field keeps only its own 14px. */
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.field-err { color: #E8907C; font-size: 12px; margin-top: 5px; }

.form-note { font-size: 12px; color: var(--text-faint); margin-top: 14px; }

.flash {
  padding: 15px 18px; border-radius: var(--radius);
  border: 1px solid var(--gold-hair);
  background: rgba(181, 142, 75, .1);
  color: var(--gold-bright); font-size: 14px;
  margin-bottom: 22px;
}
.flash--bad { border-color: rgba(232, 144, 124, .4); background: rgba(232, 144, 124, .08); color: #E8907C; }

/* ==========================================================================
   Floating pair — the client's "pop-up"
   ========================================================================== */

.floats {
  position: fixed; right: 18px; bottom: 20px; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
  pointer-events: none;           /* the box is as wide as the widest pill */
}
.floats > * { pointer-events: auto; }
.float-quote {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink-2);
  border: 1px solid var(--gold-hair);
  border-radius: 100px;
  padding: 11px 19px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-bright);
  box-shadow: var(--shadow-md);
  transition: all .3s var(--ease);
}
.float-quote:hover {
  background: var(--gold); color: var(--on-gold); border-color: var(--gold);
  transform: translateY(-2px);
}
.float-quote::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright); flex: none;
  animation: pulse 2.2s ease-in-out infinite;
}
.float-quote:hover::before { background: var(--on-gold); }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}

.float-wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: #127C3D; color: #fff;
  border-radius: 100px; padding: 11px 18px 11px 12px;
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 14px 34px -14px rgba(18, 124, 61, .55);
  transition: all .3s var(--ease);
}
.float-wa:hover { background: #0E6E35; transform: translateY(-2px); }
.float-wa svg { width: 21px; height: 21px; fill: #fff; flex: none; }
/* Phones: the WhatsApp pill shrinks to its icon, but the quote pill stays -
   the client wants the pair on every page, phones included. */
@media (max-width: 640px) {
  .floats { right: 14px; bottom: 16px; gap: 9px; }
  .float-wa__text { display: none; }
  .float-wa { padding: 12px; }
  .float-quote { padding: 9px 14px; font-size: 9.5px; letter-spacing: .1em; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { padding-top: clamp(52px, 7vw, 84px); }

/* --- Footer: a navy block anchoring the cream page, echoing the seal's ring.
   The tokens are redefined in scope, so every child flips with them - note
   --gold-bright goes back to the LIGHT gold, because here it sits on navy. */
.footer {
  --text: #F2EEE4;
  --text-muted: rgba(242, 238, 228, 0.72);
  --text-faint: rgba(242, 238, 228, 0.60);
  --gold-bright: #E4C179;
  --gold-hair: rgba(228, 193, 121, 0.30);
  --gold-hair-soft: rgba(228, 193, 121, 0.16);
  --ink-line: rgba(242, 238, 228, 0.14);

  background: var(--footer-bg);
  color: var(--text);
  border-top: 0;
}
.footer .brand__name { color: var(--text); }
.footer .brand__sub  { color: var(--gold-bright); }
.footer .btn--ghost  { color: var(--text); border-color: var(--gold-hair); }
.footer .btn--ghost:hover { border-color: var(--gold-bright); background: rgba(228, 193, 121, .10); }
.footer .badge { color: var(--gold-bright); border-color: var(--gold-hair); background: rgba(228, 193, 121, .10); }

.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: 40px; padding-bottom: 46px;
}
@media (max-width: 940px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__title {
  font-size: 10px; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer a { font-size: 13.5px; color: var(--text-muted); transition: all .22s var(--ease); }
.footer a:hover { color: var(--gold-bright); padding-left: 4px; }
.footer p { font-size: 13.5px; }

/* --- Partners (About) -------------------------------------------------- */
.section--tight-top { padding-top: clamp(20px, 3vw, 36px); }
/* First section straight under a page header: the header already ends in a
   rule and generous padding, so a full section gap above made ~250px of empty
   cream before the first heading (Certificates). */
.section--after-head { padding-top: clamp(36px, 5vw, 64px); }
.partners {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  max-width: 1040px; margin-inline: auto;
}
.partner { padding: clamp(24px, 3.4vw, 36px); }
.partner__head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
/* No photographs: the company seal sits beside each partner's name. */
.partner__mark { flex: none; width: 68px; height: 68px; display: grid; place-items: center; }
.partner__mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(var(--shade-rgb), .18)); }
.card .partner__name { font-size: 1.42rem; margin: 0 0 4px; line-height: 1.2; }
.partner__role {
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-bright);
}
.card .partner__bio { font-size: .95rem; line-height: 1.75; color: var(--text-muted); white-space: pre-line; }

.office {
  padding: 14px 0; border-bottom: 1px solid var(--ink-line);
  font-size: 13px; color: var(--text-muted);
}
.office:last-child { border-bottom: 0; }
.office__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 5px;
  display: flex; align-items: center; gap: 8px;
}
.office__addr { white-space: pre-line; line-height: 1.55; }

.contact-icon {
  width: 15px; height: 15px; flex: none;
  color: var(--gold-bright); vertical-align: -2px; margin-right: 6px;
}

/* Social buttons: each is the platform's own coloured logo tile. */
.footer__follow { margin-top: 26px; }
.footer__follow .footer__title { margin-bottom: 12px; }
.socials { display: flex; gap: 12px; }
.socials a, .socials .is-pending {
  width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
  display: block; line-height: 0;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.socials svg { width: 100%; height: 100%; display: block; }
.socials a:hover { padding-left: 0; transform: translateY(-3px); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.footer__legal { margin-top: 22px !important; }
.footer__legal li { margin-bottom: 8px; }
.footer__legal a { font-size: 13px; }

/* --- Container cards (Incoterms) ------------------------------------- */
.containers {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.container-card { display: flex; flex-direction: column; padding: 24px 22px; }
.container-card__art {
  width: 100%; max-width: 150px; height: auto; margin-bottom: 16px;
  fill: rgba(181, 142, 75, .08); stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round;
}
.container-card__art line { stroke: var(--gold-hair); stroke-width: 1; }
.container-card__art .container-card__cool { fill: var(--ink-2); stroke: var(--gold-bright); stroke-width: 1.3; stroke-linecap: round; }
.card .container-card__name { font-size: 1.2rem; margin: 0 0 6px; }
.container-card__tag {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 12px;
}
.card .container-card p { flex: 1; }
.container-card p { flex: 1; }
.container-card__payload {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ink-line);
  font-size: 12px; color: var(--text-faint);
}
.container-card__payload strong { color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* --- Legal pages (privacy, terms, cookies) ----------------------------- */
.legal { max-width: 780px; }
.legal__updated { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 28px; }
.legal__note {
  margin: -8px 0 32px; padding: 14px 16px;
  border: 1px solid var(--gold-hair); border-radius: var(--radius);
  background: var(--ink-3); font-size: 14px;
}
.legal__note a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.legal h2 { font-size: 1.5rem; margin: 38px 0 12px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--text-muted); line-height: 1.8; font-size: .98rem; }
.legal ul { padding-left: 20px; margin: 0 0 16px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }
.legal table { min-width: 0; font-size: .9rem; }
.legal .table-wrap { margin: 8px 0 18px; }
.legal__contact {
  margin-top: 14px; padding: 22px 24px;
  background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--radius);
  display: grid; gap: 12px;
}
.legal__contact p { margin: 0; }
.legal__label {
  display: block; margin-bottom: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-bright);
}

.footer__bar {
  border-top: 1px solid var(--ink-line);
  /* Extra room at the very bottom so the floating WhatsApp / quote pair sits
     below the copyright line instead of over the credits link. */
  padding: 20px 0 128px;
  /* Centred at the client's request: copyright, then the credits link beside it
     (or under it on a phone). */
  display: flex; justify-content: center; align-items: center; gap: 6px 18px; flex-wrap: wrap;
  text-align: center;
  font-size: 12px; color: var(--text-faint);
}
/* Phones show only the round WhatsApp button, so less room is needed. */
@media (max-width: 640px) { .footer__bar { padding-bottom: 118px; } }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */

.page-head {
  padding: clamp(52px, 7vw, 92px) 0 clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--gold-hair-soft);
  position: relative; overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; top: -60%; right: -8%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(181, 142, 75, .13), transparent 66%);
  pointer-events: none;
}
.page-head__inner { position: relative; z-index: 2; }
.crumbs { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs span { color: var(--gold); margin-inline: 7px; }

/* Freight Forwarding: the header runs on film (ships loading, planes flying).
   A navy wash keeps the heading readable over any frame, in both themes. */
.page-head--video {
  min-height: clamp(400px, 58vh, 600px);
  display: flex; align-items: flex-end;
  padding-top: 120px;
  background: #0B1020;
  border-bottom: 0;
}
.page-head--video::before { display: none; }
.page-head--video::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 11, 20, .30) 0%, rgba(8, 11, 20, .42) 45%, rgba(8, 11, 20, .86) 100%),
    linear-gradient(90deg, rgba(8, 11, 20, .55) 0%, rgba(8, 11, 20, 0) 65%);
}
.page-head__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.page-head--video .page-head__inner { width: min(var(--shell), 100% - var(--gutter) * 2); }
.page-head--video h1 { color: #F7F2E6; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.page-head--video .lead { color: rgba(247, 242, 230, .9); }
.page-head--video .crumbs, .page-head--video .crumbs a { color: rgba(247, 242, 230, .72); }
.page-head--video .crumbs a:hover { color: #E4C179; }
.page-head--video .crumbs span { color: #E4C179; }
@media (max-width: 700px) {
  .page-head--video { min-height: 440px; padding-top: 96px; }
  .page-head--video::after {
    background: linear-gradient(180deg, rgba(8, 11, 20, .35) 0%, rgba(8, 11, 20, .55) 40%, rgba(8, 11, 20, .9) 100%);
  }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
[data-reveal][data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .bowls__track, .hero__coin, .hero__coin::after, .pin__ping, .float-quote::before, .trade-arc {
    animation: none !important;
  }
  /* Still rows: let them scroll by hand, drop the second copy and the fade. */
  .bowls { -webkit-mask-image: none; mask-image: none; }
  .bowls__row { overflow-x: auto; scrollbar-width: thin; padding-inline: 20px; }
  .bowl--dup { display: none; }
}

/* ==========================================================================
   Modal (product detail / quote)
   ========================================================================== */

.modal {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(var(--shade-rgb), .55);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  background: var(--ink-2);
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius-lg);
  width: min(760px, 100%);
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(24px, 4vw, 42px);
  transform: translateY(18px) scale(.985);
  transition: transform .35s var(--ease);
}
.modal.is-open .modal__box { transform: none; }
.modal__close {
  position: absolute; top: 18px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink-2); border: 1px solid var(--gold-hair);
  color: var(--gold-bright); font-size: 19px; cursor: pointer;
  transition: all .25s var(--ease);
}
.modal__close:hover { background: var(--gold); color: var(--ink-0); }

.util { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--text-faint); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 18px; }

/* ==========================================================================
   Category group blocks (home)
   Six aisles instead of a wall of products. A whole block is one link, so
   everything inside is inline-level - an <a> may not wrap block elements.
   ========================================================================== */

.group-card {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: all .35s var(--ease);
}
.group-card:hover {
  border-color: var(--gold-hair);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.group-card__media {
  display: block; position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, var(--ink-3), var(--ink-1));
  overflow: hidden;
}
.group-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.group-card:hover .group-card__media img { transform: scale(1.06); }

.group-card__body {
  display: flex; flex-direction: column;
  padding: 22px 24px 24px; flex: 1;
}
.group-card__name {
  font-family: var(--title);
  font-size: 1.2rem; font-weight: 600; line-height: 1.25;
  color: var(--text);
  margin-bottom: 7px;
}
.group-card__meta {
  font-size: .84rem; color: var(--text-faint);
  line-height: 1.45; margin-bottom: 16px;
}
.group-card__more {
  margin-top: auto;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-bright);
  display: inline-flex; align-items: center; gap: 7px;
}
.group-card__more span { transition: transform .3s var(--ease); }
.group-card:hover .group-card__more span { transform: translateX(4px); }

/* Six blocks want 3 + 3. auto-fit gives four columns at desktop width, which
   leaves an orphan row of two. */
.grid--groups { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .grid--groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid--groups { grid-template-columns: 1fr; } }

/* Numbered card head: serif numeral beside a wide-tracked label, on one line. */
.card__head {
  display: flex; align-items: baseline; gap: 11px;
  margin-bottom: 14px;
}
.card__head .card__num {
  font-family: var(--display);
  font-size: 1.75rem; line-height: 1;
  color: var(--gold-bright);
  margin: 0; flex: none;
}
.card__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-bright);
  line-height: 1.35;
}
.card__label::before { content: "— "; }

/* Commitments: a label-led list, not five identical paragraphs. */
.commitments { list-style: none; padding: 0; margin: 0; }
.commitments li {
  position: relative;
  padding: 0 0 14px 20px;
  color: var(--text-muted);
  font-size: 1rem; line-height: 1.6;
}
.commitments li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--gold); flex: none;
}
.commitments strong {
  color: var(--text); font-weight: 600;
}
.commitments li:last-child { padding-bottom: 0; }

/* ==========================================================================
   Registrations
   ========================================================================== */

.seal { width: 20px; height: 20px; flex: none; color: var(--gold); }

.reg-row { display: flex; align-items: flex-start; gap: 12px; }
.reg-row .seal { margin-top: 2px; }
.reg-row__logo {
  flex: none; width: 30px; height: 30px;
  object-fit: contain; margin-top: 2px;
}

/* --- Authority marks -------------------------------------------------
   Logo beside the name, the way a buyer expects to scan them. Two up on a
   phone, four on a desktop. */
.mark-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.mark {
  display: flex; align-items: center; gap: 14px;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.mark:hover { border-color: var(--gold-hair); transform: translateY(-2px); }
.mark__logo {
  /* Height is fixed so every row lines up; width can stretch for wide marks
     (FSSAI, APEDA). 72px tall so tall marks such as MSME - emblem over a
     wordmark - stay legible; at 54px its lettering was a smudge. */
  flex: none; min-width: 72px; max-width: 108px; height: 72px;
  display: grid; place-items: center;
  color: var(--gold);
}
.mark__logo img { max-width: 108px; max-height: 72px; object-fit: contain; }
.mark__logo .seal { width: 30px; height: 30px; opacity: .55; }
/* Dark mode: the cream plate behind each real logo (see --logo-plate). The
   drawn rosette placeholder is gold on transparent and needs no plate. */
:root[data-theme="dark"] .mark__logo:has(img) {
  background: var(--logo-plate); border-radius: 6px;
  padding: 6px; height: 84px; min-width: 84px; max-width: 120px;
}
:root[data-theme="dark"] .reg-row__logo {
  background: var(--logo-plate); border-radius: 4px; padding: 3px;
  width: 34px; height: 34px;
}
/* A round badge (e.g. Halal) is its own shape - no square plate behind it. */
:root[data-theme="dark"] .mark__logo--bare:has(img),
:root[data-theme="dark"] .reg-row__logo--bare { background: none; padding: 0; }
.mark__name {
  font-size: 11px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--text); line-height: 1.4;
}
@media (max-width: 480px) {
  .mark-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mark { flex-direction: column; text-align: center; gap: 10px; padding: 16px 10px; }
  .mark__name { font-size: 10px; letter-spacing: .09em; }
}

/* The issuing authority, under the name in an accordion header. */
.acc__sub {
  display: block;
  font-family: var(--ui);
  font-size: 11.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--text-faint);
  margin-top: 4px; line-height: 1.45;
}
/* The question grows, the +/- sign never does. Written :not(.acc__sign)
   rather than :first-child: two of the three accordions put the question in a
   bare text node, so the sign was the first ELEMENT child and took flex:1 from
   this rule - (0,2,1) beats the (0,1,0) of .acc__sign's own flex:none. It
   stretched into a wide ellipse and its rotated cross-stroke became a
   full-height vertical line down the section. */
.acc__q > span:not(.acc__sign) { flex: 1; }

/* ==========================================================================
   Opening sequence (home page, first visit in a tab)
   Modelled on the intro the client liked, in this site's own language: the
   navy ground, the real seal, the display serif, gold hairlines. A gold line
   slices across the middle and the screen parts onto the page - cream in light
   mode, navy in dark. Colours are fixed here on purpose: the intro looks the
   same whichever theme the visitor lands in.
   Classes on <html>, set by the head script in home.html and by site.js:
     is-intro    overlay shown, page held still
     intro-play  seal, name and counter animate in
     intro-cut   the gold line draws across
     intro-open  the halves slide apart and the page's own entrance plays
   ========================================================================== */

.intro { display: none; }
html.is-intro .intro {
  display: block;
  position: fixed; inset: 0; z-index: 1000;
  color: #F2EEE4;
  -webkit-tap-highlight-color: transparent;
}
html.is-intro:not(.intro-open), html.is-intro:not(.intro-open) body { overflow: hidden; }
/* Once the halves part, the page underneath is live: clicks and scrolling go
   straight through the empty overlay while it finishes sliding away. */
html.intro-open .intro { pointer-events: none; }
/* Hold the page's entrance until the curtain opens, so the hero rises as it
   is uncovered instead of having already played underneath. */
html.is-intro:not(.intro-open) [data-reveal] { opacity: 0; transform: translateY(22px); }

.intro__half {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 58% 46% at 50% 50%, rgba(181, 142, 75, .17), transparent 72%),
    radial-gradient(ellipse 120% 70% at 50% 110%, #121A2E, transparent 70%),
    #080B14;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
/* Each half holds a full copy of the screen, clipped to its own half, so the
   parting cuts cleanly along the gold line. */
.intro__half--top    { clip-path: inset(0 0 50% 0); }
.intro__half--bottom { clip-path: inset(50% 0 0 0); }
html.intro-open .intro__half--top    { transform: translate3d(0, -50%, 0); }
html.intro-open .intro__half--bottom { transform: translate3d(0, 50%, 0); }

.intro__stage { position: absolute; inset: 0; font-family: var(--ui); }
/* A hairline frame, the seal's ring drawn around the whole screen. */
.intro__stage::before {
  content: ""; position: absolute; inset: clamp(10px, 1.8vw, 22px);
  border: 1px solid rgba(181, 142, 75, .2);
  pointer-events: none;
}

.intro__brand {
  position: absolute; left: 0; right: 0; top: clamp(34px, 7vh, 70px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0;
}
.intro__brand img { width: clamp(54px, 6vw, 76px); height: auto; }
.intro__brand span {
  font-size: 10px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: #B58E4B; padding-left: .34em;
}

.intro__line {
  position: absolute; left: 0; right: 0;
  text-align: center; white-space: nowrap;
  font-family: var(--brand); line-height: 1;
  overflow: hidden;                /* letters rise out of a slot, not from nowhere */
}
.intro__line--1 {
  bottom: calc(50% + clamp(8px, 1.5vh, 16px));
  padding: .1em 0 .06em;
  font-size: clamp(2.4rem, min(12vw, 19vh), 10rem); font-weight: 700; letter-spacing: 0;
  color: #F7F2E6;
}
.intro__line--2 {
  top: calc(50% + clamp(8px, 1.5vh, 16px));
  padding: .02em 0 .24em;
  font-size: clamp(1.2rem, min(5.8vw, 9vh), 4.4rem); font-weight: 500; font-style: italic; letter-spacing: .01em;
  color: #E4C179;
}
.intro .ch { display: inline-block; opacity: 0; --r: 7deg; }
.intro .ch:nth-child(even) { --r: -6deg; }
.intro .ch:nth-child(3n) { --r: 11deg; }

.intro__foot {
  position: absolute;
  left: clamp(26px, 4.2vw, 60px); right: clamp(26px, 4.2vw, 60px);
  bottom: clamp(30px, 6vh, 58px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
  opacity: 0;
}
.intro__tag {
  max-width: 34ch;
  font-size: 10px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; line-height: 1.8;
  color: rgba(242, 238, 228, .62);
}
.intro__count {
  font-family: var(--display); line-height: .8; white-space: nowrap;
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  color: #E4C179;
  font-variant-numeric: lining-nums tabular-nums;
}
.intro__count b { font-weight: 500; }
.intro__count i { font-style: normal; font-size: .42em; margin-left: 3px; color: #B58E4B; vertical-align: top; }

.intro__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(181, 142, 75, .14);
}
.intro__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #8A6A33, #E4C179 70%, #FDE09A);
  transform-origin: left center; transform: scaleX(0);
}

.intro__slice {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 2;
  height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, #B58E4B 14%, #FDE09A 50%, #B58E4B 86%, transparent);
  box-shadow: 0 0 24px 2px rgba(228, 193, 121, .5);
  transform: scaleX(0); transform-origin: left center;
  opacity: 0;
}

/* --- motion --- */
html.intro-play .intro__brand { animation: intro-down .9s var(--ease) .05s both; }
html.intro-play .intro__foot  { animation: intro-up .9s var(--ease) .3s both; }
html.intro-play .intro__line--1 .ch {
  animation: intro-letter .95s cubic-bezier(.2, .9, .25, 1.12) both;
  animation-delay: calc(var(--i) * 60ms + .18s);
}
html.intro-play .intro__line--2 .ch {
  animation: intro-letter .85s cubic-bezier(.2, .9, .25, 1.12) both;
  animation-delay: calc(var(--i) * 30ms + .62s);
}
html.intro-cut .intro__slice {
  opacity: 1;
  animation: intro-slice .5s cubic-bezier(.65, 0, .35, 1) forwards;
}
html.intro-open .intro__slice { opacity: 0; transition: opacity .6s ease .15s; }

@keyframes intro-letter {
  0%   { opacity: 0; transform: translateY(.8em) rotate(var(--r)); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes intro-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes intro-up   { from { opacity: 0; transform: translateY(12px); }  to { opacity: 1; transform: none; } }
@keyframes intro-slice { to { transform: scaleX(1); } }

@media (max-width: 600px) {
  .intro__tag { font-size: 9px; letter-spacing: .16em; max-width: 60vw; }
  .intro__brand span { font-size: 9px; letter-spacing: .26em; }
}
/* Short, wide screens (landscape phones, squat laptop windows): the name is
   capped by height above, and the seal block shrinks out of its way. */
@media (max-height: 560px) {
  .intro__brand { top: 14px; gap: 0; }
  .intro__brand img { width: 38px; }
  .intro__brand span { display: none; }
  .intro__foot { bottom: 18px; }
  .intro__count { font-size: 2.2rem; }
}
@media (max-height: 700px) and (min-height: 561px) {
  .intro__brand { top: 22px; gap: 8px; }
  .intro__brand img { width: 46px; }
}
/* The head script never starts it under reduced motion; this covers a setting
   changed mid-visit. */
@media (prefers-reduced-motion: reduce) {
  html.is-intro .intro { display: none; }
  html.is-intro:not(.intro-open) [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Touch screens
   iPhone Safari keeps :hover applied to whatever was last tapped, so hover
   lifts and zooms stayed stuck on cards after scrolling past them. Undo the
   movement where there is no real pointer; colours may stay.
   ========================================================================== */
@media (hover: none) {
  .card:hover, .product:hover, .group-card:hover,
  .float-wa:hover, .float-quote:hover, .socials a:hover { transform: none; }
  .product:hover .product__media img,
  .group-card:hover .group-card__media img,
  .product:hover .product__more span,
  .group-card:hover .group-card__more span { transform: none; }
}

/* ==========================================================================
   Languages
   The site's other languages are the same pages under /ar/, /fr/, ... (see
   core/i18n). Latin-script languages keep the site's faces. Arabic and Chinese
   swap the two type tokens for faces drawn for their scripts; the brand name
   stays in Playfair in every language.
   ========================================================================== */
/* French, Spanish, Portuguese, Italian and German menu words run longer than
   English ("Solicitar cotización", "Richiedi un preventivo"). On desktop the
   same menu is set a little tighter so it still fits beside the language and
   light/dark buttons; measured with research/i18n/header_fit.py. */
@media (min-width: 1341px) {
  html:is([lang="fr"], [lang="es"], [lang="pt-BR"], [lang="it"], [lang="de"]) .nav__link {
    padding-inline: 7px; letter-spacing: .035em;
  }
  html:is([lang="fr"], [lang="es"], [lang="pt-BR"], [lang="it"], [lang="de"]) .nav__link::after { left: 7px; right: 7px; }
  html:is([lang="fr"], [lang="es"], [lang="pt-BR"], [lang="it"], [lang="de"]) .nav .btn--sm {
    padding-inline: 13px; letter-spacing: .07em;
  }
  html:is([lang="es"], [lang="it"], [lang="fr"]) .nav__link { font-size: 11.5px; }
  html:is([lang="es"], [lang="it"]) .nav .btn--sm { font-size: 10.5px; letter-spacing: .05em; }
}

html[lang="ar"], html[lang="zh-Hans"], html[lang="hi"], html[lang="ur"] {
  --display-case: none;
  --display-track: 0;
  --display-stroke: 0;
}
html[lang="ar"] {
  --display: "El Messiri", "Playfair Display", "Georgia", serif;
  --ui: "Tajawal", "Outfit", system-ui, "Segoe UI", sans-serif;
}
html[lang="zh-Hans"] {
  --display: "Noto Serif SC", "Playfair Display", "Songti SC", serif;
  --ui: "Noto Sans SC", "Outfit", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
/* Hindi: Teko is a condensed Devanagari face in the spirit of League Gothic;
   Mukta sets the Devanagari body text beside Outfit's Latin. */
html[lang="hi"] {
  --display: "Teko", "League Gothic", "Arial Narrow", sans-serif;
  --ui: "Outfit", "Mukta", "Nirmala UI", system-ui, sans-serif;
}
/* Urdu is read in Nastaliq; Gulzar for the headings. */
html[lang="ur"] {
  --display: "Gulzar", "Noto Nastaliq Urdu", serif;
  --ui: "Outfit", "Noto Nastaliq Urdu", system-ui, "Segoe UI", sans-serif;
}
:is(html[lang="ar"], html[lang="zh-Hans"], html[lang="hi"], html[lang="ur"]) :is(.brand, .intro__name, .intro__brand, .intro__count) {
  --display: "League Gothic", "Arial Narrow", sans-serif;
  --ui: "Outfit", system-ui, "Segoe UI", sans-serif;
}
/* Arabic letters join: any letter-spacing breaks the words apart. Chinese is
   not set in capitals, so the wide tracking of the small labels only looks
   gappy. Neither script has italics - a slanted Arabic or Chinese line is a
   faked, distorted one. */
/* Devanagari hangs from a joined headline and Urdu joins like Arabic, so the
   same holds for Hindi and Urdu. */
:is(html[lang="ar"], html[lang="zh-Hans"], html[lang="hi"], html[lang="ur"]) body * { letter-spacing: 0 !important; }
:is(html[lang="ar"], html[lang="zh-Hans"], html[lang="hi"], html[lang="ur"]) .brand__sub { letter-spacing: .22em !important; }
:is(html[lang="ar"], html[lang="zh-Hans"], html[lang="hi"], html[lang="ur"]) .intro__brand span { letter-spacing: .34em !important; }
:is(html[lang="ar"], html[lang="zh-Hans"], html[lang="hi"], html[lang="ur"]) :is(.accent, em, i, .intro__line--2) { font-style: normal; }
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] :is(h1, h2, h3, h4) { line-height: 1.35; }
html[lang="zh-Hans"] body { line-height: 1.8; }
html[lang="zh-Hans"] :is(h1, h2, h3, h4) { line-height: 1.3; }
html[lang="hi"] body { line-height: 1.75; }
/* Devanagari at the Latin menu's 12px is too small to read; the Hindi
   labels are short, so they can be larger. */
html[lang="hi"] .nav__link { font-size: 14.5px; line-height: 1.5; }
html[lang="hi"] :is(.nav .btn--sm, .btn) { font-size: 14px; }
html[lang="hi"] :is(.eyebrow, .crumbs) { font-size: 14.5px; }
/* Two-line figures set solid (line-height 1) would let the vowel signs of
   one line touch the next. */
html[lang="hi"] :is(.coal-strip__item strong, .coal-shape__body h3, .coal-spec strong) { line-height: 1.2; }
html[lang="hi"] :is(.product__meta, .bowl__name) { line-height: 1.5; }
html[lang="hi"] :is(h1, h2, h3, h4) { line-height: 1.25; }
/* Nastaliq climbs and falls far past the line: it needs the room. */
html[lang="ur"] body { line-height: 2.1; }
html[lang="ur"] :is(h1, h2, h3, h4) { line-height: 1.75; }
/* Nastaliq reads small: the menu, buttons and small labels are set larger. */
html[lang="ur"] .nav__link { font-size: 15px; line-height: 1.5; }
html[lang="ur"] :is(.nav .btn--sm, .btn) { font-size: 14.5px; }
html[lang="ur"] :is(.eyebrow, .crumbs) { font-size: 15px; }
/* Text set tighter than Nastaliq allows (found with research/i18n/tight_lines.py). */
html[lang="ur"] :is(li, .page-head__sub, .product__meta, .spec-note, .acc__sub, .bowl__name) { line-height: 1.9; }
html[lang="ur"] :is(.coal-strip__item strong, .coal-shape__body h3, .coal-spec strong) { line-height: 1.5; }
html:is([lang="hi"], [lang="ur"]) .product__quote { font-size: 12.5px; }

/* ==========================================================================
   Charcoal (pages/charcoal.html, and the band on the home page)
   The film in the header and small rising sparks give it the motion of the
   client's style reference, in this site's own cream, navy and gold.
   ========================================================================== */
.page-head--video .eyebrow { color: #E4C179; }
.page-head__sub {
  margin: -6px 0 16px;
  font-family: var(--ui); font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.35;
  color: #E4C179;
}
.page-head--video .btn--ghost { color: #F7F2E6; border-color: rgba(247, 242, 230, .45); }
.page-head--video .btn--ghost:hover { border-color: #E4C179; background: rgba(228, 193, 121, .12); }

/* The display face in small doses (numbers, the shape names). */
.coal-strip__item strong, .coal-shape__body h3, .coal-spec strong, .coal-step__num {
  font-family: var(--display); font-weight: 400; line-height: 1;
  text-transform: var(--display-case); letter-spacing: var(--display-track);
  font-variation-settings: "wdth" var(--display-wdth);
  -webkit-text-stroke: var(--display-stroke) currentColor;
}

.coal-strip { background: var(--ink-2); border-bottom: 1px solid var(--gold-hair-soft); }
.coal-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.coal-strip__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 26px 22px;
  border-inline-start: 1px solid var(--gold-hair-soft);
}
.coal-strip__item:first-child { border-inline-start: 0; }
.coal-strip__item strong { font-size: 2rem; color: var(--gold-bright); }
.coal-strip__item span { font-size: .98rem; color: var(--text-muted); }
@media (max-width: 800px) {
  .coal-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .coal-strip__item:nth-child(3) { border-inline-start: 0; }
  .coal-strip__item:nth-child(n+3) { border-top: 1px solid var(--gold-hair-soft); }
}

.coal-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 34px); }
@media (max-width: 900px) { .coal-shapes { grid-template-columns: 1fr; } }
.coal-shape {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.coal-shape:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.coal-shape__art {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background:
    radial-gradient(ellipse 55% 50% at 50% 62%, rgba(214, 120, 46, .18), transparent 70%),
    linear-gradient(180deg, var(--ink-3), var(--ink-1));
}
.coal-shape__art svg {
  width: 60%; max-width: 330px; height: auto;
  filter: drop-shadow(0 18px 22px rgba(var(--shade-rgb), .28));
  animation: breathe 7s ease-in-out infinite;
}
/* Sparks rising off the briquette. */
.coal-sparks i {
  position: absolute; bottom: 20%; left: var(--x);
  width: 5px; height: 5px; border-radius: 50%;
  background: #FFC66B; box-shadow: 0 0 8px 2px rgba(255, 140, 40, .7);
  opacity: 0;
  animation: coal-rise 4.8s ease-out var(--d, 0s) infinite;
}
@keyframes coal-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(.7); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(16px, -130px) scale(.3); }
}
/* A photo fills the frame edge to edge; a slow zoom on hover. */
.coal-shape__art--photo { display: block; background: #0B0B0D; }
.coal-shape__art--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ease);
}
.coal-shape:hover .coal-shape__art--photo img { transform: scale(1.05); }
.coal-shape__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 3vw, 32px); }
.coal-shape__body h3 { font-size: 2.4rem; margin-bottom: 10px; }
.coal-shape__body p { margin: 0; }
.coal-shape__label {
  margin-top: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-bright);
}
.coal-sizes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.coal-sizes li {
  padding: 7px 13px; border: 1px solid var(--gold-hair); border-radius: 100px;
  background: var(--ink-0); color: var(--text);
  font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.coal-sizes li.is-popular {
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  border-color: transparent; color: var(--on-gold); font-weight: 700;
}
.coal-shape__note { display: flex; align-items: center; gap: 9px; margin-top: 14px !important; font-size: .98rem; }
.coal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; }
.coal-shape .util { margin-top: auto; padding-top: 24px; }

/* Seven figures: four on the first row, three centred under them (8 columns,
   two per figure, the fifth starting one column in). */
.coal-specs {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px;
}
.coal-specs > * { grid-column: span 2; }
.coal-specs > :nth-child(5):nth-last-child(3) { grid-column: 2 / span 2; }
.coal-spec {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(24px, 3vw, 34px) 18px; text-align: center;
  background: var(--ink-2);
  border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
}
.coal-spec strong { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--gold-bright); }
.coal-spec span { font-size: .98rem; color: var(--text-muted); }
@media (max-width: 800px) {
  .coal-specs { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .coal-specs > *, .coal-specs > :nth-child(5):nth-last-child(3) { grid-column: auto; }
  .coal-specs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.section-sub {
  margin: -4px 0 12px;
  font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  color: var(--gold-bright);
}
.coal-specs__note { max-width: 66ch; margin: 22px auto 0; text-align: center; font-size: .98rem; color: var(--text-faint); }

/* How it is made: numbered stops on a gold line that draws itself in. */
.coal-steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
}
.coal-steps__line {
  position: absolute; top: 27px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-glow));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.8s var(--ease) .25s;
}
[dir="rtl"] .coal-steps__line { transform-origin: right center; }
.coal-steps.is-in .coal-steps__line { transform: scaleX(1); }
.coal-step { position: relative; text-align: center; }
.coal-step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto 16px;
  border: 2px solid var(--gold); border-radius: 50%;
  background: var(--ink-0); color: var(--gold-bright);
  font-size: 1.6rem;
}
.coal-step h3 { font-size: 1.08rem; margin-bottom: 6px; }
.coal-step p { margin: 0; font-size: .98rem; }
@media (max-width: 900px) {
  .coal-steps { grid-template-columns: 1fr; gap: 26px; }
  .coal-steps__line {
    top: 4px; bottom: 4px; left: auto; right: auto; inset-inline-start: 27px;
    width: 2px; height: auto;
    transform: scaleY(0); transform-origin: center top;
  }
  [dir="rtl"] .coal-steps__line { transform-origin: center top; }
  .coal-steps.is-in .coal-steps__line { transform: scaleY(1); }
  .coal-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; text-align: start; }
  .coal-step__num { grid-row: span 2; margin: 0; }
}

.coal-pack h3 { font-size: 1.3rem; margin-bottom: 8px; }
.coal-pack__list { margin: 0; }
.coal-pack__list div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--ink-line);
}
.coal-pack__list div:last-child { border-bottom: 0; }
.coal-pack__list dt { color: var(--text-faint); font-size: .98rem; }
.coal-pack__list dd { margin: 0; color: var(--text); font-weight: 600; text-align: end; }

/* Home page: the charcoal band. */
.coal-band {
  display: grid; grid-template-columns: .95fr 1.05fr; align-items: stretch; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.coal-band:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.coal-band__art {
  position: relative; overflow: hidden; min-height: 280px;
  display: flex; align-items: center; justify-content: center; gap: 4%;
  background:
    radial-gradient(ellipse 60% 55% at 50% 60%, rgba(214, 120, 46, .2), transparent 70%),
    linear-gradient(180deg, var(--ink-3), var(--ink-1));
}
.coal-band__art svg { width: 38%; height: auto; filter: drop-shadow(0 14px 18px rgba(var(--shade-rgb), .26)); animation: breathe 7s ease-in-out infinite; }
.coal-band__art svg + svg { width: 46%; animation-delay: -3.5s; }
/* Photo version: the cube and the hexagonal side by side, a hairline between. */
.coal-band__art--photo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #0B0B0D; }
.coal-band__art--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coal-band__text { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.coal-band__text h2 { margin-bottom: 12px; }
.coal-band__text p { margin-bottom: 22px; }
.coal-band__text .btn { align-self: flex-start; }
@media (max-width: 800px) {
  .coal-band { grid-template-columns: 1fr; }
  .coal-band__art { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .coal-shape__art svg, .coal-band__art svg, .coal-sparks i { animation: none !important; }
  .coal-steps__line { transition: none; transform: none !important; }
}