/* =========================================================================
   Pakistani Commodities — Pakistan/Indonesia corridor
   Visual system: palette, type, spacing, surfaces.

   Rules this file enforces:
   - Six colours. Seal only on actionable things. Flag only on errors.
   - No cards, no shadows, radius never above 2px.
   - Separation by 1px steel hairlines at 20%, never by boxes.
   - 8px baseline. Section rhythm is uniform.
   ========================================================================= */

/* --- Fonts. Self-hosted. No third-party connection at runtime. ----------- */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-var.woff2") format("woff2-variations");
  font-weight: 100 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-var-ext.woff2") format("woff2-variations");
  font-weight: 100 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("/assets/fonts/plex-serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("/assets/fonts/plex-serif-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Urdu locale only — see base.njk, which preloads these on /ur/* alone. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/plex-arabic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/plex-arabic-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/plex-arabic-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Six values. Measured against paper unless noted. */
  --ink:   #0E1417;  /* text and dark surfaces        16.77:1 on paper */
  --paper: #F6F3ED;  /* the page                      16.77:1 on ink   */
  --jute:  #C4A87C;  /* rules, marks, secondary emphasis. 8.17:1 on ink;
                        2.05:1 on paper — never text on paper.         */
  --steel: #4A5A66;  /* secondary text and hairlines   6.44:1 on paper */
  --seal:  #A02C1E;  /* ACTIONABLE ONLY                6.60:1 on paper */
  --flag:  #8A6A00;  /* ERRORS AND WARNINGS ONLY       4.58:1 on paper */

  /* Hairlines. Steel at 20% on paper; jute on ink, where steel disappears. */
  --hair:      rgb(74 90 102 / 0.20);
  --hair-firm: rgb(74 90 102 / 0.40);
  --hair-ink:  rgb(196 168 124 / 0.32);

  --serif:  "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans:   "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  --arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  /* Type scale: 13 15 17 21 27 34 44 56. No sizes between these. */
  --fs-13: 0.8125rem;
  --fs-15: 0.9375rem;
  --fs-17: 1.0625rem;
  --fs-21: 1.3125rem;
  --fs-27: 1.6875rem;
  --fs-34: 2.125rem;
  --fs-44: 2.75rem;
  --fs-56: 3.5rem;

  /* Spacing: 8px baseline, 4 8 12 16 24 32 48 64 96. */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 24px;  --space-6: 32px;
  --space-7: 48px; --space-8: 64px;  --space-9: 96px;

  /* Uniform section rhythm. One value, used everywhere. */
  --rhythm: var(--space-9);
  --rhythm-tight: var(--space-8);

  --measure: 68ch;
  --page: 1200px;
  --col-margin: 152px;
  --gutter: var(--space-6);

  color-scheme: light;
}

@media (max-width: 60rem) {
  :root { --rhythm: var(--space-7); --rhythm-tight: var(--space-7); }
}

/* The hero steps down the scale on small screens: 44 is too tight at 375px. */
@media (max-width: 40rem) {
  .hero h1 { font-size: var(--fs-34); }
  .hero .hero-sub { font-size: var(--fs-21); }
}

/* --- Reset --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-17);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Short pages (About, Services, Corridor) used to leave a gap between the
     content and the footer. The footer now sits at the bottom of the viewport
     when the page is short, and flows naturally when it is long. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.masthead { flex-shrink: 0; }
main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }

address { font-style: normal; }

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-34); }
h2 { font-size: var(--fs-27); }
h3 { font-size: var(--fs-21); }
h4 { font-size: var(--fs-17); }

p, li { max-width: var(--measure); }
p + p { margin-block-start: var(--space-4); }

.lead {
  font-family: var(--serif);
  font-size: var(--fs-34);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 26ch;
  text-wrap: balance;
}

/* Homepage hero: a short display line, with the long sentence beneath it as a
   subheading at 27/44 — about 60% — in the lighter serif weight. */
.hero h1 {
  font-size: var(--fs-44);
  max-width: 18ch;
}
.hero .hero-sub {
  font-family: var(--serif);
  font-size: var(--fs-27);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 44ch;
  text-wrap: balance;
  margin-block-start: var(--space-4);
}
/* Neither Plex Serif nor Plex Mono carries U+21C4, so the corridor arrow in
   running text falls back rather than rendering a tofu box. */
.arrow {
  font-family: ui-monospace, "Segoe UI Symbol", "Segoe UI", monospace;
  font-weight: 400;
}

/* Inline mono: numerals, dates, currency, regulation and HS numbers only.
   Isolated but NOT forced to LTR — forcing direction reorders an Urdu date
   that mixes a month name with numerals. */
.fig, .mono {
  font-family: var(--mono);
  font-feature-settings: "zero" 1;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
.fig { font-size: var(--fs-21); font-weight: 500; line-height: 1.15; }
.mono { font-size: inherit; }

.label {
  font-family: var(--mono);
  font-size: var(--fs-13);
  color: var(--steel);
  line-height: 1.6;
}
.meta {
  font-family: var(--mono);
  font-size: var(--fs-13);
  color: var(--steel);
  line-height: 1.6;
  max-width: none;
}

a {
  color: var(--seal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

.skip {
  position: absolute; top: 0; inset-inline-start: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--ink); color: var(--paper);
  padding: var(--space-3) var(--space-4); z-index: 100;
}
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; }

/* --- The document grid ---------------------------------------------------
   margin | main | rail. The margin column carries reference marks. Grid
   follows writing direction, so it flips under dir="rtl" with no override.
   ------------------------------------------------------------------------- */

.page { max-width: var(--page); margin-inline: auto; padding-inline: var(--space-5); }

/* ONE content grid, used by every page. Everything starts at the same left
   edge — the page container's padding edge — so headings, heroes and sections
   line up across the whole site.

   There was previously a left margin column carrying a reference mark. It held
   real metadata on a handful of pages and nothing on twenty others, which read
   as content pushed off-centre. The mark now sits directly above its heading
   (which is what it already did on mobile), so the rail is gone and there is a
   single left edge everywhere. */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gutter);
  row-gap: 0;
  align-items: start;
}
.doc > * { grid-column: 1; }

/* The only legitimate second column: the sticky RFQ rail on product pages.
   Scoped with :has() so no other page pays for it. */
@media (min-width: 60rem) {
  .doc:has(> .rail) {
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  }
  .doc:has(> .rail) > .rail { grid-column: 2; grid-row: 1 / span 40; }
}
@media (max-width: 60rem) {
  /* Stacked, the rail falls to the end rather than interrupting the
     specification tables it sits beside on desktop. */
  .doc > .rail { order: 99; margin-block-start: var(--rhythm); }
}

/* The reference mark: a line above the heading it belongs to. */
.m-note {
  font-family: var(--mono);
  font-size: var(--fs-13);
  color: var(--steel);
  line-height: 1.6;
  max-width: none;
  margin-block-end: var(--space-2);
}
.m-note--step { font-size: var(--fs-27); color: var(--ink); }

/* --- Section rhythm ------------------------------------------------------
   One value everywhere. Inconsistent vertical spacing was the main thing
   making the previous build read as plain.
   ------------------------------------------------------------------------- */

.section { padding-block: var(--rhythm); }
.section + .section { border-block-start: 1px solid var(--hair); }
.section-head { margin-block-end: var(--space-6); }

/* --- Ink surfaces --------------------------------------------------------
   Three of them: .doors, .masthead, .footer. Every rule below
   lists all four, because steel (2.6:1) and seal (2.5:1) both fail on ink.
   There, jute does the marking and paper does the reading; seal appears only
   as a fill, where paper-on-seal gives 6.6:1.
   ------------------------------------------------------------------------- */

.doors a {
  color: var(--paper);
  text-decoration-color: var(--jute);
  text-decoration-thickness: 2px;
}
.doors a:hover { text-decoration-color: var(--paper); }

.doors .label, .doors .meta,
.masthead .label, .masthead .meta,
.footer .label, .footer .meta,
.footer .mono, .footer address { color: var(--jute); }

.doors :focus-visible,
.masthead :focus-visible, .footer :focus-visible { outline-color: var(--jute); }

.doors h1, .doors h2, .doors h3 { color: var(--paper); }

/* Full-bleed sections. Both users of this class are direct children of <main>,
   so they already span the full content width and need no negative margin.
   The usual calc(50% - 50vw) trick is wrong here: 50vw counts the scrollbar
   and 50% does not, so it overhangs by half a scrollbar on each side and
   creates the horizontal scroll it was meant to avoid. */
.bleed { margin-inline: 0; padding-inline: 0; }

/* --- Masthead ------------------------------------------------------------ */

.masthead { background: var(--ink); color: var(--paper); }
.masthead-in {
  max-width: var(--page); margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--space-6); row-gap: var(--space-3);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600; font-size: var(--fs-17);
  letter-spacing: -0.02em;
  color: var(--paper); text-decoration: none;
}
.wordmark:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.wordmark-mark { flex: none; display: block; }
.footer-mark { display: block; margin-block-end: var(--space-4); }
.masthead nav { display: flex; flex-wrap: wrap; column-gap: var(--space-5); row-gap: var(--space-2); align-items: baseline; }
.masthead nav a {
  color: var(--paper); text-decoration: none;
  font-size: var(--fs-15); padding-block: var(--space-1);
}
.masthead nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--jute); }
.masthead nav a[aria-current="page"],
.masthead nav a[aria-current="true"] { border-block-end: 2px solid var(--jute); }
.masthead .desk { font-weight: 500; }
.langs { margin-inline-start: auto; display: flex; gap: var(--space-3); align-items: baseline; }
.langs a, .langs span {
  font-family: var(--mono); font-size: var(--fs-13);
  color: var(--jute); text-decoration: none;
}
.langs a:hover { text-decoration: underline; }
.langs [aria-current="true"] { color: var(--paper); }
.langs [lang="ur"] { font-family: var(--arabic); font-size: var(--fs-15); }

/* A language with no translated route for this page stays listed but inert, so
   the switcher does not appear to lose options as you move around.

   It is struck through rather than dimmed. Dimming is the reflex here, but the
   masthead ground is ink and steel on ink measures 2.60:1 — the same failure
   this palette was audited to remove. A rule through the name carries the
   meaning at jute's full 8.17:1 instead of trading legibility for it. */
.langs [aria-disabled="true"] {
  cursor: default;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --- Mobile navigation ---------------------------------------------------
   A disclosure, not a drawer: the panel pushes the page down rather than
   sliding over it. No overlay, no shadow, no radius, no transform.

   The wrapper is display:contents above the breakpoint, so the desktop
   masthead lays out exactly as it did before the wrapper existed.
   ------------------------------------------------------------------------- */
.masthead-menu { display: contents; }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  align-items: center;
  padding: var(--space-2);
  margin-inline-end: calc(var(--space-2) * -1);
  background: none; border: 0; color: var(--paper); cursor: pointer;
}
.nav-toggle svg { stroke-linecap: square; }
.nav-toggle-cross,
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-cross { display: block; }
.nav-toggle[aria-expanded="false"] .nav-toggle-label-shut,
.nav-toggle[aria-expanded="true"] .nav-toggle-label-open { display: none; }

/* 64rem, because the breakpoint has to clear the widest locale, and the bar is
   not the same width in all three. Measured, one row, including the language
   switcher: English 909px, Bahasa 905px, Urdu 1017px — Urdu carries a seventh
   nav item and sets Arabic a size larger. */
@media (max-width: 64rem) {
  .masthead-in { column-gap: var(--space-4); align-items: center; }

  /* Only with scripting: otherwise the panel below stays open and reachable. */
  .js .nav-toggle { display: flex; }
  .js .masthead-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--jute);
  }
  .js .masthead-menu[data-open] { display: flex; }

  .masthead nav { flex-direction: column; align-items: stretch; row-gap: 0; }
  .masthead nav a {
    font-size: var(--fs-18);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--steel);
  }
  .masthead nav a:last-child { border-block-end: 0; }

  /* A nav item with no translation for this locale carries dir="ltr" so its
     Latin label renders correctly. That also makes every logical property on
     it — text-align:start, border-inline-start — resolve against the LINK's
     direction rather than the page's, which in Urdu would align the row to the
     wrong edge and put the marker on the wrong side. As stacked rows that is
     plainly visible, so alignment is set from the page direction instead. */
  [dir="ltr"] .masthead nav a { text-align: left; }
  [dir="rtl"] .masthead nav a { text-align: right; }

  /* An underline would sit on top of the row rule; a leading mark reads
     cleanly in both directions. */
  .masthead nav a[aria-current="page"],
  .masthead nav a[aria-current="true"] {
    border-block-end: 1px solid var(--steel);
  }
  [dir="ltr"] .masthead nav a[aria-current="page"],
  [dir="ltr"] .masthead nav a[aria-current="true"] {
    border-left: 2px solid var(--jute);
    padding-left: var(--space-3);
    margin-left: calc((var(--space-3) + 2px) * -1);
  }
  [dir="rtl"] .masthead nav a[aria-current="page"],
  [dir="rtl"] .masthead nav a[aria-current="true"] {
    border-right: 2px solid var(--jute);
    padding-right: var(--space-3);
    margin-right: calc((var(--space-3) + 2px) * -1);
  }
  .masthead nav a:last-child[aria-current="page"],
  .masthead nav a:last-child[aria-current="true"] { border-block-end: 0; }

  .langs { margin-inline-start: 0; gap: var(--space-4); }
}


/* --- Two doors -----------------------------------------------------------
   Two panels that touch, split by one jute hairline. A split of the page,
   not two objects on it.
   ------------------------------------------------------------------------- */

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  color: var(--paper);
  /* The panels stay edge to edge — the ink paints the padding — but their
     content is inset to the same line as every other page, so the left panel
     starts exactly where the headings elsewhere start. */
  padding-inline: max(var(--space-5), calc((100% - var(--page)) / 2 + var(--space-5)));
}
.door {
  padding-block: var(--rhythm-tight);
  display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 400px;
}
.door:first-child { padding-inline-end: var(--space-6); }
.door + .door { border-inline-start: 1px solid var(--hair-ink); padding-inline-start: var(--space-6); }
.door h2 { font-size: var(--fs-34); }
.door .route {
  font-family: var(--mono); font-size: var(--fs-13); color: var(--jute);
  unicode-bidi: isolate;
}
.door ul { list-style: none; padding: 0; margin-block-start: auto; }
.door li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--hair-ink);
  font-size: var(--fs-15);
  max-width: none;
}
.door li .hs { font-family: var(--mono); color: var(--jute); unicode-bidi: isolate; }
.door .door-link { font-size: var(--fs-21); }
.door .door-link a { font-family: var(--serif); letter-spacing: -0.02em; }

@media (max-width: 50rem) {
  .doors { grid-template-columns: 1fr; }
  .door:first-child { padding-inline-end: 0; }
  .door + .door {
    border-inline-start: 0; padding-inline-start: 0;
    border-block-start: 1px solid var(--hair-ink);
  }
  .door { min-height: 0; }
}

/* --- Corridor status: the manifest ---------------------------------------
   A document, not a widget. Printed on paper, ruled like a shipping manifest:
   a firm rule under the header, a jute hairline between every fact, figures
   in mono, and the source and verified date set in small caps beneath the
   fact they belong to.
   ------------------------------------------------------------------------- */

.corridor { padding-block: var(--rhythm); background: var(--paper); color: var(--ink); }
.corridor-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-3); align-items: baseline;
  padding-block-end: var(--space-3);
}
.corridor-head .label {
  font-family: var(--mono); font-size: var(--fs-13);
  color: var(--ink);
  font-variant-caps: all-small-caps; letter-spacing: 0.08em;
}
.corridor-head .meta { color: var(--steel); }

/* Header rule of the document. The one heavy line on the page. */
.route-line {
  height: 2px;
  background: var(--ink);
  transform-origin: left center;
  animation: route-draw 700ms cubic-bezier(0.2, 0, 0, 1) both;
}
[dir="rtl"] .route-line { transform-origin: right center; }
@keyframes route-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .route-line { animation: none; } }

.crows { list-style: none; padding: 0; margin: 0; }
.crow {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--space-2);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--jute);
  max-width: none;
}
.crow-marker {
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--mono); font-size: var(--fs-13);
  font-variant-caps: all-small-caps; letter-spacing: 0.08em;
  color: var(--seal);                 /* the status marker */
  padding-block-start: 4px;
}
.crow[data-tone="alert"] .crow-marker { color: var(--flag); }  /* a warning */
.crow-body { grid-column: 2; }
.crow-lead {
  font-family: var(--mono);
  font-size: var(--fs-56);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-block-end: var(--space-3);
  unicode-bidi: isolate;
  max-width: none;
}
.crow-statement { font-size: var(--fs-17); max-width: var(--measure); }
.crow-statement .fig { font-size: var(--fs-21); }
/* Source and verified date, in small caps, beneath the fact. */
.crow-source {
  grid-column: 2;
  font-family: var(--sans);
  font-size: var(--fs-13);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--steel);
  line-height: 1.6;
  max-width: var(--measure);
}
.crow-source .fig, .crow-source .mono {
  font-size: var(--fs-13); font-weight: 400;
  font-variant-caps: normal; letter-spacing: 0;
}
.crow-source a { color: var(--seal); }

/* The manifest figure steps down the scale rather than jumping: 56 → 44 → 34. */
@media (max-width: 75rem) {
  .crow-lead { font-size: var(--fs-44); }
}
@media (max-width: 60rem) {
  .crow { grid-template-columns: minmax(0, 1fr); }
  .crow-marker { grid-column: 1; grid-row: auto; padding-block-start: 0; }
  .crow-body, .crow-source { grid-column: 1; }
  .crow-lead { font-size: var(--fs-34); }
  .lead { font-size: var(--fs-27); max-width: 30ch; }
  .door h2 { font-size: var(--fs-27); }
}

/* --- Tables --------------------------------------------------------------
   Real horizontal rules, no zebra, no vertical rules, no radius.
   ------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-block: var(--space-4); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-15);
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: start; font-size: var(--fs-13); font-family: var(--mono);
  color: var(--steel); padding-block-end: var(--space-2);
}
thead th {
  text-align: start; font-weight: 500; font-size: var(--fs-13);
  font-family: var(--sans);
  font-variant-caps: all-small-caps; letter-spacing: 0.06em;
  color: var(--steel);
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-block-end: 1px solid var(--hair-firm);
  white-space: nowrap;
}
td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-block-end: 1px solid var(--hair);
  vertical-align: top;
}
th:last-child, td:last-child { padding-inline-end: 0; }
tbody tr:last-child td, tbody tr:last-child th { border-block-end: 1px solid var(--hair-firm); }
td .mono, th .mono { font-size: var(--fs-15); }

/* Row headers in a key/value table are labels: they wrap, take the ordinary
   row rule, and carry no emphasis. */
tbody th {
  font-weight: 400; font-size: var(--fs-15);
  color: var(--steel); white-space: normal; vertical-align: top;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-block-end: 1px solid var(--hair);
}
.t-spec th { width: 224px; }


/* Honeypot: off-canvas for people, still in the payload for bots. */
.hp {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Notices -------------------------------------------------------------
   Weight and words carry the meaning; colour reinforces. Never filled, never
   a link, never a button — so a warning cannot be read as a call to action.
   ------------------------------------------------------------------------- */

.notice {
  border-inline-start: 2px solid var(--ink);
  padding-inline-start: var(--space-4);
  padding-block: var(--space-1);
  margin-block: var(--space-6);
}
.notice .notice-label {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-13); font-weight: 500;
  font-variant-caps: all-small-caps; letter-spacing: 0.08em;
  color: var(--flag);
  margin-block-end: var(--space-1);
}
.notice p { max-width: var(--measure); }
.doors .notice { border-inline-start-color: var(--jute); }
.doors .notice .notice-label { color: var(--jute); }
.notice--ok .notice-label { color: var(--steel); }

/* --- Steps. The only numbered sequence on the site. ---------------------- */

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li {
  display: grid;
  grid-template-columns: var(--col-margin) minmax(0, var(--measure));
  column-gap: var(--gutter);
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--hair);
  max-width: none;
}
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--mono);
  font-size: var(--fs-27);
  color: var(--jute);
  text-align: end;
  line-height: 1.15;
}
.steps > li:last-child { border-block-end: 1px solid var(--hair); }
.steps :is(h2, h3) { margin-block-end: var(--space-2); }

@media (max-width: 60rem) {
  .steps > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .steps > li::before { text-align: start; }
}

/* --- Forms --------------------------------------------------------------- */

.form { max-width: var(--measure); }
.field { margin-block-end: var(--space-5); }
.field label { display: block; font-weight: 500; font-size: var(--fs-15); margin-block-end: var(--space-1); }
.field .help { display: block; font-size: var(--fs-13); color: var(--steel); margin-block-end: var(--space-2); }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--steel);
  border-radius: 2px;
  background: transparent;
  padding: var(--space-3);
  font-size: var(--fs-17);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field .req {
  color: var(--steel); font-weight: 400; font-family: var(--sans);
  font-size: var(--fs-13); font-variant-caps: all-small-caps; letter-spacing: 0.06em;
}

.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: var(--flag); border-width: 2px; }
.field .field-error {
  display: block; font-family: var(--sans); font-size: var(--fs-13);
  font-variant-caps: all-small-caps; letter-spacing: 0.06em;
  color: var(--flag); margin-block-start: var(--space-1);
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-block-start: var(--space-6); }
/* A WhatsApp button and, where the page serves both audiences, the direction
   it answers for. align-items:start keeps the buttons on one line when one
   carries a label and the other does not. */
.actions:has(.wa .meta) { align-items: start; }
/* Its own row. Beside the submit button the pair gets 537px and needs 543, so
   it broke in half; on its own row it has 694px, which also leaves headroom
   for longer labels in other locales. */
.wa-pair { display: flex; flex-wrap: wrap; gap: var(--space-4); flex-basis: 100%; }
.wa { display: inline-flex; flex-direction: column; gap: var(--space-2); }
.wa .meta { text-align: center; }

.btn {
  display: inline-block;
  background: var(--seal);
  color: var(--paper);
  border: 1px solid var(--seal);
  border-radius: 2px;
  padding: var(--space-3) var(--space-5);
  font-weight: 500;
  font-size: var(--fs-15);
  text-decoration: none;
  cursor: pointer;
}
/* Derived from seal, not a seventh value. Falls back to flat seal where
   color-mix is unsupported — the underline still signals the hover. */
.btn:hover {
  background: color-mix(in srgb, var(--seal) 82%, var(--ink));
  border-color: color-mix(in srgb, var(--seal) 82%, var(--ink));
  text-decoration: none;
}
.btn-outline { background: transparent; color: var(--seal); border: 1px solid var(--seal); }
.btn-outline:hover { background: transparent; color: var(--seal); border-color: var(--seal); text-decoration: underline; }
/* On ink, seal appears as a fill — paper on seal is 6.60:1. */
.doors .btn-outline, .footer .btn-outline { background: transparent; color: var(--paper); border-color: var(--jute); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Row lists (products index, latest from the corridor) ---------------- */

.rows { list-style: none; padding: 0; }
.rows > li {
  display: grid;
  grid-template-columns: var(--col-margin) minmax(0, 1fr);
  column-gap: var(--gutter);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--hair);
  max-width: none;
}
.rows > li:last-child { border-block-end: 1px solid var(--hair); }
.rows .r-mark {
  font-family: var(--mono); font-size: var(--fs-13); color: var(--steel);
  text-align: end; padding-block-start: 4px; unicode-bidi: isolate;
}
.rows .r-body :is(h2, h3) { font-size: var(--fs-21); margin-block-end: var(--space-1); }
.rows .r-body p { font-size: var(--fs-15); color: var(--steel); margin: 0; }

@media (max-width: 60rem) {
  .rows > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .rows .r-mark { text-align: start; }
}

/* --- Proof / people ------------------------------------------------------ */

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: var(--space-6); }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-block-end: var(--space-3); border-radius: 0; }
.person .name { font-family: var(--serif); font-weight: 600; font-size: var(--fs-21); letter-spacing: -0.02em; }
.person .role { color: var(--steel); font-size: var(--fs-15); }
figcaption { font-family: var(--mono); font-size: var(--fs-13); color: var(--steel); margin-block-start: var(--space-2); }

/* --- Footer -------------------------------------------------------------- */

.footer {
  background: var(--ink); color: var(--paper);
  padding-block: var(--rhythm) var(--space-6);
  /* No top margin: the last section already ends on a full rhythm step, so a
     margin here doubled it into a visible gap on short pages. */
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: var(--space-6); }
.footer h2 {
  font-family: var(--sans); font-size: var(--fs-13); font-weight: 500;
  font-variant-caps: all-small-caps; letter-spacing: 0.08em;
  color: var(--jute); margin-block-end: var(--space-3);
}
.footer ul { list-style: none; padding: 0; }
.footer li { font-size: var(--fs-15); padding-block: 2px; }
.footer a { color: var(--paper); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--jute); }
.footer address { font-style: normal; font-size: var(--fs-15); line-height: 1.6; }
.footer .entity { margin-block-end: var(--space-5); }
.footer .entity .ename { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; }
.footer .entity .invoices {
  color: var(--jute); font-family: var(--sans); font-size: var(--fs-13);
  font-variant-caps: all-small-caps; letter-spacing: 0.06em;
}
.footer-base {
  margin-block-start: var(--rhythm-tight); padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--hair-ink);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}

/* --- Prose helpers ------------------------------------------------------- */

.prose > * + * { margin-block-start: var(--space-4); }
.prose h2 { margin-block-start: var(--space-8); }
.prose h3 { margin-block-start: var(--space-6); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); }
.prose li + li { margin-block-start: var(--space-2); }
.prose ul { list-style: square; }
.prose ul::marker, .prose li::marker { color: var(--jute); }

.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-5 > * + * { margin-block-start: var(--space-5); }
.stack-6 > * + * { margin-block-start: var(--space-6); }

/* --- Urdu ----------------------------------------------------------------
   One Arabic-script family across the locale, so headings and dense UI share
   a texture. Sizes step up one notch from the Latin scale: Arabic script sits
   optically smaller at the same nominal size.
   ------------------------------------------------------------------------- */

/* Only the Urdu locale puts the Arabic face in the mono stack: an Urdu date is
   mono digits around a month name. Latin pages must never download it — the
   arrows in .mono spans would otherwise pull 41 KB of Arabic font. */
html[lang="ur"] { --mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace; }
html[lang="ur"] body { font-family: var(--arabic); font-size: var(--fs-17); line-height: 1.8; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4,
html[lang="ur"] .lead, html[lang="ur"] .wordmark,
html[lang="ur"] .person .name, html[lang="ur"] .footer .entity .ename {
  font-family: var(--arabic);
  font-weight: 600;
  letter-spacing: 0;      /* negative tracking damages Arabic joining */
  line-height: 1.5;
}
html[lang="ur"] h1 { font-size: var(--fs-34); }
html[lang="ur"] h2 { font-size: var(--fs-27); }
html[lang="ur"] h3 { font-size: var(--fs-21); }
html[lang="ur"] .lead { font-size: var(--fs-27); font-weight: 400; line-height: 1.6; max-width: 30ch; }
html[lang="ur"] .prose p, html[lang="ur"] .prose li { font-size: var(--fs-17); line-height: 1.8; }
html[lang="ur"] table, html[lang="ur"] .field, html[lang="ur"] .masthead,
html[lang="ur"] .footer, html[lang="ur"] .btn, html[lang="ur"] .rows { font-family: var(--arabic); }
/* Small caps are a Latin device; Arabic script has no case. */
html[lang="ur"] .crow-source, html[lang="ur"] .notice-label,
html[lang="ur"] thead th, html[lang="ur"] .footer h2, html[lang="ur"] .field .req,
html[lang="ur"] .crow-marker, html[lang="ur"] .corridor-head .label,
html[lang="ur"] .footer .entity .invoices {
  font-variant-caps: normal; letter-spacing: 0;
}
/* An inline figure inside Urdu prose sits at body size: a mono run set two
   steps larger fights the Arabic line, and the date is already isolated. */
html[lang="ur"] .fig { font-size: inherit; font-weight: 600; }

/* --- Print --------------------------------------------------------------- */

@media print {
  .masthead, .footer, .rail, .route-line, .actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}