/* 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;        /* the header, fields, the form card and the page--white pages (Image credits, Terms, Privacy) */
  --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 */
  --frame-x: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));   /* pass 32 (review board 2): the logo's left edge; % resolves against the box that uses it, so use it only on full-width stages */
  --scene-x: min(var(--frame-x), calc(var(--gutter) + 40px));   /* the film texts follow the logo edge up to 40 px past the gutter (aligned to 1440): further in, the headline would cross the platform (measured from 1536) */
  --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-offset, var(--bar-h)) + 16px); }   /* A11Y-04: --bar-offset is the measured header when enlarged text makes it taller (site.js) */
.scene__text, .scene h1 { overflow-wrap: anywhere; min-width: 0; }
body { overflow-wrap: break-word; }   /* pass 24: text at 200 % in a narrow column breaks a long word (an email address, a heading) instead of running out of it; nothing changes where the text fits */
@media (max-width: 639.98px) { body { overflow-wrap: anywhere; } }   /* pass 23: with the text at 200 % on a phone a long word (a heading's Manufacturers, the email address) breaks instead of widening the page */   /* pass 33b: every phone query ends at 639.98 px, so a fractional viewport (639.33 in Chrome emulation, 411.43-type widths on Android) is never between the phone and the 640 px rules */
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 { 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-offset, 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-color: var(--white); border-bottom: 1px solid var(--hair); }   /* pass 32 (owner, review board 1): solid white in every state, so nothing shows behind the logo while scrolling */
.bar__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 2.2vw, 32px); min-height: var(--bar-h); }
.bar__brand { display: block; padding: 4px 0; }
.bar__brand img { height: 52px; width: auto; }
.bar__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(16px, 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; align-items: center; 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; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100svh - 100%); overflow-y: auto; background: var(--white); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); box-shadow: 0 16px 28px rgba(24, 42, 51, 0.14); }   /* pass 24: over the page, not in its flow: opening or closing moves nothing, so it cannot read as a scroll */
  .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); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }   /* A11Y-09: the current page is marked by more than its colour, like the bar's underline */
  .sheet a:last-child { border-bottom: 0; }
  html:not(.js) .bar { position: relative; }   /* A11Y-15: without JavaScript the Menu button cannot open the sheet, so the bar shows its own links and scrolls away with the page */
  html:not(.js) .bar__menu { display: none; }
  html:not(.js) .bar__nav { display: flex; justify-content: flex-start; gap: 0 16px; }
}
@media (max-width: 640px) {
  :root { --bar-h: 60px; --band: 40px; }
  .bar__in { display: flex; flex-wrap: wrap; }
  .bar__brand { flex: 1 1 64px; max-width: 126px; min-width: 0; margin-right: auto; }
  .bar__brand img { height: 40px; object-fit: contain; object-position: 0 50%; }   /* the logo gives way first and keeps its proportions: below about 375 px there is not room for it at full size beside the two buttons; text at 200 % wraps the row instead of cutting it */
  .bar__cta { flex: none; min-height: 36px; padding: 0 12px; font-size: var(--small); }
  .bar__menu { flex: none; }
  html:not(.js) .bar__nav { order: 3; flex: 1 1 100%; padding-bottom: 6px; }   /* the button stays beside the logo, the links run below */
}
@media (max-width: 360px) { .bar__in { gap: 8px; } .bar__cta { padding: 0 8px; } }

/* ---------- 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); }
.page--white, .page--white .intro, .page--white .section { background: var(--white); }   /* pass 26 (owner): Image credits, Terms and Privacy on pure white; their bands stay as the hairlines between sections, the footer keeps paper */
.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-offset, 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); }
.intro__min, .intro .intro__min { margin-top: 12px; color: var(--ink); font-weight: 500; }   /* the minimum-order sentence on a line of its own (request intro; pass 26, COPY-12: Manufacturers, Industries, IT) */

/* ---------- 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 */

/* photographic openings (pass 32, owner: review board 3, option B). Industrial Supply, Industries, Manufacturers, IT Solutions.
   From 900 px the photograph runs edge to edge under the bar and the title, lead and actions stand on its lower left on an ink
   shade, at the logo's edge (.wrap); narrower, the photograph comes first and the words follow on ink. The title stays first in the
   DOM (grid placement only). Each photograph sets its own focus with --pos. */
.open--band { display: grid; padding: 0; border-bottom: 0; background: var(--ink); color: var(--paper); }
.open--band > .wrap--wide { grid-row: 1; width: 100%; max-width: none; padding: 0; }
.open--band > .open__row { grid-row: 2; width: 100%; padding-block: 28px 40px; }   /* width: auto margins would shrink a grid item to its content */
.open__row h1 { max-width: 16ch; color: var(--paper); }
.open--band .lead, .open--band .open__meta { margin-top: 16px; color: var(--haze); max-width: 54ch; }
.open--band .open__meta { font-size: var(--ui); }
.open--band .link { color: var(--paper); }
.open--band :focus-visible { outline-color: var(--paper); }
.open__band { position: relative; overflow: clip; background: var(--ink); }
.open__band img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (min-width: 640px) { .open__band img { aspect-ratio: 3 / 2; } }
@media (min-width: 900px) {
  .open--band > .wrap--wide, .open--band > .open__row { grid-area: 1 / 1; }
  .open--band > .open__row { z-index: 2; align-self: end; padding-block: 0 clamp(40px, 7vh, 72px); }
  .open--band .lead, .open--band .open__meta { color: var(--paper); max-width: 46ch; }   /* over the photograph: paper, as over the films (A11Y-01) */
  .open__band img { aspect-ratio: auto; height: clamp(480px, 76svh, 900px); }
  .open__band--refinery img { --pos: 50% 30%; }   /* Ruwais: the stack tops stay in the band */
  .open__band--sea img { --pos: 50% 45%; }   /* Marco Polo: the deck and the flare boom */
  .open__band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(24, 42, 51, 0.86) 0%, rgba(24, 42, 51, 0.7) calc(var(--frame-x) + 560px), rgba(24, 42, 51, 0) calc(var(--frame-x) + 980px)), linear-gradient(0deg, rgba(24, 42, 51, 0.5) 0%, rgba(24, 42, 51, 0) 44%); }   /* the shade follows the text column from the logo edge: paper text ≥ 4.5 : 1 on the brightest 5 % behind it (measured 1024–2560) */
}
/* 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); }
.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%; }
/* pass 32 (owner, review board 7): one treatment for every photograph from different cameras and sources (not the renders,
   films, globe or logos): slightly less saturation, slightly more contrast */
:is(.open__band, .pband, .split__photo, .co-photo, .ind__ph) img { filter: saturate(0.8) contrast(1.05); }
.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__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-offset, 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(--ink); }   /* pass 32 (review board 5): ink, like the other item texts (DES-10) */
@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; } .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; }
@media (hover: hover) and (pointer: fine) { .mfr__cell:hover .mfr__logo { filter: none; opacity: 1; } .mfr__cell:hover .mfr__cap { opacity: 1; transform: none; } }   /* COMPAT-F-02: no sticky hover after a tap */
/* 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.is-open .mfr__cap, html:not(.js) .dir .mfr__cap { opacity: 1; transform: none; }
.dir .mfr__cell.is-open .mfr__logo { filter: none; opacity: 1; }
/* COMPAT-F-02 (pass 25): the open state and keyboard focus decide, not any focus: a second tap closes the caption although the button keeps focus.
   Own rules, so a browser without :has() drops only these; hover only where a real pointer hovers, so a tap leaves no hover state above is-open */
.dir .mfr__cell:has(.mfr__btn:focus-visible) .mfr__cap { opacity: 1; transform: none; }
.dir .mfr__cell:has(.mfr__btn:focus-visible) .mfr__logo { filter: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .dir .mfr__cell:hover .mfr__cap { opacity: 1; transform: none; } }
.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 { opacity: 1; transform: none; }
  html.js .dir .mfr__cell:has(.mfr__btn:focus-visible) .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, with
   no lines between them (pass 22). 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(--ui); color: var(--steel); max-width: 46ch; }   /* COPY-08: the marks statement at the footer's size or larger */
.mfrs__links { margin-top: 22px; }
.mfrs__field { position: relative; width: 100%; max-width: 640px; }
.ring { position: relative; }
.ring__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.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; transition: opacity 200ms ease; }   /* in its own row: it can never rise into the artwork. Pass 27 (owner, replacing A11Y-11's names at rest): shown only while the pointer is on its own tile, in the row reserved for it, so nothing moves; opacity keeps it in the accessibility tree (the alt and the field are read once), and the Manufacturers page shows the same fields on keyboard focus and on a tap */
.ring__cell:hover .ring__logo { filter: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .ring__cell:hover .ring__cap { opacity: 1; } }   /* a real pointer only: a tap leaves no name behind (COMPAT-F-02) */
.mfrs.is-gathering .ring__cell .ring__cap { opacity: 0; transition: none; }   /* stack.js: from the first scroll of the gather none shows, not even under a pointer resting on a tile */
@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 { --mark-w: min(70%, 260px); 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: var(--mark-w); height: auto; }
.ring__cta { position: relative; left: calc(var(--mark-w) * 0.1653); }   /* pass 22: centred under the logo's wordmark. The text block spans x 167–471 of logo-480 and 333–943 of logo-960, its centre 16.56 / 16.51 % of the logo's width right of the image's centre; --mark-w resolves against the same grid area in both rules, and stack.js scales the whole mark, so the two stay aligned at every width and through the reveal */
@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; }
  .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 { --mark-w: min(86%, 340px); position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; padding: 3%; gap: 24px; }   /* 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: calc(var(--bar-h) + var(--stack-rest, 0px)); 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__in { width: 100%; }   /* COMPAT-F-01 (pass 25): the stage is a grid, and Firefox shrank its .wrap item to the content (1318.7 of 1360 px at 1440); the max-width and auto margins still centre it */
  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__cell { will-change: transform, opacity; }
  @media (hover: hover) {   /* pass 27 (owner): a tile that has started to move shows its mark at --c (stack.js, from the tile's own progress): 0 = the resting look above, 1 = the artwork's own colours at its own opacity; no transition, so nothing chases the per-frame value. Touch keeps its colour (no lead-in) */
    html.js:not(.no-motion) .mfrs.is-stack .ring__cell.is-moving .ring__logo { filter: grayscale(calc(1 - var(--c, 0))) contrast(calc(0.92 + 0.08 * var(--c, 0))); opacity: calc(0.68 + 0.32 * var(--c, 0)); transition: none; }
  }
  html.js:not(.no-motion) .mfrs.is-stack .ring__mark { z-index: 2; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }   /* shown by stack.js once the tiles have dissolved. A11Y-02 (pass 25): while hidden it stays in the tab order (no pointer target); focus inside shows it at once (stack.js holds it) */
  html.js:not(.no-motion) .mfrs.is-stack .ring__mark.is-shown { pointer-events: auto; }
}
.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:"] { display: inline-block; max-width: 100%; }   /* pass 17: an address does not break at its hyphen ("ogtrading-" / "qa.com"): it moves to the next line whole, and breaks only if the column is narrower than it (pass 23, 24: text at 200 %) */
.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 { --f-text: 0.8125rem; --f-fine: 0.75rem; background: var(--paper); color: var(--steel); font-size: var(--f-text); line-height: 1.5; border-top: 1px solid var(--hair); }   /* pass 23: compact by grouping (the name and the registration share a line, the address runs on, the columns have the same three rows at full width). Pass 26 (owner): smaller type, local to the footer: 13 px for details, links and the switch, 12 px for the copyright line; --ui and --small are unchanged */
.footer__grid { display: grid; gap: 8px 40px; padding-block: 12px 8px; }
.footer__id { color: var(--steel); }
.footer__name { color: var(--ink); font-weight: 500; }
.footer address { max-width: 66ch; }
.footer address span { display: inline-block; }   /* breaks fall between the address lines ("Ras Bufontas" stays together); a line still wraps inside itself when it is wider than the column */
.footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 0 28px; }   /* phones: two columns by column, the section pages first */
.footer__links a, .footer__contact a { display: inline-block; padding-block: 2.5px; }   /* 24.5 px targets at 13 px on a 1.5 line */
.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: 0 24px; padding-block: 3px 4px; border-top: 1px solid var(--hair); font-size: var(--f-text); }
.footer__base p { max-width: none; font-size: var(--f-fine); }
.footer__motion { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--f-text); 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; }
.footer__ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.footer__note { color: var(--steel); }   /* A11Y-14: shown (site.js) only while the device's reduced-motion setting locks the switch */
@media (forced-colors: active) {   /* A11Y-14: the switch keeps its state in forced colours */
  .footer__motion .switch { border: 1px solid ButtonText; background: Canvas; }
  .footer__motion .switch::after { background: ButtonText; }
  .footer__motion[aria-checked="true"] .switch { background: Highlight; border-color: Highlight; }
  .footer__motion[aria-checked="true"] .switch::after { background: HighlightText; }
}
/* phones (pass 29, owner): shorter by layout, not by smaller type. The footer is one grid (its wrappers display: contents, plain divs):
   the company, the nine pages in three columns of three, the email with the motion switch beside it, the sentence, the copyright under its
   hairline. The switch takes a row of its own when the footer is too narrow for both (320 px, enlarged text) or its device note shows */
@media (max-width: 639.98px) {
  .footer { container: footer / inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px var(--gutter) 0; line-height: 1.4; }
  .footer__grid, .footer__contact, .footer__base { display: contents; }
  .footer__co, .footer__nav, .footer__contact > p, .footer__base p { grid-column: 1 / -1; }
  .footer__nav { margin-top: 6px; }
  .footer__links { grid-template-columns: repeat(3, minmax(0, max-content)); grid-template-rows: repeat(3, auto); column-gap: 18px; }
  .footer__links a, .footer__contact a { padding-block: 3px; }   /* 24.2 px targets at 13 px on a 1.4 line */
  .footer__contact > p:nth-child(2) { grid-column: 1; margin-top: 4px; }
  .footer__ctl { grid-column: 2; grid-row: 3; align-self: center; margin: 4px 0 0 16px; }
  .footer__base p { margin: 8px calc(-1 * var(--gutter)) 0; padding: 5px var(--gutter) 8px; border-top: 1px solid var(--hair); }
  .footer:has(.footer__note:not([hidden])) .footer__ctl { grid-column: 1 / -1; grid-row: 6; margin: -4px 0 0; padding-bottom: 8px; }
}
@container footer (max-width: 24.5em) { .footer__links { grid-template-columns: repeat(2, minmax(0, max-content)); grid-template-rows: repeat(5, auto); } }
@container footer (max-width: 23em) { .footer__contact > p:nth-child(2) { grid-column: 1 / -1; } .footer__ctl { grid-column: 1 / -1; grid-row: 6; margin: -4px 0 0; padding-bottom: 8px; } }
@media (min-width: 640px) {   /* the company and the contact side by side, the pages in one running row below them */
  .footer__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); column-gap: 32px; }
  .footer__nav { grid-column: 1 / -1; grid-row: 2; }
  .footer__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
}
@media (min-width: 1280px) {   /* three columns, three rows each */
  .footer__grid { grid-template-columns: minmax(0, 13fr) max-content minmax(0, 7fr); column-gap: 40px; }
  .footer__nav { grid-column: 2; grid-row: 1; }
  .footer__links { display: grid; grid-template-columns: repeat(3, max-content); grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 0 24px; }
}

/* ---------- forms ---------- */
.rfq-layout { display: grid; grid-template-columns: minmax(0, 1fr); 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; }
.rfq__check { min-height: 65px; }   /* pass 31: the Turnstile widget's own height, reserved so the button does not move when it loads */
.rfq__check:focus-visible { outline: 2px solid var(--steel); outline-offset: 4px; }
@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-offset, var(--bar-h)) + 28px); } }
.rfq { background: var(--white); padding: clamp(20px, 3vw, 40px); border: 1px solid var(--hair); --field-line: rgba(24, 42, 51, 0.56); }   /* A11Y-07: field boundaries 3.6 : 1 on white, 3.3 : 1 on paper */
.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; }
:where(.rfq) :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea) { border-color: var(--field-line); }   /* before the focus and error rules, which keep their colours */
.rfq select { white-space: normal; height: auto; overflow-wrap: anywhere; }   /* COMPAT-C-02: Chromium wraps a long chosen option instead of cutting it; Firefox gets .field__face (rfq.js) */
.field__pick { display: grid; }
.field__pick > select, .field__face { grid-area: 1 / 1; }
.field__pick > select { align-self: stretch; color: transparent; }   /* the control, as tall as the text laid over it */
.field__pick > select option { color: var(--ink); }
.field__face { pointer-events: none; padding: 11px 37px 11px 13px; color: var(--ink); overflow-wrap: anywhere; }   /* the select's padding plus its border */
@media (forced-colors: active) { .field__face { display: none; } .field__pick > select { color: CanvasText; } }
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(7.5rem, 2fr) minmax(6.5rem, 2.2fr) minmax(5.5rem, auto); }   /* the same last track in both, so the labels sit over their fields; COMPAT-C-01: quantity and unit keep room for 1,000,000 beside Firefox's spin box and for every unit */
@container (min-width: 40rem) {   /* 640 px at the default text size; larger text keeps the stacked rows longer (COMPAT-C-01) */
  .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: 56.25rem) {
    .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; }
:where(.rfq) input[type="file"] { border-color: var(--field-line); }
.file-list { display: grid; gap: 4px; font-size: var(--small); color: var(--steel); }
.file-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }   /* pass 30: each chosen file, then its own Remove */
.file-list__name { min-width: 0; overflow-wrap: anywhere; }
.file-list__remove { min-height: 44px; }   /* a full touch target beside small text */
.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.is-warn { display: block; border-left: 4px solid #8A5A00; background: #FFF6E5; }   /* DES-11: nothing was sent — not a note, not an error */
.form-status > * + * { margin-top: 8px; }
.form-status__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.form-status__actions .btn { display: inline-flex; }   /* the email button is a mailto link: keep the button box over a[href^="mailto:"] { inline-block } */
.form-status__link { padding: 0; text-align: left; }   /* a button that reads like a link inside a message */
.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; }
@media (max-width: 1099px) { .rfq__aside { display: none; } }   /* pass 32 (review board 6): below the two-column layout the aside would follow Send; the intro already gives the rule */
.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; grid-template-columns: minmax(0, 1fr); 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(--ink); }   /* DES-10: the items are read, not meta */
@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 { 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(--paper); }   /* A11Y-08: 14:1 on ink; the IT stage keeps crimson on titanium (4.9:1) */
.scene--it .scene__tab[aria-selected="true"] { 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: the owner's concept C board (docs/design-options/bridge/boards/concept-c.png), rebuilt in pass 25 (DES-03).
   Two tall picture panels, Offshore and Onshore, each with its words at the foot on a shade of its own, and a light panel between them for the statement (pass 27; a slate until then). Wide (from 72em):
   the triptych, 35 / statement (at least 380 px) / 35. Narrower: the same three panels stacked in reading order, Offshore, statement, Onshore. The pictures are the
   board's frames (Topaz PNG 150 of the platform and 200 of the pumpjack), cut to 1560 x 1440 around each machine so the water and the ground stay in view.
   The joins (DES-02): the platform film ends on its water, so a short band of its measured edge tones settles into the panels instead of a hard step; at the foot the
   panels settle into the pumpjack film's sky in the same way. The words keep 4.5 : 1 or more on any picture: their shade is 0.76 or more behind every line (6.3 : 1 for --paper even over white). */
.bridge { position: relative; isolation: isolate; color: var(--paper); background: var(--tone-sky); --bridge-pad: clamp(24px, 3vw, 48px); --bridge-fade: clamp(20px, 2.2vw, 32px); --bridge-shade: clamp(72px, 12vw, 160px); }
.bridge::before, .bridge::after { content: ""; position: absolute; left: 0; right: 0; height: var(--bridge-fade); z-index: 2; pointer-events: none; }
.bridge::before { top: 0; background: linear-gradient(to right, var(--tone-sea-l) 0%, var(--tone-sea-c) 50%, var(--tone-sea-r) 100%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.bridge::after { bottom: 0; background: linear-gradient(to right, var(--tone-sky-l) 0%, var(--tone-sky-c) 50%, var(--tone-sky-r) 100%); -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.bridge__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.bridge__env { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(400px, 118vw, 560px); overflow: hidden; background: var(--ink); }
.bridge__pic { position: absolute; inset: 0; display: block; }
.bridge__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.bridge__words { position: relative; z-index: 1; padding: var(--bridge-shade) var(--gutter) calc(var(--bridge-fade) + 24px); background: linear-gradient(to top, rgba(24, 42, 51, 0.86) 0%, rgba(24, 42, 51, 0.76) calc(100% - var(--bridge-shade)), rgba(24, 42, 51, 0) 100%); }
.bridge__name { max-width: none; font-weight: 500; font-size: clamp(1.5rem, 0.8vw + 1.1rem, 1.75rem); line-height: 1.15; letter-spacing: -0.012em; margin-bottom: 8px; }
.bridge__words p:not(.bridge__name) { font-size: 1rem; line-height: 1.55; max-width: 54ch; }
/* the statement (pass 27, owner): a light panel between the pictures, ink type. Its own upper and lower zones (--say-join) settle from the tone it meets into
   the surface along a smoothstep in OKLab, so neither edge is a step nor a grey band; the padding keeps the words clear of both zones. It stands above the
   bridge's full-width fades, which belong to the pictures. Stacked: above it the Offshore panel's foot under its words shade, below it the Onshore picture's
   top rows (both measured on the shipped crops, mean of the outer 4 rows). Without color-mix() the panel is plain --say. */
.bridge__say { --say: var(--titanium); --say-in: #20313A; --say-out: #4E586C; --say-join: clamp(40px, 11vw, 56px);
  position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--say-join) + clamp(20px, 4vw, 32px)) var(--gutter); color: var(--ink); background: var(--say); }
@supports (color: color-mix(in oklab, #000, #fff)) {   /* one image paints the whole panel: a background colour under separate edge tiles was drawn at the column's fractional edge and showed as a 1 px light seam beside the pictures and along the foot (measured) */
  .bridge__say { background: linear-gradient(to bottom, var(--say-in), color-mix(in oklab, var(--say-in), var(--say) 10%) calc(var(--say-join) * 0.2), color-mix(in oklab, var(--say-in), var(--say) 35%) calc(var(--say-join) * 0.4), color-mix(in oklab, var(--say-in), var(--say) 65%) calc(var(--say-join) * 0.6), color-mix(in oklab, var(--say-in), var(--say) 90%) calc(var(--say-join) * 0.8), var(--say) var(--say-join),
    var(--say) calc(100% - var(--say-join)), color-mix(in oklab, var(--say-out), var(--say) 90%) calc(100% - var(--say-join) * 0.8), color-mix(in oklab, var(--say-out), var(--say) 65%) calc(100% - var(--say-join) * 0.6), color-mix(in oklab, var(--say-out), var(--say) 35%) calc(100% - var(--say-join) * 0.4), color-mix(in oklab, var(--say-out), var(--say) 10%) calc(100% - var(--say-join) * 0.2), var(--say-out)); }
}
.bridge__say h2 { font-size: clamp(1.875rem, 3.2vw + 1.2rem, 2.75rem); line-height: 1.08; letter-spacing: -0.016em; max-width: 18ch; overflow-wrap: break-word; }
.bridge__say p { margin-top: 16px; line-height: 1.55; max-width: 52ch; }
/* stacked panels between phones and the triptych: wider pictures, so a little more height keeps both machines whole */
@media (640px < width < 72em) {
  .bridge__env { min-height: clamp(440px, 60vw, 640px); }
  .bridge__pic img { object-position: 50% 30%; }
  .bridge__env--on .bridge__pic img { object-position: 50% 40%; }   /* more of the oil field's ground, the horsehead still whole */
  .bridge__say { --say-out: #656B79; }   /* the Onshore crop at 50 % 40 % starts lower in its sky */
}
/* phones, portrait and landscape (pass 29, owner): the statement alone. The two picture panels, their words and the picture fades are
   not rendered (nor read, nor fetched: lazy images that are never laid out), so the panel's joins meet the scenes themselves: above, the
   platform scene's ink foot; below, the pumpjack poster's first sky rows (#4A556A measured at 320–932 px, = --tone-sky), or the
   pumpjack scene's ink padding from 900 px, where its poster stands in a column. Tablets keep the stacked panels above */
@media (width <= 640px), (orientation: landscape) and (height <= 500px) and (width < 72em) {
  .bridge::before, .bridge::after, .bridge__env { display: none; }
  .bridge__say { --say-in: var(--ink); --say-out: var(--tone-sky); --say-join: clamp(40px, 11vw, 48px); padding-block: calc(var(--say-join) + 20px); }
  .bridge__say h2 { font-size: clamp(1.875rem, 3.2vw + 1.2rem, 2.25rem); }   /* a landscape phone keeps the portrait's size class, not the tablet's 44 px */
}
@media (orientation: landscape) and (height <= 500px) and (900px <= width < 72em) { .bridge__say { --say-out: var(--ink); } }
/* wide: the triptych; the statement column keeps 380 px so its paragraph does not run to a narrow column */
@media (width >= 72em) {
  .bridge { --bridge-shade: clamp(96px, 10vw, 180px); }
  .bridge__in { grid-template-columns: minmax(0, 35fr) minmax(380px, 30fr) minmax(0, 35fr); min-height: clamp(560px, 43vw, 860px); }
  .bridge__env { min-height: 0; }
  .bridge__words { padding: var(--bridge-shade) var(--bridge-pad) calc(var(--bridge-fade) + clamp(28px, 2.6vw, 40px)); }
  .bridge__say { --say-in: var(--tone-sea-c); --say-out: var(--tone-sky-c); --say-join: clamp(56px, 5vw, 96px); padding: calc(var(--say-join) + 24px) var(--bridge-pad); }   /* the joins meet the two films' own middle thirds: the platform's last water above, the pumpjack's first sky below */
  .bridge__say h2 { font-size: clamp(2.125rem, 2.6vw + 0.6rem, 3rem); max-width: none; }
  .bridge__say p { margin-top: 18px; font-size: 1.0625rem; }
}
@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):not(.scene--it), html.js:not(.no-motion) .scene:not(.is-static):not(.scene--it) .scene__media { background: var(--tone-sky); }   /* pass 22: never seen at rest. In a very fast scroll a stage can arrive before its image, and the browser fills tiles it has not rastered with the layer's largest flat colour: with --ink both read as a dark green flash, with the bridge's tone they read as sky (the IT scene has always had this, its titanium is its studio wall) */
  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 calc(var(--scene-x) - var(--gutter)) 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%); }   /* pass 32: the shade follows the text to the logo edge */
  html.js:not(.no-motion) .scene--onshore:not(.is-static) .scene__shade { background: radial-gradient(ellipse 92% 86% at calc(var(--scene-x) - var(--gutter)) 100%, rgba(24, 42, 51, 0.7) 0%, rgba(24, 42, 51, 0.5) 32%, rgba(24, 42, 51, 0.28) 60%, rgba(24, 42, 51, 0) 86%); }   /* A11Y-01: the third column of definitions stands at three quarters of the shared ellipse, over the field's brightest ground (4.23 : 1 there) */
  /* 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(--scene-x); bottom: clamp(76px, 10vh, 120px); max-width: 44rem; padding: 0; }
  html.js:not(.no-motion) .scene--platform:not(.is-static) .scene__lead { max-width: 29em; }   /* pass 32: at the logo edge the 50ch lead reached the platform's leg at 1440 */
  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); pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease; }   /* the outgoing screen is gone (220 ms) before the incoming one starts (240 ms): no ghost overlap. A11Y-02 (pass 25): the hidden screen stays in the reading order; focus inside shows it (scenes.js) */
  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) 14px var(--scene-x); 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; }
  /* A11Y-01 (pass 25): over the platform and pumpjack films the supporting text is set in --paper, like the links in the same places, and the item
     definitions at the UI size; hierarchy stays with size and weight. --haze stays where it stands on ink (static layouts, the IT stage). */
  html.js:not(.no-motion) .scene:not(.is-static):not(.scene--it) :is(.scene__lead, .scene__note, .spec-mini dd, .scene__meta, .scene__cue) { color: var(--paper); }
  html.js:not(.no-motion) .scene:not(.is-static):not(.scene--it) .scene__cue::after { background: var(--paper); }
  html.js:not(.no-motion) .scene:not(.is-static):not(.scene--it) .scene__cue { padding: 8px 18px 0; margin-right: -18px; background: radial-gradient(closest-side at 50% 14px, rgba(24, 42, 51, 0.42), rgba(24, 42, 51, 0)); }   /* the cue stands outside the corner shade: a soft patch of its own, no edge */
  html.js:not(.no-motion) .scene:not(.is-static):not(.scene--it) .spec-mini dd { font-size: var(--ui); }
  /* 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) 10px var(--scene-x); }
  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) ---------- */
/* pass 32 (owner, review board 4): each industry with its own photograph (none of them repeats an Industries-page picture);
   one column on phones (21 : 9), two from 640 px, four from 1024 px (4 : 3) */
.ind { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 28px; }
.ind__ph img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.ind h3 { margin-top: 16px; font-size: clamp(1.25rem, 0.4vw + 1rem, 1.375rem); font-weight: 500; letter-spacing: -0.006em; line-height: 1.2; }
.ind p { margin-top: 10px; color: var(--ink); max-width: 46ch; }   /* DES-10 */
@media (min-width: 640px) { .ind { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind__ph img { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) { .ind { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ind p { font-size: 1rem; } }

/* ---------- 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(--ink); max-width: 60ch; }   /* DES-10: answers at full ink */
.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; grid-template-columns: minmax(0, 1fr); 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-offset, 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 .co__legend-cap { flex: 1 0 100%; justify-content: center; color: var(--ink); font-weight: 500; white-space: normal; }   /* 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: flex; flex-wrap: wrap; column-gap: 16px; color: var(--steel); transition: color 300ms ease; }   /* A11Y-05 (pass 25): the countries drop under their region when the line is too narrow (200 % text at 320 px), instead of a one-letter column */
.co__groups dt { flex: 0 0 9rem; max-width: 100%; }
.co__groups dd { flex: 1 1 12rem; min-width: 0; }
.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(auto-fit, minmax(min(14rem, 100%), 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: var(--h2); font-weight: 500; line-height: 1.15; }   /* DES-08 (pass 25): the checkable facts are no longer the smallest type on the page; values as on About (.facts) */
.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(--ui); color: var(--steel); }
.co__facts dd { margin: 4px 0 0; font-size: 1.125rem; 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); }
.thanks__ref, .thanks__more { margin-top: 14px; color: var(--steel); }
.thanks__ref span { overflow-wrap: anywhere; }
.lost h1:focus { outline: none; }   /* focused by script, not by the visitor (site.js) */
.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 - var(--gutter) - max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) - var(--co-copy) - 24px), 1200px); }   /* pass 32: the field starts at the logo edge + the column */
  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(--frame-x) + 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(--frame-x); 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); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }   /* A11Y-02: in the reading order, shown on focus (plates.js) */
  html.js:not(.no-motion) :is(.scene, .co):not(.is-static) :is(.scene__text, .co__text).is-on:focus-within { transition: opacity 120ms ease, transform 120ms ease; }   /* a screen revealed by keyboard focus shows at once, without the scroll swap's delay */
  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; }
}
@media (max-width: 639.98px) { .form-status a, .co__legend span, .btn { white-space: normal; } .btn { text-align: center; } }   /* pass 23: the same at 200 % text: these may wrap on a phone */

/* ---------- phones (pass 33, owner): the phone layout as a composition of its own ----------
   Every rule below sits behind a phone condition: portrait up to 639 px wide, or landscape up to 500 px high and under 1024 px wide
   (the menu's scrim follows the menu itself, up to 1023 px). Desktop never matches; tablets match only through the menu. Shorter by
   rhythm and arrangement, never by smaller type: one 48 px section step, list rows at 14 px, short items two to a row, 4 : 3 thumbnails
   beside the industry headings, the form at the screen's full width, the manufacturers' fields shown without a tap. */
@media (max-width: 1023px) {   /* the open menu is a layer: the page under it dims and stays still (site.js sets html.menu-open) */
  html.menu-open { overflow: hidden; }
  .sheet:not([hidden]) { overscroll-behavior: contain; box-shadow: 0 0 0 100vmax rgba(24, 42, 51, 0.42); clip-path: inset(0 0 -100vmax 0); }
  .sheet nav { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (max-width: 639.98px) {
  :root { --sect: 48px; }
  /* header: the action and the menu one height, each a full touch target */
  .bar__cta, .bar__menu { min-height: 44px; }   /* taller only: their widths stay, so the logo keeps its full size from 375 px (header_bridge_check) */
  /* one rhythm for lists and the space under headings */
  .intro { padding-block: 36px 32px; }
  .open:not(.open--band, .open--ink) { padding-block: 28px 36px; }
  .head-row { margin-bottom: 24px; }
  .h-top { margin-bottom: 20px; }
  :is(.head-row, .doc__margin, .twocol, .split__text, .mfrs__copy) h2, .h-top { max-width: none; }   /* the desktop's 14–16ch measure broke short headings early ("What a / request needs"); balance still evens two lines */
  .doc { row-gap: 20px; }
  .doc__body > * + * { margin-top: 20px; }
  .doc__body > .lead + .rows, .doc__body > .lead + .spec, .doc__body > .lead + .steps { margin-top: 28px; }
  .more, .mfrs__links, .co__links { margin-top: 20px; }
  .cells__cell, .triplet > div, .spec__cell, .steps li { padding: 14px 0 18px; }
  .cells__cell p, .triplet p, .spec__cell p { margin-top: 6px; }
  .triplet--lines > div { padding: 18px 0 22px; }
  .rows > div { padding: 14px 0; gap: 4px; }
  .credits > div, .facts div { padding: 14px 0; }
  .faq summary { padding: 15px 0; }
  .prose h2 { margin-top: 1.6em; }
  /* photographic openings: a 3 : 2 picture, the title closer under it */
  .open__band img { aspect-ratio: 3 / 2; }
  .open--band > .open__row { padding-block: 24px 32px; }
  .open__actions { margin-top: 24px; }
  .open__photo--globe { margin-block: -4% -9%; }   /* the picture's own empty margin above the disc and under its southern edge */
  .open__photo--globe img { width: 84%; margin-inline: auto; }
  /* About: the four short company facts two to a row, the longer two across */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .facts > div:nth-child(n+5) { grid-column: 1 / -1; }
  /* home scenes: the copy closer to its picture, the facts row compact, the pumpjack at 3 : 2 */
  .scene__copy { padding-top: 22px; }
  .scene__actions { margin-top: 20px; }
  .scene__tabs { margin-top: 24px; }
  .scene__meta { gap: 4px 16px; padding: 12px var(--gutter) 18px; }
  .scene--onshore .scene__media { aspect-ratio: 3 / 2; }
  /* home industries: an index — each photograph whole at 4 : 3 beside its heading, the sentence at full measure under both */
  .ind { gap: 0; border-top: 1px solid var(--hair); }
  .ind > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px 0 18px; border-bottom: 1px solid var(--hair); }
  .ind__ph img { aspect-ratio: 4 / 3; }
  .ind h3 { margin-top: 0; }
  .ind p { grid-column: 1 / -1; margin-top: 12px; }
  /* home company: a smaller globe, the markets two to a row (Qatar, with its note, across) */
  .co__in { row-gap: 28px; }
  .co__globe { max-width: 330px; }
  .co__markets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 0; }
  .co__markets .co__home { grid-column: 1 / -1; }
  /* home manufacturers: the twelve marks in 3 : 2 cells; the OG mark and its second "Source from us" stay for the ring's wider layouts
     (the header and the closing band carry the request on a phone; the hidden lazy logo is not fetched) */
  .mfrs__in { gap: 28px; }
  .ring__cell { aspect-ratio: 3 / 2; }
  .ring__logo { max-height: 52px; }   /* a fixed cap: 100 % of the row resolved against the 3 : 2 cell shrank some marks */
  .ring__mark { display: none; }
  /* Manufacturers page: each field shown under its mark at rest, nothing to tap to read it */
  .dir .mfr__cell { grid-template-rows: 52px auto; row-gap: 6px; padding: 16px 10px 14px; }
  .dir .mfr__logo { filter: none; opacity: 1; }
  .dir .mfr__cap, html.js .dir .mfr__cap { min-height: 0; font-size: var(--small); opacity: 1; transform: none; }
  html.js .mfr__hint { display: none; }
  /* the request form: the screen's full width, item rows with quantity and unit side by side, the send button across */
  .section:has(> .rfq-layout) { padding-block: 0; }
  .rfq { margin-inline: calc(-1 * var(--gutter)); padding: 24px var(--gutter) 32px; border-width: 0; }
  .group { padding: 24px 0; }
  .group > legend { padding-bottom: 12px; }
  .grid2 { gap: 16px; }
  .rfq .hint, .rfq .choice small { font-size: 0.875rem; }
  .items__row { gap: 10px 12px; padding: 12px; }
  @container (min-width: 19rem) {   /* 304 px at the default text size: enlarged text keeps every field on its own row (COMPAT-C-01) */
    .items__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .items__row > .field:nth-child(-n+2), .items__remove { grid-column: 1 / -1; }
  }
  .items__remove { min-height: 44px; }
  .file-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .form-foot .btn--lg { width: 100%; }
}
/* phone landscape: the picture never fills the short screen, so the title is on the first screen */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  :root { --sect: 48px; --bar-h: 60px; }
  .bar__brand img { height: 40px; }
  .bar__cta, .bar__menu { min-height: 40px; }
  .open--band > .wrap--wide { grid-area: auto; grid-row: 1; }
  .open--band > .open__row { grid-area: auto; grid-row: 2; z-index: auto; align-self: auto; padding-block: 24px 32px; }
  .open__band img { aspect-ratio: auto; height: 48svh; }
  .open__band::after { display: none; }
  .open--band .lead, .open--band .open__meta { color: var(--haze); max-width: 60ch; }
  .scene .scene__media { aspect-ratio: auto; height: 58svh; }
  .scene--it .scene__poster img { object-fit: contain; }
}
/* pass 33b (owner, iPhone): phones portrait and landscape */
@media (max-width: 639.98px), (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  /* chapter tabs: both panels share one cell and the hidden one keeps its height unseen, so the tabs under them stay put when switched
     ([data-slide]: only while the tabs module owns the panels; otherwise scenes.js shows them all) */
  html.js .scene[data-slide] .scene__texts { gap: 0; }
  html.js .scene[data-slide] .scene__text { grid-area: 1 / 1; }
  html.js .scene[data-slide] .scene__text:not(.is-on) { display: block; visibility: hidden; }
  /* no Reduce motion switch: nothing moves on a phone (films, globe and ring play only from 1024 px in landscape); the device setting still applies */
  .footer__ctl { display: none; }
}
@media (max-width: 639.98px) {
  /* pass 33c (owner): the two company links side by side, About at the left on one line, Manufacturers & Sourcing at the right, wrapping
     only inside its own column (never under About); the credits' licence names stay on one line */
  .co__links { display: flex; align-items: flex-start; gap: 0 20px; }
  .co__links .sep { display: none; }
  .co + .co-facts { padding-top: 8px; }   /* same paper, no rule between: one 56 px step after the links, not two section paddings */
  .co__links a:first-child, .credits dd a { white-space: nowrap; }
  .co__links a:last-child { min-width: 0; overflow-wrap: normal; }
}