/* OG Trading — design system v3 (pass 12; see docs/DESIGN-NOTES.md "Home v11 / inner pages"). Plain CSS, no preprocessor.
   Surfaces: paper (mineral white) and titanium alternate; ink (deep petroleum) carries the bridge between the two industrial
   scenes and the scene text; the header, the closing request band and the footer are light. One family, IBM Plex Sans (OFL),
   normal width, weights 400 / 500 / 600. Joins between a frame and a surface live in the NEXT section as an eased band that
   starts in the frame's own edge tone (sampled from the renders), so the images themselves carry no overlay. */

/* ---------- font: IBM Plex Sans variable (OFL, licence in ../fonts/OFL-IBM-Plex.txt), self-hosted latin subset ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-variable-normal-latin.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-variable-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --ink: #182A33;          /* deep petroleum: text on light, the bridge, scene text backdrops */
  --steel: #3F545E;        /* secondary text on light (6.8 : 1 on paper, 6.2 : 1 on titanium) */
  --paper: #F4F6F5;        /* mineral white: the main light surface, header, footer */
  --titanium: #DADEDF;     /* light titanium = the IT studio's baked wall (mean of the frame edges, pass 14): the alternate surface, What we source, the studio pad and blend, the closing band — one token, so the frame and its section are one surface */
  --white: #FFFFFF;        /* fields and the form card only */
  --haze: #B9C8CE;         /* secondary text and hairlines on ink (8.6 : 1) */
  --crimson: #A62E61;      /* the brand accent: primary button, focus ring, link underline, active navigation, hub and outgoing routes */
  --crimson-deep: #8A2450;
  --hair: rgba(24, 42, 51, 0.14);
  --hair-strong: rgba(24, 42, 51, 0.32);
  --hair-dark: rgba(185, 200, 206, 0.26);
  --error: #B3261E;
  --ok: #2E6B3A;
  /* edge tones of the frames (re-measured on the final Topaz frames, the outer 4 rows as stored sRGB): where a frame hands over to a surface */
  --tone-sea: #4D5962;     /* platform, bottom edge of the last frame (mean of the outer 4 rows); its thirds, left to right: */
  --tone-sea-l: #4F5C67; --tone-sea-c: #4A5359; --tone-sea-r: #4F5B66;
  --tone-sky: #485368;     /* pumpjack, top edge of the first frame (zenith) and its thirds */
  --tone-sky-l: #455268; --tone-sky-c: #485367; --tone-sky-r: #4A566A;
  --tone-ground: #967D68;  /* pumpjack, bottom edge of the last frame: sand at the sides, the concrete slab in the middle */
  --tone-ground-l: #8F7764; --tone-ground-c: #A28D7E; --tone-ground-r: #907157;
  --tone-floor: #DCE1E2;   /* IT studio, bottom edge of the frames (the floor right of the cabinet; pass 14, measured) */

  --font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --h1: clamp(2.25rem, 3.4vw + 0.6rem, 4rem);           /* 36 → 64 px */
  --h-scene: clamp(2rem, 2.6vw + 0.5rem, 3.25rem);      /* 32 → 52 px, the scene headlines */
  --h2: clamp(1.625rem, 1.4vw + 0.8rem, 2.125rem);      /* 26 → 34 px, section headings */
  --h3: 1.1875rem;
  --lead: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  --text: 1.0625rem;
  --ui: 0.9375rem;
  --small: 0.8125rem;

  --gutter: clamp(20px, 4vw, 56px);
  --max: 1360px;
  --wide: 1760px;           /* photographic compositions may use the wider frame on large screens */
  --bar-h: 72px;
  --sect: clamp(64px, 9vw, 128px);
  --band: 88px;             /* the join band in the section that follows a frame (desktop) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0; font-family: var(--font); font-size: var(--text); line-height: 1.6; color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; overflow-x: clip; font-variant-numeric: tabular-nums;
}
img, picture, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, dt, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.scene:not(.scene--it) :focus-visible, .bridge :focus-visible { outline-color: var(--paper); }   /* pass 16 (review): a legible ring on the dark stages */
::selection { background: var(--ink); color: var(--paper); }

/* type: one family, normal width; headings in Medium with a quiet negative tracking and room to breathe */
h1 { font-size: var(--h1); font-weight: 500; letter-spacing: -0.012em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: var(--h2); font-weight: 500; letter-spacing: -0.008em; line-height: 1.15; text-wrap: balance; }
h3 { font-size: var(--h3); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
b, strong { font-weight: 600; }
.lead { font-size: var(--lead); line-height: 1.55; max-width: 60ch; }
p { max-width: 64ch; }
p, li, dd { text-wrap: pretty; }   /* pass 16: no single short word on a last line where the engine can avoid it */
.small { font-size: var(--small); }
.steel { color: var(--steel); }

.skip { position: absolute; left: var(--gutter); top: -48px; z-index: 60; padding: 10px 14px; background: var(--ink); color: var(--paper); text-decoration: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* visually hidden, read by assistive technology */
.skip:focus { top: calc(var(--bar-h) + 8px); }   /* pass 17: under the bar, over the page — it no longer covers the mark */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--wide); }

/* ---------- links & buttons ---------- */
.link { color: inherit; text-decoration: underline; text-decoration-color: var(--crimson); text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 500; }
.link:hover { text-decoration-thickness: 2px; }
.link--dark { color: var(--paper); text-decoration-color: var(--haze); }
.link--dark:hover { text-decoration-color: var(--paper); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border-radius: 2px;
  font-size: var(--ui); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--primary { background: var(--crimson); color: var(--paper); }
.btn--primary:hover { background: var(--crimson-deep); }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.btn--ghost { border: 1px solid var(--hair-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: var(--small); }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---------- header: one light bar — logo, five destinations, one primary action ---------- */
.bar { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--hair); }
.bar__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; min-height: var(--bar-h); }
.bar__brand { display: block; padding: 4px 0; }
.bar__brand img { height: 46px; width: auto; }
.bar__nav { display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 36px); font-size: var(--ui); font-weight: 500; }
.bar__nav a { position: relative; text-decoration: none; padding: 8px 0; white-space: nowrap; color: var(--steel); transition: color 160ms ease; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease); }
.bar__nav a:hover { color: var(--ink); }
.bar__nav a:hover::after { transform: scaleX(1); background: var(--hair-strong); }
.bar__nav a[aria-current="page"] { color: var(--ink); }
.bar__nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--crimson); }
.bar__cta { min-height: 42px; }
.bar__menu { display: none; min-height: 40px; padding: 0 8px; font-size: var(--ui); font-weight: 500; border: 1px solid var(--hair-strong); border-radius: 2px; }
.bar__menu[aria-expanded="true"] { border-color: var(--ink); }
.sheet { display: none; }
@media (max-width: 1023px) {
  .bar__in { grid-template-columns: auto 1fr auto auto; gap: 12px; }
  .bar__cta { justify-self: end; }                   /* the hidden nav leaves the 1fr column to the button: keep its natural width */
  .bar__nav { display: none; }
  .bar__menu { display: inline-flex; justify-self: end; }   /* pass 16: on the request page there is no bar button, so the menu lands in the 1fr column — keep its own width */
  .sheet:not([hidden]) { display: block; background: var(--paper); border-top: 1px solid var(--hair); }
  .sheet nav { display: grid; padding: 6px var(--gutter) 18px; max-width: var(--max); margin-inline: auto; }
  .sheet a { padding: 14px 0; text-decoration: none; border-bottom: 1px solid var(--hair); font-size: 1.0625rem; font-weight: 500; }
  .sheet a[aria-current="page"] { color: var(--crimson); }
  .sheet a:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  :root { --bar-h: 60px; --band: 40px; }
  .bar__brand img { height: 36px; }
  .bar__cta { min-height: 36px; padding: 0 12px; font-size: var(--small); }
}

/* ---------- sections, document layout ---------- */
.section { position: relative; padding-block: var(--sect); }
.section--white { background: var(--paper); }      /* legacy class names: --white = paper, --zinc = titanium */
.section--zinc { background: var(--titanium); }
.section + .section--white, .section--white + .section { border-top: 1px solid var(--hair); }
.doc { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.doc__margin h2 { max-width: 14ch; }
.doc__body > * + * { margin-top: 28px; }
.doc__body > .lead + .rows, .doc__body > .lead + .spec, .doc__body > .lead + .steps { margin-top: 40px; }
@media (min-width: 1024px) {
  .doc { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(32px, 4vw, 72px); }
  .doc__margin h2 { position: sticky; top: calc(var(--bar-h) + 28px); }
}

/* page intro (text-only inner pages: privacy, request) */
.intro { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); background: var(--paper); border-bottom: 1px solid var(--hair); }
.intro h1 { max-width: 20ch; }
.intro .lead { margin-top: 24px; color: var(--steel); }
.intro__meta { margin-top: 28px; font-size: var(--small); color: var(--steel); }

/* ---------- inner pages (pass 13): each page composed around its own content, one shared vocabulary ----------
   Openings show the photograph at its own proportion (nothing cropped): the title column beside it, the photo first on phones.
   Bands are the one place a photograph may be cropped (a wide 2 : 1 or 21 : 9 window, capped at 70 % of the viewport height).
   Splits pair a photograph and its text with a 7 : 5 proportion either way. Cells and triplets lay parallel items side by
   side with a top rule; the numbered steps stay for the one real sequence (an order). */
.open { background: var(--paper); border-bottom: 1px solid var(--hair); padding-block: clamp(32px, 4.5vw, 64px) clamp(40px, 5vw, 80px); }
.open__grid { display: grid; gap: 28px clamp(32px, 4vw, 72px); align-items: center; }
.open h1 { max-width: 16ch; }
.open .lead { margin-top: 20px; color: var(--steel); max-width: 48ch; }
.open__meta { margin-top: 22px; font-size: var(--small); color: var(--steel); max-width: 48ch; }
.open__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.open__photo img { width: 100%; height: auto; }
.open__photo--globe img { max-width: 800px; margin-inline: auto; }   /* pass 15: the About globe is the opening's major element (≤ 800 px on a large desktop) */
.open--text { padding-bottom: clamp(28px, 3.5vw, 48px); border-bottom: 0; }
.open--text h1 { max-width: 18ch; }
@media (min-width: 1024px) {
  .open__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .open__grid--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .open__grid--globe { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .open__grid--globe .open__photo--globe { margin-block: -2% -3%; }
  .open--fill { min-height: calc(100svh - var(--bar-h)); display: flex; flex-direction: column; justify-content: center; }   /* pass 17: the About opening fills the first viewport under the bar (a minimum: it grows with its content, short windows and large text) */
}
@media (min-width: 1600px) { .open__photo--globe img { max-width: 880px; } }   /* pass 17: on wide desktops the globe keeps its share of the first screen */
@media (min-width: 1024px) and (max-height: 900px) { .open__photo--globe img { max-width: calc(100svh - var(--bar-h) - 120px); } }   /* pass 17: up to 900 px high (1366 × 768, 1536 × 864, 1440 × 900) the globe is sized by the height, so the opening fits the first screen exactly */

/* openings with a band (pass 14): the title row — the title at the left, the lead and the actions at the right — and under it the
   photograph across the wide frame, cropped only from the bottom (the plant keeps its stack; phones see the whole frame) */
.open--band { padding-bottom: 0; border-bottom: 0; }
.open__row { display: grid; gap: 16px clamp(32px, 4vw, 72px); align-items: end; padding-bottom: clamp(28px, 3.5vw, 48px); }
.open__row h1 { max-width: 14ch; }
.open__row .lead { margin-top: 0; }
@media (min-width: 900px) { .open__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .open__row .lead { max-width: 54ch; } }
.open__band { overflow: clip; background: var(--titanium); }
.open__band img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; }
@media (min-width: 640px) { .open__band img { aspect-ratio: 3 / 2; } }
@media (min-width: 1024px) { .open__band img { aspect-ratio: 16 / 9; max-height: 80vh; } }
.open__band--cols img { aspect-ratio: 16 / 10; object-position: 50% 60%; }   /* the refinery columns (Manufacturers), pass 17: the whole 16 : 10 frame below 1024 px; from 1024 a 16 : 9 window placed so the stack tops and the lower pipework both stay (was 11 : 5 at 72 %, which cut both) */
.open__band--centre img { object-position: 50% 50%; }   /* the server aisle (IT): cropped from both edges, the vanishing point kept */
.open__band--sea img { object-position: 50% 42%; }   /* the offshore platforms (Industries): the horizon kept high in the frame */
@media (min-width: 1024px) { .open__band--aisle img { aspect-ratio: 21 / 10; max-height: 72vh; } }   /* the server aisle: a lower band, the floor and the ceiling both in the frame */
@media (min-width: 640px) { .open__band--cols img { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) { .open__band--cols img { aspect-ratio: 16 / 9; max-height: 82vh; } }
/* the IT opening (pass 14): a dark composition — the title on ink, the server room filling the right column */
.open--ink { background: var(--ink); color: var(--paper); border-bottom: 0; padding: 0; }
.open--ink .open__grid { gap: 0; align-items: stretch; }
.open--ink .open__copy { padding: clamp(40px, 6vw, 96px) 0 clamp(32px, 4vw, 56px); }
.open--ink .lead, .open--ink .open__meta { color: var(--haze); }
.open--ink .open__meta { font-size: var(--text); max-width: 44ch; }
.open--ink .open__photo { margin-inline: calc(-1 * var(--gutter)); }
.open--ink .open__photo img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 1024px) {
  .open--ink .open__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); }
  .open--ink .open__copy { padding-block: clamp(56px, 8vw, 128px); }
  .open--ink .open__photo { margin: 0 calc(-1 * var(--gutter)) 0 0; display: flex; }
  .open--ink .open__photo img { aspect-ratio: auto; min-height: 520px; max-height: 78vh; }
}

/* photo sections: a wide band, then the heading and the text in two columns under it (pass 15: ≈ 20 px between a band and its text) */
.photo-sec { padding-block: clamp(28px, 3.5vw, 48px); }
.open--band + .photo-sec, .open--band + .split { padding-top: 0; }
.photo-sec--plain { padding-block: 0; }
.photo-sec--plain + .section { border-top: 0; }
.pband { position: relative; overflow: clip; background: var(--titanium); }
.pband img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; }
.pband--2x1 img { aspect-ratio: 2 / 1; }
.pband--21x9 img { aspect-ratio: 21 / 9; }
.pband--top img { object-position: 50% 0; }   /* the Ras Laffan band keeps its flares: cropped from the bottom only */
@media (min-width: 1024px) { .pband img { max-height: 70vh; } }
.twocol { display: grid; gap: 16px clamp(32px, 4vw, 72px); padding-top: clamp(16px, 2vw, 24px); }
.twocol__links, .split__links { margin-top: 18px; }
.row-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }   /* a button and a link side by side, wrapping cleanly on phones */
.twocol h2 { max-width: 14ch; }
.twocol .lead { color: var(--ink); max-width: 44ch; }
.twocol p { color: var(--steel); max-width: 56ch; }
.twocol p + p { margin-top: 14px; }
.twocol__note { font-size: var(--ui); }
@media (min-width: 900px) { .twocol { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }

/* split sections: photograph and text, 7 : 5 either way */
.split { position: relative; padding-block: clamp(28px, 3.5vw, 48px); }
.split__grid { display: grid; gap: 18px clamp(32px, 4vw, 72px); align-items: center; }
.split__text h2 { max-width: 16ch; }
.split__text .lead { margin-top: 16px; color: var(--ink); max-width: 44ch; }
.split__text p { color: var(--steel); max-width: 52ch; }
.split__text p + p { margin-top: 14px; }
.split__photo img { width: 100%; height: auto; }
@media (min-width: 900px) {
  .split__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--text-first .split__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--text-first .split__photo { order: 2; }
}

/* heading row above cells / triplets / steps: the heading and its lead side by side */
.head-row { display: grid; gap: 12px clamp(32px, 4vw, 72px); margin-bottom: clamp(28px, 3.5vw, 44px); }
.head-row h2 { max-width: 14ch; }
.head-row .lead { color: var(--steel); max-width: 52ch; }
@media (min-width: 900px) { .head-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
/* parallel items: cells (equipment categories) and triplets (the three request details, three product lines, three kinds of customer) */
.cells { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
.cells__cell { padding: 18px 0 26px; border-top: 1px solid var(--hair-strong); }
.cells__cell h3 { font-size: 1.25rem; }
.cells__cell p { margin-top: 10px; color: var(--steel); max-width: 40ch; }
@media (min-width: 640px) { .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023px) { .cells--five > :nth-child(5) { grid-column: 1 / -1; } .cells--five > :nth-child(5) p { max-width: 60ch; } }
@media (min-width: 1024px) { .cells--five { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cells--five > :nth-child(-n+3) { grid-column: span 2; } .cells--five > :nth-child(n+4) { grid-column: span 3; } .cells--five > :nth-child(n+4) p { max-width: 52ch; } }
.triplet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
.triplet > div { padding: 18px 0 24px; border-top: 2px solid var(--ink); }
.triplet h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.006em; }
.triplet p { margin-top: 10px; color: var(--steel); max-width: 38ch; }
.triplet--even h3 { font-size: 1.5rem; }
.triplet--lines > div { padding: 22px 0 30px; }
.triplet--lines h3 { font-size: clamp(1.5rem, 0.9vw + 1rem, 1.75rem); letter-spacing: -0.01em; }   /* pass 16 (review): under the section heading, not level with it */
.triplet--lines p { font-size: var(--lead); max-width: 34ch; }
.triplet--lines ul { margin-top: 16px; display: grid; gap: 6px; color: var(--steel); font-size: var(--ui); max-width: 34ch; }
.triplet--lines li { padding-left: 14px; text-indent: -14px; }
.triplet--lines li::before { content: "·"; display: inline-block; width: 14px; text-indent: 0; color: var(--crimson); }
@media (min-width: 760px) { .triplet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.section .triplet + .note, .section .cells + .note { margin-top: clamp(28px, 3.5vw, 44px); }
.scope-note { margin-top: clamp(24px, 3vw, 36px); font-size: var(--ui); color: var(--steel); max-width: 66ch; }

/* the Manufacturers page: the square field beside the sourcing narrative. Pass 18: the opening photograph belongs to the directory —
   the titanium section begins at the photograph's top edge (its inset shoulders show the surface), the heading row follows at a
   measured distance; the title row above stays on paper like every other opening */
.dir { padding-top: 0; }
.dir__body { padding-top: clamp(44px, 5.5vw, 80px); }
.dir__grid { display: grid; gap: 32px clamp(32px, 4vw, 72px); align-items: start; }
.dir__field { max-width: 640px; }
.dir__points { display: grid; gap: 14px; }
.dir__points div { padding-top: 12px; border-top: 1px solid var(--hair); }
.dir__points dt { font-weight: 500; }
.dir__points dd { margin-top: 4px; color: var(--steel); font-size: var(--ui); max-width: 46ch; }
.dir__note { margin-top: 24px; font-size: var(--small); color: var(--steel); max-width: 48ch; }
@media (min-width: 1024px) {
  .dir__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dir__copy { position: sticky; top: calc(var(--bar-h) + 28px); }
}

/* image credits */
.credits > div { padding: 18px 0; border-top: 1px solid var(--hair); }
.credits > div:last-child { border-bottom: 1px solid var(--hair); }
.credits dt { font-weight: 500; }
.credits dd { margin-top: 6px; color: var(--steel); max-width: 66ch; }

/* definition rows */
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; padding: 20px 0; border-top: 1px solid var(--hair); }
.rows > div:last-child { border-bottom: 1px solid var(--hair); }
.rows dt { font-weight: 500; font-size: 1.125rem; }
.rows dd { color: var(--steel); max-width: 60ch; }
@media (min-width: 760px) { .rows > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* item-row motif */
.spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.spec__cell { padding: 18px 0 22px; border-top: 2px solid var(--ink); }
.spec__cell h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.006em; }
.spec__cell p { margin-top: 10px; color: var(--steel); max-width: 34ch; }
.spec__cell--alt { border-top-color: var(--hair-strong); }
.spec__cell--alt h3 { font-weight: 400; color: var(--steel); font-size: 1.125rem; line-height: 1.4; }
@media (min-width: 760px) { .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } .spec__cell--alt { grid-column: 1 / -1; border-top: 1px solid var(--hair); padding-top: 16px; } }
.note { padding: 16px 20px; border-left: 3px solid var(--crimson); background: var(--paper); color: var(--ink); max-width: 66ch; }
.section--white .note { background: var(--titanium); }

/* numbered process (a real sequence: the four steps of an order) */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; counter-reset: step; }
.steps li { padding: 18px 0 24px; border-top: 1px solid var(--hair-strong); display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 8px 12px; }
.steps__n { font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: var(--crimson); }
.steps h3 { align-self: end; }
.steps p { grid-column: 2; color: var(--steel); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; } .steps h3 { align-self: start; min-height: 2.6em; } .steps p { grid-column: 1; } }

/* ---------- manufacturers: one square field of twelve genuine marks (partial logos.html) ----------
   3 × 4 cells of 4 : 3 make a square (2 × 6 on phones) on the section's own titanium (pass 15: no paper tiles), a hairline
   frame with 12 px corners and cell rules drawn as borders (so rows of any height stay ruled on touch layouts); the marks
   grey, in colour on hover (touch: always in colour, the field name visible); the tiles are decorative images with the
   maker's name as alt and take no focus. The Manufacturers page uses this field; the home page uses the ring (.ring below). */
.mfr { position: relative; }
.mfr__grid { --line: rgba(24, 42, 51, 0.16); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: clip; }
.mfr__cell { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 6% 8%; }
.mfr__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
.mfr__cell:nth-child(2n) { border-left: 1px solid var(--line); }
.mfr__logo { width: calc(100% * var(--s, 0.6)); height: auto; filter: grayscale(1) contrast(0.92); opacity: 0.66; transition: filter 320ms ease, opacity 320ms ease; }
.mfr__cap { position: absolute; left: 8%; right: 8%; bottom: 8%; font-size: 0.75rem; line-height: 1.3; color: var(--steel); text-align: center; opacity: 0; transform: translateY(2px); transition: opacity 240ms ease, transform 240ms ease; }
.mfr__cell:hover .mfr__logo { filter: none; opacity: 1; }
.mfr__cell:hover .mfr__cap { opacity: 1; transform: none; }
/* pass 17: on the Manufacturers page each mark is a button that discloses the field the maker stands for — on hover, on keyboard
   focus or on a click / tap (site.js toggles aria-expanded, one open at a time, Escape closes). The caption keeps its own row in
   the cell, so nothing moves, overlaps or hides the artwork; without JavaScript every caption is shown. The home ring (.ring)
   keeps its decorative tiles. */
.dir .mfr__cell { aspect-ratio: auto; grid-template-rows: minmax(64px, auto) auto; align-items: center; row-gap: 8px; padding: 11% 8% 9%; }
.mfr__btn { display: grid; place-items: center; width: 100%; min-height: 44px; padding: 4px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.mfr__btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.dir .mfr__cap { position: static; min-height: 2.6em; opacity: 0; transform: translateY(2px); }
.dir .mfr__cell:hover .mfr__cap, .dir .mfr__cell:focus-within .mfr__cap, .dir .mfr__cell.is-open .mfr__cap, html:not(.js) .dir .mfr__cap { opacity: 1; transform: none; }
.dir .mfr__cell:focus-within .mfr__logo, .dir .mfr__cell.is-open .mfr__logo { filter: none; opacity: 1; }
.mfr__hint { display: none; margin-top: 12px; font-size: var(--small); color: var(--steel); }
html.js .mfr__hint { display: block; }   /* pass 18: a cue for the mouse as well — nothing else says the fields exist */
@media (hover: none) {   /* touch: the marks in colour; the caption appears on a tap (JS) and a line under the field says so; without JS it is shown */
  .mfr__cell { aspect-ratio: auto; grid-template-rows: 56px auto; align-items: center; gap: 10px; padding: 18px 10px 14px; }
  .mfr__logo { filter: none; opacity: 0.92; max-height: 56px; width: auto; max-width: calc(100% * var(--s, 0.6) * 1.15); }
  .mfr__cap { position: static; opacity: 1; transform: none; }
  html.js .dir .mfr__cap { opacity: 0; transform: translateY(2px); }
  html.js .dir .mfr__cell.is-open .mfr__cap, html.js .dir .mfr__cell:focus-within .mfr__cap { opacity: 1; transform: none; }
  html.js .mfr__hint { display: block; }
}
@media (min-width: 640px) {
  .mfr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mfr__cell:nth-child(n+3) { border-top: 0; } .mfr__cell:nth-child(n+4) { border-top: 1px solid var(--line); }
  .mfr__cell:nth-child(2n) { border-left: 0; } .mfr__cell:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
}
.mfr__note { margin-top: 18px; font-size: var(--small); color: var(--steel); max-width: 72ch; }

/* home: the manufacturers section (pass 14) — copy at the left, the ring at the right: the twelve marks around the perimeter of a
   4 × 4 square (four across the top, two on each middle row, four across the bottom), the centre 2 × 2 one window that holds the
   OG mark, its line and the "Source from us" action. Nothing is painted: tiles, gaps and the window share the section surface; a
   hairline lattice (an outer frame, the quarter lines, the middle lines only in the outer quarters) makes the perimeter and the
   empty centre read, and fades as the tiles leave (--lattice, stack.js). Phones: a 3 × 4 grid with the mark below it. */
.mfrs { --travel: 100vh; }   /* the stack's travel (stack.js reads the resulting geometry) */
.mfrs__in { display: grid; gap: 36px; align-items: center; }
.mfrs__copy h2 { max-width: 14ch; }
.mfrs__copy .lead { margin-top: 16px; color: var(--steel); max-width: 42ch; }
.mfrs__note { margin-top: 20px; font-size: var(--small); color: var(--steel); max-width: 46ch; }
.mfrs__links { margin-top: 22px; }
.mfrs__field { position: relative; width: 100%; max-width: 640px; }
.ring { position: relative; }
.ring__grid { --lattice: 1; --line: rgba(24, 42, 51, calc(0.16 * var(--lattice))); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat; background-size: 100% 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%, 0 0; background-position: 0 25%, 0 50%, 0 75%, 33.333% 0, 66.667% 0, 0 0;
  box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
.ring__cell { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: center; row-gap: 8px; aspect-ratio: 1 / 1; padding: 8% 8% 7%; }   /* pass 18: two rows — the artwork centred in the upper one, the field name's two lines reserved below it (the +18 % marks of pass 17 met the absolutely positioned caption: Emerson's name began inside its artwork) */
.ring__logo { width: min(96%, calc(100% * var(--s, 0.6) * 1.18)); height: auto; max-height: 100%; object-fit: contain;   /* pass 17: the artwork 18 % larger in the same cells (--s per mark balances the marks; pass 15), never past 96 % of the content box */ filter: grayscale(1) contrast(0.92); opacity: 0.68; transition: filter 320ms ease, opacity 320ms ease; }
.ring__cap { width: 100%; min-height: 2.6em; font-size: 0.75rem; line-height: 1.3; color: var(--steel); text-align: center; text-wrap: balance; opacity: 0; transform: translateY(2px); transition: opacity 240ms ease, transform 240ms ease; }   /* in its own row: it can never rise into the artwork */
.ring__cell:hover .ring__logo { filter: none; opacity: 1; }
.ring__cell:hover .ring__cap { opacity: 1; transform: none; }
@media (hover: none) { .ring__cell { grid-template-rows: minmax(0, 1fr); padding: 8%; } .ring__logo { filter: none; opacity: 0.92; } .ring__cap { display: none; } }   /* touch: colour always on, no caption row; the field names live on the Manufacturers page */
@media (min-width: 1024px) and (max-width: 1179px) { .ring__cap { font-size: 0.6875rem; min-height: 3.9em; } }   /* 131–150 px cells: three lines reserved, so every row's marks sit on one line */
.ring__mark { display: grid; justify-items: center; align-content: center; gap: 20px; padding: 28px 8px 4px; text-align: center; }   /* pass 17: the mark and its action only (the caption is gone), 20–24 px apart */
.ring__mark img { width: min(70%, 260px); height: auto; }
@media (min-width: 640px) {   /* the perimeter: explicit cells, the centre window holds the mark */
  .ring__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); aspect-ratio: 1 / 1;
    background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)),
      linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%, 25% 1px, 25% 1px, 1px 25%, 1px 25%;
    background-position: 0 25%, 0 75%, 25% 0, 75% 0, 0 50%, 100% 50%, 50% 0, 50% 100%; }
  .ring__cell:nth-child(1) { grid-area: 1 / 1; } .ring__cell:nth-child(2) { grid-area: 1 / 2; } .ring__cell:nth-child(3) { grid-area: 1 / 3; } .ring__cell:nth-child(4) { grid-area: 1 / 4; }
  .ring__cell:nth-child(5) { grid-area: 2 / 1; } .ring__cell:nth-child(6) { grid-area: 2 / 4; } .ring__cell:nth-child(7) { grid-area: 3 / 1; } .ring__cell:nth-child(8) { grid-area: 3 / 4; }
  .ring__cell:nth-child(9) { grid-area: 4 / 1; } .ring__cell:nth-child(10) { grid-area: 4 / 2; } .ring__cell:nth-child(11) { grid-area: 4 / 3; } .ring__cell:nth-child(12) { grid-area: 4 / 4; }
  .ring__mark { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; padding: 3%; gap: 24px; }
  .ring__mark img { width: min(86%, 340px); }   /* pass 15: the mark fills the window (≈ 260 px in a 686 px field); the line and the action keep their room below it */
}
@media (min-width: 1024px) {
  .mfrs__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); }
  .mfrs__field { margin-left: auto; }
}
@media (min-width: 1024px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  html.js:not(.no-motion) .mfrs.is-stack { padding: 0; }   /* its height = the stage + --travel, set by stack.js from the stage's own height (pass 17) */
  html.js:not(.no-motion) .mfrs.is-stack .mfrs__stage { position: sticky; top: var(--bar-h); height: auto; min-height: 480px; padding: 24px 0; display: grid; align-items: center; overflow: clip; }   /* pass 17: as tall as the ring plus 24 px above and below, not the viewport — the next heading follows the completed reveal sooner; the surface below it is the section's own */
  html.js:not(.no-motion) .mfrs.is-stack .mfrs__field { width: min(100%, calc(100svh - var(--bar-h) - 96px)); max-width: 760px; }
  html.js:not(.no-motion) .mfrs.is-stack .ring__grid { --lattice: calc(1 - var(--lat, 0)); }   /* pass 17: the lattice fades from the first tile's movement and is gone 18 % of the travel later, before the last tile has left; stack.js restores it on the way back (a pure function of the position) */
  html.js:not(.no-motion) .mfrs.is-stack .ring__cell { will-change: transform, opacity; }
  html.js:not(.no-motion) .mfrs.is-stack .ring__mark { z-index: 2; opacity: 0; visibility: hidden; transform-origin: 50% 50%; }   /* shown by stack.js once the tiles have dissolved; hidden = no tab stop, no pointer target */
  html.js:not(.no-motion) .mfrs.is-stack .ring__mark.is-shown { visibility: visible; }
}
.mfrs + .section--tight { padding-top: clamp(28px, 3.5vw, 48px); }   /* pass 17: "How sourcing works" follows the ring closely (the stage keeps 24 px of its own) */

/* facts (about) */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.facts + .rows { margin-top: 36px; }
.about-contact { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hair-strong); }
.about-contact p { max-width: 56ch; }
.section--facts { padding-block: clamp(48px, 6vw, 80px); }   /* pass 17: the company facts without the general 128 px above and below */
.co-photo { margin: clamp(40px, 5vw, 64px) 0 0; }   /* pass 17: the Ras Laffan photograph belongs to the company section — in the body column under the markets, with its caption */
.co-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 0; background: var(--paper); }
.co-photo figcaption { margin-top: 12px; font-size: var(--small); line-height: 1.5; color: var(--steel); max-width: 64ch; }
a[href^="mailto:"] { white-space: nowrap; }   /* pass 17: an address never breaks at its hyphen ("ogtrading-" / "qa.com") */
.facts div { padding: 18px 0; border-top: 1px solid var(--hair); }
.facts dt { font-size: var(--small); color: var(--steel); }
.facts dd { margin-top: 4px; font-size: 1.125rem; font-weight: 500; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }

/* ---------- closing request band + footer: light, compact, dark type ---------- */
.band { background: var(--titanium); color: var(--ink); padding-block: clamp(32px, 4vw, 48px); border-top: 1px solid var(--hair); }   /* pass 17: 48 px, not 56 */
.band__in { display: grid; gap: 24px; }
.band h2 { max-width: 20ch; }
.band p { margin-top: 12px; color: var(--steel); max-width: 56ch; }
.band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
@media (min-width: 900px) { .band__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } .band__actions { justify-content: flex-end; } }
.footer { background: var(--paper); color: var(--steel); font-size: var(--ui); line-height: 1.5; border-top: 1px solid var(--hair); }   /* pass 15: a third shorter — the width does the work (three columns, the links in two) */
.footer__grid { display: grid; gap: 18px 40px; padding-block: clamp(22px, 2.5vw, 30px) clamp(18px, 2vw, 24px); }   /* pass 17: 30 / 24 px instead of 36 / 30, the lines inside each column 4 px apart */
.footer__name { color: var(--ink); font-weight: 500; font-size: 1.0625rem; margin-bottom: 4px; }
.footer__co p { margin-top: 4px; }
.footer__h { color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.footer address, .footer p { max-width: 52ch; }
.footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 2px 28px; }   /* pass 17: by column — the four section pages first, then About, the request and the two utilities (4 | 4 keeps the footer at the company column's height; 5 | 3 would add 15 px) */
.footer__contact p + p { margin-top: 4px; max-width: 34ch; }
.footer a { color: var(--steel); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--crimson); text-underline-offset: 3px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px; padding-block: 8px 12px; border-top: 1px solid var(--hair); font-size: var(--small); }
.footer__base p { max-width: none; }
/* the site-wide motion setting: a real switch (role="switch", site.js), kept with the system preference when that asks for reduced motion */
.footer__motion { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--small); font-weight: 500; color: var(--steel); }
.footer__motion:hover { color: var(--ink); }
.footer__motion .switch { position: relative; width: 30px; height: 16px; border-radius: 8px; background: var(--hair-strong); transition: background-color 160ms ease; }
.footer__motion .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform 160ms ease; }
.footer__motion[aria-checked="true"] .switch { background: var(--crimson); }
.footer__motion[aria-checked="true"] .switch::after { transform: translateX(14px); }
.footer__motion[aria-disabled="true"] { cursor: default; }
@media (min-width: 640px) and (max-width: 899px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__co { grid-column: 1 / -1; } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); } }
@media (min-width: 900px) and (max-width: 1199px) { .footer__links { grid-template-columns: minmax(0, max-content); grid-auto-flow: row; grid-template-rows: none; } }   /* the nav column is too narrow for two columns here: one column, no wrapped labels */

/* ---------- forms ---------- */
.rfq-layout { display: grid; gap: 48px; }
/* pass 16: the request page's top is compact — the buyer reaches the first field within the first screen (intro and section padding
   reduced only here, through :has(); browsers without :has() keep the shared spacing) */
.intro:has(+ .section .rfq-layout) { padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.section:has(> .rfq-layout) { padding-block: clamp(40px, 5vw, 72px); }
.rfq .form-status { padding: 12px 16px; margin-bottom: 16px; }
@media (min-width: 1100px) { .rfq-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; } .rfq__aside { position: sticky; top: calc(var(--bar-h) + 28px); } }
.rfq { background: var(--white); padding: clamp(20px, 3vw, 40px); border: 1px solid var(--hair); }
.rfq__title { font-size: 1.5rem; margin-bottom: 16px; }
.group { padding: 28px 0; border-top: 1px solid var(--hair); }
.group:first-of-type { border-top: 0; padding-top: 0; }
.group > legend { font-size: var(--h3); font-weight: 500; padding-bottom: 16px; float: left; width: 100%; }
.group > legend + * { clear: both; }
.grid2 { display: grid; gap: 18px 24px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid2 .span2 { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; align-content: start; }   /* pass 16: a field beside a hinted neighbour no longer stretches its input */
.field label, .field .label { font-weight: 500; font-size: var(--ui); }
.field .opt { color: var(--steel); font-weight: 400; }
.hint { font-size: var(--small); color: var(--steel); max-width: 60ch; }
.err { font-size: var(--small); color: var(--error); display: none; }
.field.is-invalid .err, .items__row.is-invalid .err, .is-invalid > .err { display: block; }
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--hair-strong); border-radius: 2px; background: var(--white); color: var(--ink);
}
textarea { min-height: 140px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--crimson); outline-offset: 1px; border-color: var(--crimson); }
.field.is-invalid input, .field.is-invalid select, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }   /* an item row outlines only the fields that lack a value (aria-invalid), never the whole list */
.choices { display: grid; gap: 10px; }
.choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--text); }
.choice input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--crimson); }
.choice small { display: block; color: var(--steel); font-size: var(--small); }
/* item rows: the Remove action gets an intrinsic (auto) column and the inputs may shrink (minmax(0, …)); the row layout follows
   the form's own width (container query; a media fallback for browsers without it), not the viewport */
.items-wrap { container-type: inline-size; }
.items { display: grid; gap: 14px; }
.items__head { display: none; }
.items__row { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--hair); background: var(--paper); }
.items__row .field { min-width: 0; }
.items__row .field label { font-size: var(--small); }
.items__row .err { grid-column: 1 / -1; }
.items__remove { justify-self: start; white-space: nowrap; }
.items__head, .items__row { --items-cols: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2.4fr) minmax(5.5rem, auto); }   /* the same last track in both, so the labels sit over their fields */
@container (min-width: 640px) {
  .items__head { display: grid; grid-template-columns: var(--items-cols); gap: 10px; font-size: var(--small); color: var(--steel); padding: 0 14px; }
  .items__row { grid-template-columns: var(--items-cols); align-items: end; }
  .items__row .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .items__remove { justify-self: end; min-height: 46px; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .items__head { display: grid; grid-template-columns: var(--items-cols); gap: 10px; font-size: var(--small); color: var(--steel); padding: 0 14px; }
    .items__row { grid-template-columns: var(--items-cols); align-items: end; }
    .items__row .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .items__remove { justify-self: end; min-height: 46px; }
  }
}
.items__add { margin-top: 14px; }
.items__alt { margin-top: 14px; font-size: var(--ui); color: var(--steel); max-width: none; }
.items__limit { margin-top: 10px; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 24px 0 8px; color: var(--steel); font-size: var(--small); }
.or::before, .or::after { content: ""; height: 1px; background: var(--hair); }
input[type="file"] { width: 100%; padding: 12px; border: 1px dashed var(--hair-strong); border-radius: 2px; background: var(--white); font-size: var(--ui); }
input[type="file"]::file-selector-button { font: inherit; margin-right: 12px; padding: 8px 12px; border: 1px solid var(--hair-strong); border-radius: 2px; background: var(--white); color: var(--ink); cursor: pointer; }
.file-list { display: grid; gap: 4px; font-size: var(--small); color: var(--steel); }
.form-status { display: none; padding: 16px 20px; border-left: 3px solid var(--steel); background: var(--paper); margin-bottom: 20px; max-width: none; }
.form-status.is-error { display: block; border-left-color: var(--error); }
.form-status.is-ok { display: block; border-left-color: var(--ok); }
.form-status.is-info { display: block; border-left-color: var(--crimson); }
.form-status p { max-width: none; }
.form-status:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }   /* pass 16: the status receives focus after a send */
.form-status ul { list-style: disc; padding-left: 20px; margin-top: 8px; }
.form-foot { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--hair); }
.rfq__aside > * + * { margin-top: 24px; }
.rfq__aside h2 { font-size: 1.375rem; }
.rfq__aside .small { color: var(--steel); }
.rfq__aside .rows li { padding: 10px 0; border-top: 1px solid var(--hair); }
.rfq__aside .rows li:last-child { border-bottom: 1px solid var(--hair); }
.legal { display: grid; gap: 4px; font-size: var(--ui); color: var(--steel); }
.legal b { font-weight: 500; color: var(--ink); }

/* prose (privacy, text pages) */
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { list-style: disc; padding-left: 20px; max-width: 66ch; }
.prose li + li { margin-top: 6px; }
.draft { display: inline-block; padding: 4px 10px; border: 1px solid var(--hair-strong); border-radius: 2px; font-size: var(--small); color: var(--steel); }

/* 404 */
.lost { min-height: 60vh; display: grid; align-content: center; padding-block: var(--sect); }
.lost p { margin-top: 20px; }
.lost__list { margin-top: 32px; max-width: 40rem; }
.lost__list li { padding: 12px 0; border-top: 1px solid var(--hair); }
.lost__list li:last-child { border-bottom: 1px solid var(--hair); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }

/* ---------- compact lists (home) ---------- */
.h-top { max-width: 16ch; margin-bottom: clamp(24px, 3vw, 40px); }   /* a heading above a full-width grid (Industries, the process): the home's third composition beside the document layout and the stages */
.more { margin-top: 28px; }
.cats { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--hair); }
.cats > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.cats dt { font-weight: 500; }
.cats dd { color: var(--steel); }
@media (min-width: 900px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
.sub { margin-top: 36px; font-size: 1.125rem; }
.sep { display: inline-block; width: 1px; height: 0.9em; background: var(--hair-strong); margin: 0 12px; vertical-align: -0.1em; }
.steps--compact li { padding: 14px 0 18px; }
.steps--compact p { font-size: var(--ui); }

/* ---------- scenes: one sticky stage, one frame sequence, two text states (static layout by default) ---------- */
.scene { position: relative; background: var(--ink); color: var(--paper); --travel: 160vh; }
.scene__stage { position: relative; display: flex; flex-direction: column; }
.scene__media { position: relative; aspect-ratio: 16 / 9; overflow: clip; background: var(--ink); }
.scene__poster, .scene__poster img, .scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__poster img { object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
.scene__canvas { display: none; }
.scene__shade, .scene__blend { display: none; }
.scene__caption { padding: 10px var(--gutter) 0; font-size: var(--small); color: var(--steel); line-height: 1.5; }
.scene--it { background: var(--titanium); color: var(--ink); }   /* the IT chapter sits on one titanium surface: What we source, the studio, Industries */
.scene--it .scene__media { background: var(--titanium); }
.scene--it .scene__lead, .scene--it .scene__note { color: var(--steel); }
.scene__who { margin-top: 14px; max-width: 44ch; }
.scene__copy { position: relative; display: flex; flex-direction: column; padding: 24px var(--gutter) 10px; }
.scene__texts { display: grid; gap: 40px; }
/* static layouts (pass 14): one text panel at a time, chosen with the chapter tabs below it (site.js); without JavaScript both panels
   stand in flow and the tabs are not shown; with motion the controller swaps the panels and the tabs are gone (below) */
html.js .scene__text:not(.is-on) { display: none; }
.scene__tabs { order: 2; display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 30px; padding-top: 6px; border-top: 1px solid var(--hair-dark); }
.scene__tab { position: relative; padding: 12px 0 10px; font-size: var(--ui); font-weight: 500; color: var(--haze); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.scene__tab:hover { color: var(--paper); }
.scene__tab[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--crimson); }
.scene--it .scene__tabs { border-top-color: var(--hair); }
.scene--it .scene__tab { color: var(--steel); }
.scene--it .scene__tab:hover, .scene--it .scene__tab[aria-selected="true"] { color: var(--ink); }
html:not(.js) .scene__tabs { display: none; }
@media (min-width: 900px) {   /* the poster and the panel side by side: one composed section, the text column beside the image */
  .scene__stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto; column-gap: clamp(32px, 4vw, 64px); align-items: center; padding: clamp(36px, 4.5vw, 64px) var(--gutter); }
  .scene__media { grid-column: 1; grid-row: 1; }
  .scene__caption { grid-column: 1; grid-row: 2; padding: 10px 0 0; align-self: start; }
  .scene__copy { grid-column: 2; grid-row: 1 / span 2; padding: 0; }
  .scene__stage > .scene__meta { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 36px; padding: 14px 0 0; }   /* pass 16 (review): specific enough to beat the base grid rule below */
  .scene__stage > .scene__meta li { padding-right: 18px; }
  .scene__stage > .scene__meta li + li { padding-left: 18px; border-left: 1px solid var(--hair-dark); }
}
.scene__text h1, .scene__text h2 { font-size: var(--h-scene); font-weight: 500; letter-spacing: -0.012em; line-height: 1.1; max-width: 16ch; text-wrap: balance; }
.scene--platform .scene__text h1 { font-size: var(--h1); }
.scene__lead { margin-top: 18px; font-size: var(--lead); line-height: 1.5; color: var(--haze); max-width: 50ch; }
.scene__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px; }
.scene__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; padding: 14px var(--gutter) 22px; font-size: var(--small); color: var(--haze); border-top: 1px solid var(--hair-dark); margin-top: 8px; }
.scene__cue { display: none; }
.spec-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin-top: 20px; max-width: 40rem; }
.spec-mini div { padding-top: 10px; border-top: 1px solid rgba(244, 246, 245, 0.55); }
.spec-mini dt { font-weight: 500; font-size: 1.0625rem; }
.spec-mini dd { color: var(--haze); font-size: var(--small); margin-top: 2px; }
.scene__note { margin-top: 16px; color: var(--haze); font-size: var(--ui); max-width: 46ch; }
/* the bridge between the two industrial scenes (pass 18): a composed spread inside the content grid. Row 1 — "Offshore" at the
   left under the platform's water, its paragraph beside it; row 2 — the connecting message, the largest type in the section; row 3 —
   the onshore paragraph at the left, "Onshore" at the right above the pumpjack's sky: a restrained diagonal of labels with the
   message as the hinge, nothing pushed to the screen edges. The surface is the dusk-sky tone of the pumpjack pass's first frame;
   28 px at the top carry the water's measured third-tones (#4F5C67 / #4A5359 / #4F5B66, the last frame's bottom rows) into it and
   24 px at the bottom hand over to the first frame's top thirds (#455268 / #485367 / #4A566A) — short blends, no strip. Phones: one
   column in reading order, label before paragraph. */
.bridge { position: relative; isolation: isolate; color: var(--paper); padding-block: clamp(44px, 4.6vw, 64px); background: var(--tone-sky); }
.bridge::before, .bridge::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.bridge::before { top: 0; height: 28px; background: linear-gradient(to bottom, rgba(72, 83, 104, 0) 0%, var(--tone-sky) 100%), linear-gradient(to right, #4F5C67 0%, #4A5359 50%, #4F5B66 100%); }
.bridge::after { bottom: 0; height: 24px; background: linear-gradient(to top, rgba(72, 83, 104, 0) 0%, var(--tone-sky) 100%), linear-gradient(to right, #455268 0%, #485367 50%, #4A566A 100%); }
.bridge__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.bridge__env { margin: 0; max-width: none; font-weight: 500; font-size: clamp(1.5rem, 1vw + 1.05rem, 1.875rem); line-height: 1.1; letter-spacing: -0.012em; color: var(--paper); }
.bridge__text { margin: 0; font-size: var(--text); line-height: 1.6; color: #CDD7DC; max-width: 47ch; text-wrap: pretty; }
.bridge__say { margin: 22px 0; }
.bridge__say h2 { font-size: clamp(1.75rem, 1.5vw + 0.9rem, 2.375rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.014em; color: var(--paper); max-width: 18ch; }
.bridge__say p { margin-top: 14px; font-size: var(--lead); line-height: 1.5; color: #CDD7DC; max-width: 62ch; text-wrap: pretty; }
@media (min-width: 900px) {
  .bridge__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(32px, 3.2vw, 46px); align-items: start; }
  .bridge__env--off { grid-column: 1 / span 4; grid-row: 1; }
  .bridge__text--off { grid-column: 6 / span 7; grid-row: 1; }
  .bridge__say { grid-column: 1 / span 10; grid-row: 2; margin: 0; }
  .bridge__text--on { grid-column: 1 / span 7; grid-row: 3; }
  .bridge__env--on { grid-column: 9 / span 4; grid-row: 3; text-align: right; }
}
@media (max-width: 640px) {
  .scene--platform .scene__media { aspect-ratio: auto; height: clamp(240px, 42svh, 420px); }
  .scene--platform .scene__poster img { object-position: 50% 38%; }
  .scene--onshore .scene__media { aspect-ratio: 4 / 3; }
  .scene__text h1, .scene__text h2, .scene--platform .scene__text h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); max-width: none; }
  .scene__lead { font-size: 1rem; }
  .scene__actions .btn { width: 100%; }
  .scene__meta { grid-template-columns: minmax(0, 1fr); }   /* pass 16: three facts in one column on phones, not three on a two-column grid */
  .spec-mini { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spec-mini div { padding: 10px 0; }
}
@media (min-width: 641px) and (max-width: 1023px) and (orientation: portrait) {
  .scene__media { aspect-ratio: 16 / 10; }
}
/* desktop with motion: sticky stage, texts swap in place (opacity + small rise) */
@media (min-width: 1024px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  html.js:not(.no-motion) .scene:not(.is-static) { height: calc(100svh - var(--bar-h) + var(--travel)); }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__stage { position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); min-height: 480px; display: block; padding: 0; overflow: clip; isolation: isolate; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  html.js:not(.no-motion) .scene:not(.is-static).is-live .scene__canvas { display: block; }
  html.js:not(.no-motion) .scene:not(.is-static).is-live .scene__poster { visibility: hidden; }
  /* ONE legibility layer per industrial scene: a corner shade that rises from the text's own corner and fades on all sides,
     so there is no rectangular edge anywhere; the sky, the structure and the water keep their own light */
  html.js:not(.no-motion) .scene:not(.is-static) .scene__shade { display: block; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 78% 86% at 0% 100%, rgba(24, 42, 51, 0.66) 0%, rgba(24, 42, 51, 0.46) 32%, rgba(24, 42, 51, 0.18) 60%, rgba(24, 42, 51, 0) 82%); }
  /* handoff: no transition layer — the stage rises with its first frame and text, pins, plays, and leaves with its last frame
     and text while the next section follows in the flow; #anchors land exactly where the stage pins (html scroll-padding − 16 px) */
  html.js:not(.no-motion) .scene:not(.is-static)[id] { scroll-margin-top: -16px; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__copy { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(76px, 10vh, 120px); max-width: 44rem; padding: 0; }
  html.js:not(.no-motion) .scene--onshore:not(.is-static) .scene__copy { bottom: clamp(44px, 7vh, 88px); }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__texts { display: grid; gap: 0; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__tabs { display: none; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__text { display: block; grid-area: 1 / 1; opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; }   /* the outgoing screen is gone (220 ms) before the incoming one starts (240 ms): no ghost overlap; hidden screen: no focus stops, no pointer */
  html.js:not(.no-motion) .scene:not(.is-static) .scene__text.is-on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 280ms ease 200ms, transform 280ms var(--ease) 200ms, visibility 0s linear 200ms; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 0; padding: 14px var(--gutter); background: none; border-top: 0; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__meta li { padding-right: 18px; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__meta li + li { padding-left: 18px; border-left: 1px solid var(--hair-dark); }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__cue { display: block; position: absolute; z-index: 2; right: var(--gutter); bottom: 60px; font-size: var(--small); color: var(--haze); }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__cue::after { content: ""; display: block; width: 1px; height: 28px; margin: 8px auto 0; background: var(--haze); }
  html.js:not(.no-motion) .scene:not(.is-static).is-moved .scene__cue { opacity: 0; transition: opacity 400ms ease; }
  /* one orchestrated reveal of the first text on load (no poster zoom: the canvas must take over without a jump) */
  html.js:not(.no-motion) .scene--platform:not(.is-static):not(.is-moved) .scene__text[data-state="0"] h1 { animation: rise 900ms var(--ease) both; }
  html.js:not(.no-motion) .scene--platform:not(.is-static):not(.is-moved) .scene__text[data-state="0"] .scene__lead,
  html.js:not(.no-motion) .scene--platform:not(.is-static):not(.is-moved) .scene__text[data-state="0"] .scene__actions,
  html.js:not(.no-motion) .scene--platform:not(.is-static):not(.is-moved) .scene__meta { animation: fade 700ms ease-out both; animation-delay: 320ms; }
  /* joins: the section that follows a frame opens with a short band in the frame's own edge tones (the bridge carries its own,
     above). While a stage is pinned the band is below the viewport; it appears exactly as the stage is released, so the
     image never carries an overlay */
  html.js:not(.no-motion) .scene--onshore:not(.is-static) + #supply::before, html.js:not(.no-motion) .scene--it:not(.is-static) + #industries::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
  /* pumpjack → What we source (pass 13): a 44 px touch of the real ground — sand at the sides, the slab in the middle — that
     turns into the titanium surface within the band; the foundation itself is never covered */
  html.js:not(.no-motion) .scene--onshore:not(.is-static) + #supply::before { height: 32px;   /* pass 16: a shorter touch of the ground, titanium by 60 % of its height */
    background: linear-gradient(to bottom, rgba(218, 222, 223, 0) 0%, rgba(218, 222, 223, 0.55) 30%, rgba(218, 222, 223, 0.92) 60%, var(--titanium) 100%), linear-gradient(to right, var(--tone-ground-l) 0%, var(--tone-ground-c) 50%, var(--tone-ground-r) 100%); }
  /* IT → Industries (pass 14): Industries is paper like the company section; the band starts in the studio floor's own tone and reaches paper within 70 px */
  html.js:not(.no-motion) .scene--it:not(.is-static) + #industries::before { height: calc(var(--band) * 0.8); background: var(--paper); background: linear-gradient(to bottom, var(--tone-floor) 0%, color-mix(in srgb, var(--tone-floor) 55%, var(--paper)) 40%, color-mix(in srgb, var(--tone-floor) 18%, var(--paper)) 75%, var(--paper) 100%); }
  /* IT scene, side layout (stage wider than 1.6 : 1): the frame is fitted to the stage height and anchored at the right, the left
     cut capped at 10 % of the frame (scenes.js), a titanium pad + blend when the viewport is wider than the frame; the text column
     stands right of the cabinet on the studio (--edge-x from scenes.js), centred by flex (no transform), dark type, no backdrop */
  html.js:not(.no-motion) .scene--it:not(.is-static) { --copy-h: 272px; }
  html.js:not(.no-motion) .scene--it:not(.is-static) .scene__stage, html.js:not(.no-motion) .scene--it:not(.is-static) .scene__media { background: var(--titanium); }
  html.js:not(.no-motion) .scene--it:not(.is-static) .scene__poster img { left: var(--img-x, 0px); width: var(--img-w, 100%); right: auto; object-position: 100% 50%; }
  html.js:not(.no-motion) .scene--it:not(.is-static) .scene__blend { display: block; position: absolute; inset: 0 0 0 var(--edge-x, 62%); pointer-events: none; background: linear-gradient(90deg, rgba(218, 222, 223, 0) 0%, rgba(218, 222, 223, 0.5) 26%, rgba(218, 222, 223, 0.86) 56%, var(--titanium) 100%); }
  html.js:not(.no-motion) .scene--it:not(.is-static) .scene__shade { display: none; }
  html.js:not(.no-motion) .scene--it:not(.is-static) .scene__copy { left: calc(var(--edge-x, 62%) + 40px); right: var(--gutter); top: 0; bottom: 0; max-width: 36rem; display: flex; flex-direction: column; justify-content: center; transform: none; }
  html.js:not(.no-motion) .scene--it:not(.is-static) .scene__text h2 { font-size: clamp(1.875rem, 2.2vw + 0.5rem, 3rem); max-width: 14ch; }
  html.js:not(.no-motion) .scene--it:not(.is-static) .scene__caption { position: absolute; z-index: 2; right: var(--gutter); bottom: 22px; margin: 0; padding: 0; }
  /* IT scene, stacked layout (stage narrower than 1.6 : 1, e.g. 1024 × 900): the frame covers a media band at the top of the
     stage, the text stands below it in two columns on titanium, the caption sits in the band's corner */
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__media { bottom: var(--copy-h); height: auto; }
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__poster img { left: 0; width: 100%; object-position: 50% 50%; }
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__blend { display: none; }
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__copy { left: var(--gutter); right: var(--gutter); top: auto; bottom: 0; height: var(--copy-h); max-width: none; }
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__text { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; }
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__text h2 { grid-column: 1; grid-row: 1 / span 3; max-width: 12ch; }
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__lead, html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__who, html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__actions { grid-column: 2; max-width: 44rem; }
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__lead { margin-top: 0; }
  html.js:not(.no-motion) .scene--it:not(.is-static).is-stacked .scene__caption { bottom: calc(var(--copy-h) + 14px); }
}
/* low viewports (1024 × 600, 1280 × 600): compact type and offsets so the stage fits without the meta row leaving the screen */
@media (min-width: 1024px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) and (min-height: 560px) and (max-height: 720px) {
  html.js:not(.no-motion) .scene:not(.is-static) .scene__text h1, html.js:not(.no-motion) .scene:not(.is-static) .scene__text h2 { font-size: clamp(2.25rem, 2.6vw + 0.6rem, 3.25rem); }   /* pass 16 (review): ≥ 36 px on short laptops */
  html.js:not(.no-motion) .scene--it:not(.is-static) .scene__text h2 { font-size: clamp(1.875rem, 2vw + 0.5rem, 2.75rem); }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__lead { font-size: 1rem; margin-top: 12px; max-width: 46ch; }
  html.js:not(.no-motion) .scene:not(.is-static):not(.scene--it) .scene__copy { bottom: 58px; }   /* the IT column is flex-centred and keeps top/bottom 0 */
  html.js:not(.no-motion) .scene--onshore:not(.is-static) .scene__copy { bottom: 46px; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__actions { margin-top: 16px; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__meta { padding: 10px var(--gutter); }
  html.js:not(.no-motion) .scene:not(.is-static) .spec-mini { margin-top: 12px; }
  html.js:not(.no-motion) .scene:not(.is-static) .scene__note, html.js:not(.no-motion) .scene:not(.is-static) .scene__who { margin-top: 10px; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- home: industries (asymmetric pairs, one sentence each) ---------- */
.ind { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; border-top: 1px solid var(--hair-strong); }
.ind > div { padding: 22px 0 30px; border-bottom: 1px solid var(--hair); }
.ind h3 { font-size: clamp(1.375rem, 0.7vw + 1rem, 1.625rem); font-weight: 500; letter-spacing: -0.006em; line-height: 1.2; }
.ind p { margin-top: 14px; color: var(--steel); max-width: 46ch; }
@media (min-width: 760px) {
  .ind { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ind > div:nth-child(odd) { grid-column: span 7; }   /* pass 16 (review): the same spans on both rows */
  .ind > div:nth-child(even) { grid-column: span 5; }
  .ind > div:nth-child(odd) p { max-width: 52ch; }
}

/* ---------- home: procurement FAQ (native disclosures) ---------- */
.faq { border-top: 1px solid var(--hair-strong); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; column-gap: 24px; padding: 18px 0; font-size: var(--h3); font-weight: 500; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--crimson-deep); }
.faq summary:focus-visible { outline-offset: 2px; }
.faq summary .faq__mark { position: relative; width: 20px; height: 20px; }
.faq summary .faq__mark::before, .faq summary .faq__mark::after { content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 2px; background: currentColor; transition: transform 200ms ease; }
.faq summary .faq__mark::after { transform: rotate(90deg); }
.faq details[open] summary { color: var(--crimson-deep); }
.faq details[open] summary .faq__mark::after { transform: rotate(0deg); }
.faq__a { padding: 0 44px 22px 0; color: var(--steel); max-width: 60ch; }
.faq__a p + p { margin-top: 10px; }
.faq__foot { margin-top: 24px; color: var(--steel); }

/* ---------- home: the company — the HorizonX dotted globe as a two-stage story ----------
   Static layouts (phones, portrait tablets, low viewports, reduced motion, no WebGL, ?static=1): heading A, its lead and
   the sourcing list, the globe poster A, then poster B with heading B, its lead and the market list; facts follow in
   their own compact section. In motion (desktop landscape, ≥ 560 px high) the section is a sticky stage with the same
   travel mechanics as the scenes: the text column at the left, the globe field right of it with the whole disc visible,
   two text states swapped by plates.js; the "Doha, Qatar" tag is positioned by plates.js (--x/--y) and flips to the left
   near the right edge of the viewport; the sourcing list highlights the group the current view shows
   (data-view on the section); the site-wide "Reduce motion" switch in the footer (site.js) turns this into the static layout. */
.co { position: relative; overflow: clip; --travel: 220vh; }
.co__stage { display: block; }
.co__in { display: grid; gap: 36px clamp(40px, 5vw, 88px); align-items: start; }
.co__copy, .co__texts { display: contents; }           /* phones and narrow layouts: text A, the globe, text B in one column */
.co__text { max-width: 62ch; }
.co__text[data-state="0"] { order: 1; }
.co__field { order: 2; }
.co__text[data-state="1"] { order: 3; }
.co__globe { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; margin: -3% auto; }
@media (min-width: 900px) {
  .co__in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .co__copy { display: block; grid-column: 1; grid-row: 1; }
  .co__texts { display: grid; gap: 44px; }
  .co__text[data-state="1"] { padding-top: 40px; border-top: 1px solid var(--hair); }
  .co__field { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--bar-h) + 40px); }
  .co__globe { max-width: 560px; margin: 0 auto; }
}
.co__poster, .co__poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.co__poster img { object-fit: contain; }
.co__globe .co__poster--a { display: none; }   /* static layouts show one globe: poster B, the one the About page uses (motion turns A on, below) */
/* the legend (pass 16): the two route colours named once under the globe, so the picture reads without the text column */
.co__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 14px auto 0; max-width: 560px; font-size: var(--small); color: var(--steel); }
.co__legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.co__legend-in::before, .co__legend-out::before { content: ""; width: 22px; height: 2px; border-radius: 1px; background: var(--steel); }
.co__legend-out::before { background: var(--crimson); }
.co__legend-note { opacity: 1; }   /* pass 18 (review): at 0.8 the note sat on the 4.5 : 1 floor */
.co__legend-cap { flex: 1 0 100%; justify-content: center; color: var(--ink); font-weight: 500; }   /* pass 17: the legend opens with the company's role in one line */
.co__gl { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; }
.co__gl canvas { display: block; width: 100%; height: 100%; }
.co__globe[data-globe="ready"] .co__gl { opacity: 1; }
.co__globe[data-globe="ready"] .co__poster { opacity: 0; transition: opacity 400ms ease; }
.co__tag { position: absolute; left: var(--x, 50%); top: var(--y, 50%); display: block; width: 0; height: 0; pointer-events: none; font-size: var(--small); font-weight: 500; color: var(--ink); white-space: nowrap; visibility: hidden; }   /* shown by plates.js once the poster (which carries its own label) has faded: one label at a time */
.co__globe.is-settled .co__tag { visibility: visible; }
.co__tag svg { position: absolute; left: 4px; bottom: 4px; width: 22px; height: 22px; stroke: var(--crimson); stroke-width: 1.5; fill: none; }
.co__tag span { position: absolute; left: 24px; bottom: 22px; padding: 2px 6px; background: rgba(244, 246, 245, 0.9); line-height: 1.3; }
.co__tag.is-flip svg { left: auto; right: 4px; transform: scaleX(-1); }
.co__tag.is-flip span { left: auto; right: 24px; }
.co__tag[hidden] { display: none; }
.co__text h2 { max-width: 18ch; }
.co__text .lead { margin-top: 20px; color: var(--steel); max-width: 48ch; }
/* the sourcing list grouped by view: group name, then the countries; the group the globe is showing is set in ink */
.co__groups { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--hair-strong); display: grid; gap: 8px; font-size: var(--ui); max-width: 48ch; }
.co__groups div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); column-gap: 16px; color: var(--steel); transition: color 300ms ease; }
.co__groups dt { font-weight: 500; }
.co__groups dd { color: inherit; }
.co[data-view="atl"] .co__groups [data-group="na"], .co[data-view="atl"] .co__groups [data-group="eu"], .co[data-view="ap"] .co__groups [data-group="ap"] { color: var(--ink); }
.co__markets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 22px; padding: 18px 0; border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair); max-width: 48ch; }
.co__markets li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 12px; align-items: start; font-size: var(--ui); }
.co__markets b { font-weight: 500; }
.co__markets small { display: block; color: var(--steel); font-size: var(--small); margin-top: 2px; }
.co__dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--crimson); }
.co__home .co__dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--crimson); }
.co__more { margin-top: 12px; font-size: var(--small); color: var(--steel); max-width: 48ch; }
.co__links { margin-top: 22px; }
/* company facts: one compact strip right after the story, on the same paper (pass 15; the legal line and four facts) */
.co-facts { padding-block: clamp(40px, 5vw, 64px); }
.co + .co-facts { border-top: 0; }
.co-facts__in { display: grid; gap: 20px 40px; align-items: start; }
.co-facts__h { font-size: 1.125rem; font-weight: 500; }
.co-facts__lead { margin-top: 8px; color: var(--steel); font-size: var(--ui); max-width: 44ch; }
.co__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.co__facts div { margin: 0; padding-top: 10px; border-top: 1px solid var(--hair); }
.co__facts dt { font-size: var(--small); color: var(--steel); }
.co__facts dd { margin: 2px 0 0; font-size: var(--ui); font-weight: 500; }
@media (min-width: 760px) {
  .co__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .co-facts__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 72px); }
}
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }   /* pass 17: the request button is disabled in the markup until rfq.js takes over (no JavaScript: no useless post-back) */
.section--close { padding-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px); }   /* pass 17: a page's last section before the footer — heading, text and one action without the general 128 px under them */
.section--end { padding-bottom: clamp(48px, 6vw, 88px); }   /* pass 17: the last section before the request band keeps its top but not 128 px under its last line */
.lost { padding-bottom: clamp(48px, 6vw, 88px); }
.lost .wrap { width: 100%; }   /* pass 17: the grid shrank the auto-margin wrap to its content, so the 404 title was centred while every other page starts at the frame */
/* pass 17: text set inside the wide photographic frame starts where the normal frame's text starts (the About title above "The company",
   the Industries texts under and beside their bands): the inset is half the difference between the two frames, measured on the section */
.photo-sec, .split, .open--fill { container-type: inline-size; }
.photo-sec .twocol { padding-left: calc(var(--gutter) + (min(100cqi, var(--wide)) - min(100cqi, var(--max))) / 2); }
.split--text-first .split__text, .open--fill .open__copy { padding-left: calc((min(100cqi, var(--wide)) - min(100cqi, var(--max))) / 2); }
@media (min-width: 1024px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  html.js:not(.no-motion) .co:not(.is-static) { padding: 0; height: calc(100svh - var(--bar-h) + var(--travel)); --co-copy: min(34rem, 44vw); --co-globe: min(calc((100svh - var(--bar-h)) * 0.94), calc(100vw - 2 * var(--gutter) - var(--co-copy) - 24px), 1200px); }
  html.js:not(.no-motion) .co:not(.is-static)[id] { scroll-margin-top: -16px; }
  html.js:not(.no-motion) .co:not(.is-static) .co__in { display: contents; }   /* the stage positions the column and the field directly */
  html.js:not(.no-motion) .co:not(.is-static) .co__poster--a { display: block; }
  html.js:not(.no-motion) .co:not(.is-static) .co__poster--b { display: none; }
  html.js:not(.no-motion) .co:not(.is-static) .co__stage { position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); min-height: 480px; display: block; overflow: clip; isolation: isolate; }
  /* the globe field is the stage right of the text column; the square box is centred in it and sized by the stage height (or the
     field width when that is smaller), so the whole disc is visible and neither text nor a fade ever crosses it */
  html.js:not(.no-motion) .co:not(.is-static) .co__field { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + var(--co-copy) + 24px); right: var(--gutter); z-index: 0; }
  html.js:not(.no-motion) .co:not(.is-static) .co__globe { position: relative; width: var(--co-globe); max-width: none; margin: 0; flex: none; }
  html.js:not(.no-motion) .co:not(.is-static) .co__legend { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; max-width: none; }   /* two lines under the disc (pass 17) */
  html.js:not(.no-motion) .co:not(.is-static) .co__copy { display: block; position: absolute; z-index: 2; left: var(--gutter); top: 50%; transform: translateY(-50%); width: var(--co-copy); }
  html.js:not(.no-motion) .co:not(.is-static) .co__texts { display: grid; gap: 0; }
  html.js:not(.no-motion) .co:not(.is-static) .co__text { grid-area: 1 / 1; max-width: none; padding-top: 0; border-top: 0; opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; }
  html.js:not(.no-motion) .co:not(.is-static) .co__text.is-on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 280ms ease 200ms, transform 280ms var(--ease) 200ms, visibility 0s linear 200ms; }
  html.js:not(.no-motion) .co:not(.is-static) .co__text h2 { font-size: clamp(1.875rem, 2.2vw + 0.5rem, 3rem); font-weight: 500; letter-spacing: -0.012em; line-height: 1.1; max-width: 15ch; }
  html.js:not(.no-motion) .co:not(.is-static) .co__markets { max-width: 42ch; }
}
@media (min-width: 1024px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) and (min-height: 560px) and (max-height: 720px) {
  html.js:not(.no-motion) .co:not(.is-static) .co__text h2 { font-size: clamp(1.625rem, 1.8vw + 0.4rem, 2.5rem); }
  html.js:not(.no-motion) .co:not(.is-static) .co__text .lead { font-size: 1rem; margin-top: 12px; }
  html.js:not(.no-motion) .co:not(.is-static) .co__markets { gap: 6px 20px; margin-top: 14px; padding: 12px 0; }
  html.js:not(.no-motion) .co:not(.is-static) .co__groups { margin-top: 14px; gap: 4px; }
  html.js:not(.no-motion) .co:not(.is-static) .co__links { margin-top: 14px; }
}