/* ---- steier (Steier — Scaffolding, props & shutter ply 339) ----------------
   THE STRUCTURAL MOVE: THERE IS NOT ONE ASYMMETRIC BAND ON THE PAGE. No split
   image-beside-text anywhere, no portrait bleeding off an edge, no copy pushed
   left or right — everything sits on the vertical midline, top to bottom. The
   four service tiles are laid 2x2 with the gutter taken out entirely so the
   block reads as one square of photographs, the yard's only paragraph is a bare
   620px column with nothing flanking it, the catalogue is four across on the
   open paper with the card chrome stripped off, and the page closes on a single
   captionless photograph run edge to edge. Site orange is spent three times and
   three times only: the hero slab, the hairline under every heading, and the
   rand figure. Nothing here touches header order, position or alignment. */
body.t-steier {
  background: #f4f2ee;
  color: #3c3f42;
  --st-orange: #d4541e;
  --st-lit: #ef6a2f;
  --bg-flat: #f4f2ee;
  --header-bg: #f4f2ee;
  --surface: #f4f2ee;
  --surface-2: #e8e5df;
  --line: #dcd8d1;
  --line-strong: #c3bfb6;
  --heading: #26292b;
  --text: #3c3f42;
  --muted: #7e8286;
  --radius: 0;
  --shadow: none;
}

/* flat paper bars top and bottom, so the full-window opener starts under the
   header instead of behind it. Type, colour and tracking only — never order. */
body.t-steier .sf-head, body.t-steier .sf-header,
body.t-steier .sf-foot, body.t-steier .sf-footer, body.t-steier .sf-cats {
  background: #f4f2ee; border-color: #dcd8d1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-steier .sf-name, body.t-steier .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; }

/* ORANGE 1 of 3 — a flat safety-orange slab with no edge on it anywhere */
body.t-steier .btn.brand { background: var(--st-orange); border: 0; box-shadow: none; color: #ffffff; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-steier .btn.brand:hover { background: var(--st-lit); color: #ffffff; }

/* every heading is centred, small, uppercase and tracked wide, and ORANGE 2 of 3
   is the 44px hairline under it — the same rule on all four bands, which is
   what makes the page read as one symmetrical column */
body.t-steier .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(13px, 1.7vw, 17px); font-weight: 700; color: var(--heading); margin: 0 0 34px; }
body.t-steier .sc-h2::after { content: ''; display: block; width: 44px; height: 2px; margin: 20px auto 0; background: var(--st-orange); }

/* the full window, three frames cross-fading, copy dead centre and one slab */
body.t-steier .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-steier .sc-hero h1 { text-transform: uppercase; font-size: clamp(27px, 5.2vw, 58px); font-weight: 800; letter-spacing: 0.015em; line-height: 1.08; margin: 0 0 16px; }
body.t-steier .sc-hero p { font-size: 15px; letter-spacing: 0.05em; margin: 0 0 34px; }

/* THE 2x2 BLOCK — four tiles touching, gutter taken out, nothing rounded and no
   frame on any picture. Held to 920px so it stays a square in the middle. */
body.t-steier .sc-strip { max-width: 920px; padding: 90px 20px 24px; }
body.t-steier .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
body.t-steier .sc-strip-card { background: var(--surface-2); padding-bottom: 26px; }
body.t-steier .sc-strip-img { aspect-ratio: 16 / 10; border: 0; border-radius: 0; }
body.t-steier .sc-strip-label { margin-top: 18px; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; }

/* THE IMAGELESS BAND — the only place the yard speaks, and deliberately not a
   split: no photograph beside it, no portrait, nothing flanking the column */
body.t-steier .sc-richtext { max-width: 620px; padding: 92px 20px 78px; }
body.t-steier .sc-richtext p { font-size: 15px; line-height: 2; color: var(--text); }

/* FOUR ACROSS, TWO ROWS, straight onto the paper — no card, no border, no
   shadow, no radius, and the caption centred under each picture */
body.t-steier .sc-products { max-width: 1180px; padding: 8px 20px 94px; }
body.t-steier .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 26px; padding: 0; }
body.t-steier .product-card, body.t-steier .product-card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.t-steier .product-card .ph { aspect-ratio: 4 / 3; background: var(--surface-2); }
body.t-steier .product-card .meta { padding: 14px 0 0; text-align: center; text-transform: uppercase; letter-spacing: 0.09em; }
body.t-steier .product-card .p { color: var(--st-orange); font-weight: 700; font-size: 14px; } /* ORANGE 3 of 3 */

/* THE HEAVIEST IMAGE MOMENT — edge to edge, no caption, no padding, nothing
   set over it. The only wide thing on the page after the opener. */
body.t-steier .sc-banner { margin: 0 calc(50% - 50vw); min-height: 78vh; padding: 0; }

/* the smallest band on the page, and the slab runs the full width of it so even
   the last control stays symmetrical */
body.t-steier .sc-contact { max-width: 460px; padding: 94px 20px 104px; }
body.t-steier .sc-contact-form .btn { align-self: stretch; margin-top: 8px; }

@media (max-width: 860px) {
  body.t-steier .sc-hero { min-height: 84vh; }
  body.t-steier .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
}
@media (max-width: 560px) {
  body.t-steier .sc-strip-row { grid-template-columns: minmax(0, 1fr); }
}

/* NIGHT — the paper goes to wet slate and the orange is lifted a couple of
   steps so a rand figure still carries against it, which is roughly what the
   yard looks like under the floodlight when a truck loads before six. */
html[data-theme="dark"] body.t-steier {
  background: #1b1d1f;
  color: #c6c9cc;
  --st-orange: #f2703a;
  --st-lit: #ff8552;
  --bg-flat: #1b1d1f;
  --header-bg: #1b1d1f;
  --surface: #1b1d1f;
  --surface-2: #232628;
  --line: #2e3134;
  --line-strong: #42464a;
  --heading: #eceef0;
  --text: #c6c9cc;
  --muted: #82868a;
}
html[data-theme="dark"] body.t-steier .sf-head, html[data-theme="dark"] body.t-steier .sf-header,
html[data-theme="dark"] body.t-steier .sf-foot, html[data-theme="dark"] body.t-steier .sf-footer,
html[data-theme="dark"] body.t-steier .sf-cats { background: #1b1d1f; border-color: #2e3134; }
html[data-theme="dark"] body.t-steier .btn.brand { background: var(--st-orange); color: #1a1109; }
html[data-theme="dark"] body.t-steier .btn.brand:hover { background: var(--st-lit); color: #1a1109; }