/* ---- dunnage (Dunnage — Load securing & packaging 87) ----------------------
   THE STRUCTURAL MOVE: the page carries TWO strips of opposite character. The
   first is the ordinary contained, gapped, labelled row. The second — the only
   strip that follows a bare centred column — breaks the container, runs the
   full 100vw and drops its gutter to a 2px red rule, so four material close-ups
   butt together like a strapped load. `.sc-richtext + .sc-strip` is the only
   thing that can tell the two apart, and it is safe: the upper about block is a
   split, so it renders as .sc-about-split and never matches. Ground is oxidised
   zinc; the single strapping red is spent on buttons and those rules only. */
body.t-dunnage {
  background: #d4d7d3;
  color: #191c1a;
  --radius: 0;
  --header-bg: #e2e5e1;
  --surface: #ffffff;
  --surface-2: #c7cbc7;
  --line: #b7bcb7;
  --line-strong: #9ba09b;
  --heading: #101312;
  --text: #191c1a;
  --muted: #616763;
}
/* two stacked rules of chrome before the first photograph: utility bar, then
   the bar itself as a solid slab rather than glass over the picture */
body.t-dunnage .sf-announce { background: #101312; color: #b9beba; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; padding: 9px 12px; }
body.t-dunnage .sf-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-dunnage .btn.brand { background: #c22e1f; border-color: #c22e1f; color: #ffffff; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; padding: 15px 30px; }
body.t-dunnage .btn.brand:hover { background: #9c2418; opacity: 1; }

/* full-viewport opener that starts UNDER the sticky bar, not behind it */
body.t-dunnage .sc-hero { min-height: calc(100vh - 66px); }
body.t-dunnage .sc-hero h1 { font-weight: 700; font-size: clamp(30px, 5.4vw, 58px); line-height: 1.06; max-width: 17ch; margin: 0 auto 16px; }
body.t-dunnage .sc-hero p { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; margin-bottom: 32px; }

/* strip one: contained, gapped, a word under each picture */
body.t-dunnage .sc-strip-img { aspect-ratio: 4 / 3; }
body.t-dunnage .sc-strip-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: #616763; }

/* six priced tiles have to fill two rows of three, so the auto-fill grid is
   pinned — a 4+2 wall would leave the catalogue hanging */
body.t-dunnage .product-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
body.t-dunnage .sc-banner { min-height: 50vh; }

/* the silence: a bare column, no picture, all the air on the page */
body.t-dunnage .sc-richtext { max-width: 620px; padding: 112px 20px 104px; }
body.t-dunnage .sc-richtext p { font-size: 15.5px; line-height: 1.9; color: #4d5350; }

/* THE MOVE — strip two breaks the page open, edge to edge, red rules for gutters */
body.t-dunnage .sc-richtext + .sc-strip { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 0; }
body.t-dunnage .sc-richtext + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 2px; background: #c22e1f; }
body.t-dunnage .sc-richtext + .sc-strip .sc-strip-img { aspect-ratio: 5 / 4; border: 0; }
body.t-dunnage .sc-richtext + .sc-strip .sc-strip-label { margin: 0; padding: 12px 14px; background: #d4d7d3; }
@media (max-width: 760px) {
  body.t-dunnage .product-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-dunnage .sc-richtext + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
}

/* the page closes on one dark slab: the band runs straight into the footer, so
   it reads as the foot of the page rather than a form dropped above one */
body.t-dunnage .sc-contact-band { background: #101312; color: #dfe2df; padding: 92px 0 84px; }
body.t-dunnage .sc-contact-band .sc-h2, body.t-dunnage .sc-contact-band .sc-contact-sub, body.t-dunnage .sc-contact-band .sc-field label { color: #dfe2df; }
body.t-dunnage .sc-contact-band .sc-field input, body.t-dunnage .sc-contact-band .sc-field textarea { background: #1b1f1d; border-color: #2b302d; color: #e9ece9; }
body.t-dunnage .sf-footer, body.t-dunnage .sf-footer a { color: #868d89; }
body.t-dunnage .sf-footer { background: #101312; border-top-color: #101312; margin-top: 0; padding-top: 10px; }

/* NIGHT — the hardstand goes to wet tar and the red lifts a shade, so a ratchet
   handle still reads on the dark ground */
html[data-theme="dark"] body.t-dunnage {
  background: #141716;
  color: #bcc0bd;
  --header-bg: #141716;
  --surface: #1c201e;
  --surface-2: #232725;
  --line: #2c312e;
  --line-strong: #3a403c;
  --heading: #e9ece9;
  --text: #bcc0bd;
  --muted: #868d89;
}
html[data-theme="dark"] body.t-dunnage .btn.brand { background: #d8503f; border-color: #d8503f; }
html[data-theme="dark"] body.t-dunnage .btn.brand:hover { background: #b93a2a; }
html[data-theme="dark"] body.t-dunnage .sc-richtext p { color: #9ba19d; }
html[data-theme="dark"] body.t-dunnage .sc-richtext + .sc-strip .sc-strip-row { background: #d8503f; }
html[data-theme="dark"] body.t-dunnage .sc-richtext + .sc-strip .sc-strip-label { background: #141716; }
html[data-theme="dark"] body.t-dunnage .sc-contact-band { background: #0d0f0e; color: #d7dad7; }
html[data-theme="dark"] body.t-dunnage .sf-footer { background: #0d0f0e; border-top-color: #0d0f0e; }
html[data-theme="dark"] body.t-dunnage .sc-contact-band .sc-field input, html[data-theme="dark"] body.t-dunnage .sc-contact-band .sc-field textarea { background: #1c201e; border-color: #2c312e; }