/* ERTS — manganese mining & bulk export (bridge 342).
   THE STRUCTURAL MOVE: the whole page is full-bleed. The 1120 container and the
   shared zebra wash are switched off so every band — the gapless four-tile
   capability row, the bar-less counter stripe, the borderless eight-frame
   shipping wall, the closing enquiry — runs to the viewport edges on one
   near-black slate. The layout contains itself exactly ONCE, on the ore-dust
   inset behind the site gallery, and that pale column is therefore the only
   place the page breathes. One cold pale blue: buttons, two overlines, the
   four counter figures. Nothing here touches .sf-header / .ws-nav /
   .ws-nav-inner / .ws-brand or any item inside them — no order, no absolute
   positioning, no nth-of-type. */
body.t-erts.ws-body {
  --bg: #0f1317; --fg: #b6bec6; --heading: #f3f6f8; --text: #a4acb4; --muted: #7a828a;
  --er-blue: #8fb4cf; --er-line: #232a30; --er-deep: #090c0f; --er-field: #171c22;
  --er-dust: #d8d3c7; --er-dustink: #1b1e20; --er-dustsub: #5d6058;
  --hero-a: rgba(6, 8, 10, .28); --hero-b: rgba(6, 8, 10, .68);
}

/* the container comes off every band; padding moves inside so the bands touch */
body.t-erts.ws-body .ws-section { padding: 0; background: transparent; }
body.t-erts .ws-section > .ws-container { max-width: none; padding: 92px 46px; }
body.t-erts .ws-container.ws-narrow { max-width: 900px; }
body.t-erts .ws-nav { border-bottom-color: var(--er-line); }

/* the sheet's hardcoded greys re-pointed at tokens so night actually moves */
body.t-erts .ws-sub, body.t-erts .ws-feature p, body.t-erts .ws-story-copy p, body.t-erts .ws-richtext p, body.t-erts .ws-title-sub, body.t-erts .ws-cta-inner p { color: var(--text); opacity: 1; }

/* one whole screen of ore, four frames cross-fading, the copy sitting low-left */
body.t-erts .ws-hero { min-height: 100vh; align-items: flex-end; }
body.t-erts .ws-hero-inner { max-width: none; padding: 0 46px 104px; }
body.t-erts .ws-hero h1 { font-size: clamp(38px, 6.6vw, 88px); font-weight: 800; letter-spacing: -.045em; line-height: .98; max-width: 14ch; text-shadow: none; }

/* pale blue: the controls, and later the overlines and the figures. Nowhere else */
body.t-erts.ws-body .btn.brand, body.t-erts.ws-body .ws-hero-cta.btn.brand { background: var(--er-blue); color: #0b0e11; border-radius: 0; box-shadow: none; padding: 16px 34px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
body.t-erts.ws-body .btn.brand:hover, body.t-erts.ws-body .ws-hero-cta.btn.brand:hover { background: #b6d2e6; }
body.t-erts .ws-h2, body.t-erts .ws-story-copy h2, body.t-erts .ws-title-h { color: var(--heading); font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; }

/* four flush capability tiles, hairline-welded, edge to edge */
body.t-erts .ws-features > .ws-container { padding: 0; }
body.t-erts .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--er-line); }
body.t-erts .ws-feature { text-align: left; padding: 58px 40px 64px; background: var(--bg); }
body.t-erts .ws-feature-icon { color: var(--er-blue); margin-bottom: 22px; }
body.t-erts .ws-feature h3 { color: var(--heading); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .17em; margin: 0 0 12px; }

/* the picture does the talking: the crew takes the left half at full bleed */
body.t-erts .ws-story > .ws-container { padding: 0; }
body.t-erts .ws-story-grid { grid-template-columns: 1.15fr .85fr; gap: 0; align-items: stretch; }
body.t-erts .ws-story-media img { height: 100%; min-height: 540px; aspect-ratio: auto; border-radius: 0; }
body.t-erts .ws-story-copy { padding: 88px 46px; }

/* four figures, no bars, no boxes — the stripe is ruled top and bottom only */
body.t-erts .ws-columns > .ws-container { padding: 76px 46px; border-top: 1px solid var(--er-line); border-bottom: 1px solid var(--er-line); }
body.t-erts .ws-col-h { color: var(--er-blue); font-size: clamp(40px, 5.6vw, 76px); font-weight: 800; letter-spacing: -.05em; line-height: .9; margin: 0 0 14px; }
body.t-erts .ws-columns .ws-col p { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; line-height: 1.7; margin: 0; }

/* the partner title carries the reference's lowercase overline above it */
body.t-erts .ws-titleblock > .ws-container { padding: 96px 46px 34px; }
body.t-erts .ws-title-h::before { content: 'our partners'; display: block; color: var(--er-blue); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; }

/* eight marks, four across in two gapless rows, no border and no gutter */
body.t-erts .ws-logos > .ws-container { padding: 0; }
body.t-erts .ws-logos-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; opacity: 1; }
body.t-erts .ws-logos-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; filter: grayscale(.45) contrast(1.05); }

/* THE ONE CONTAINED REGION — ore dust behind the sites, and the only air */
body.t-erts.ws-body .ws-section.ws-gallery { background: var(--er-dust); }
body.t-erts .ws-gallery > .ws-container { max-width: 1060px; padding: 100px 26px 108px; }
body.t-erts .ws-gallery .ws-h2, body.t-erts .ws-gallery-cap strong { color: var(--er-dustink); }
body.t-erts .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
body.t-erts .ws-gallery-item img { border-radius: 0; aspect-ratio: 4 / 3; }
body.t-erts .ws-gallery-cap strong { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
body.t-erts .ws-gallery-cap span { color: var(--er-dustsub); font-size: 11.5px; text-transform: uppercase; letter-spacing: .11em; }

/* the two statement bands stay on the slate — only the gallery is ever lighter */
body.t-erts.ws-body .ws-section.ws-cta { background: transparent; color: var(--text); }
body.t-erts .ws-cta > .ws-container { padding: 104px 46px 92px; }
body.t-erts .ws-cta-inner { max-width: 760px; }
body.t-erts .ws-cta-inner h2 { color: var(--heading); font-size: clamp(24px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.035em; }
body.t-erts .ws-cta-inner h2::before { content: 'how we sell'; display: block; color: var(--er-blue); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; }
body.t-erts .ws-richtext > .ws-container { padding: 82px 46px 104px; border-top: 1px solid var(--er-line); }
body.t-erts .ws-richtext p { max-width: 60ch; margin: 0 auto; text-align: center; font-size: 19px; line-height: 1.75; }

/* the last band: the enquiry left, the Kathu office and the landline right */
body.t-erts.ws-body .ws-section.ws-contact { background: var(--er-deep); }
body.t-erts .ws-contact > .ws-container.ws-narrow { max-width: none; padding: 96px 46px 104px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 0 72px; align-items: start; }
body.t-erts .ws-contact .ws-h2 { grid-column: 1 / -1; }
body.t-erts .ws-contact .ws-sub { grid-column: 2; grid-row: 2; max-width: none; margin: 30px 0 0; text-align: left; white-space: pre-line; color: var(--heading); font-size: 14.5px; line-height: 2; }
body.t-erts .ws-contact .ws-form { grid-column: 1; grid-row: 2; max-width: none; margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
body.t-erts .ws-contact .ws-field:has(textarea), body.t-erts .ws-contact .ws-form .btn.brand { grid-column: 1 / -1; }
body.t-erts .ws-contact .ws-form .btn.brand { justify-self: start; }
body.t-erts .ws-field input, body.t-erts .ws-field select, body.t-erts .ws-field textarea { background: var(--er-field); border: 1px solid var(--er-line); border-radius: 0; color: var(--heading); }

/* every count still fills its rows as the bands fold: 4→2→1, 8→4→2, 6→3→2 */
@media (max-width: 980px) {
  body.t-erts .ws-features-grid, body.t-erts .ws-gallery-grid, body.t-erts .ws-columns .ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-erts .ws-story-grid, body.t-erts .ws-contact > .ws-container.ws-narrow, body.t-erts .ws-contact .ws-form { grid-template-columns: 1fr; }
  body.t-erts .ws-contact .ws-sub, body.t-erts .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
  body.t-erts .ws-story-media img { min-height: 380px; }
}
@media (max-width: 620px) {
  body.t-erts .ws-features-grid, body.t-erts .ws-gallery-grid, body.t-erts .ws-columns .ws-cols-4 { grid-template-columns: 1fr; }
  body.t-erts .ws-logos-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-erts .ws-section > .ws-container, body.t-erts .ws-hero-inner { padding-left: 24px; padding-right: 24px; }
}

/* night — the slate drops to pit black so the ore-dust inset reads brighter
   still, the hairlines dim, and the pale blue lifts a shade to hold the
   figures and the two overlines */
html[data-theme="dark"] body.t-erts.ws-body {
  --bg: #06080a; --fg: #a9b1b9; --heading: #eef2f5; --text: #98a0a8; --muted: #6d757d;
  --er-blue: #a6c8e0; --er-line: #191e23; --er-deep: #030405; --er-field: #12161a;
  --er-dust: #c6c1b5; --er-dustink: #14161a; --er-dustsub: #4e514b;
  --hero-a: rgba(2, 3, 4, .34); --hero-b: rgba(2, 3, 4, .72);
}