/* ---- brandwag (Brandwag — Veld fire equipment & protection gear 161) -------
   THE STRUCTURAL MOVE: FOUR SLABS WITH NO PICTURE IN THEM. The reference's tile
   row under the stage is icon-over-caption with no photograph anywhere in it, so
   this one gives its picture boxes up entirely — four soot slabs welded onto the
   floor of a full-screen two-slide stage, held apart by a 3px gap so the ash
   ground reads between them as three hairlines. Nothing else on the page is
   flush with anything: after the weld everything retreats into the contained
   column and only the banner bleeds again. Red is rationed to exactly three
   marks — the stage button, the rule over every rand figure, and the hairline
   under each section heading — which is why the category label and both other
   buttons are pulled off the brand token by hand. The six-up field wall is
   reached through `.sc-buygrid ~ .sc-strip`, because the weld strip sits AHEAD
   of the catalogue and an element-type selector would land on the hero. */
body.t-brandwag {
  background: #ecebe7;
  color: #3a3733;
  --bw-soot: #141312;
  --bw-red: #c8201f;
  --radius: 0;
  --shadow: none;
  --header-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #e0dfda;
  --line: #d5d3cd;
  --line-strong: #b6b3ab;
  --heading: #141312;
  --text: #3a3733;
  --muted: #6e6a64;
}

/* plain white bar of ordinary height, brand hard left — it sits ON the page
   rather than floating over the stage, so the photograph starts beneath it */
body.t-brandwag .sf-head, body.t-brandwag .sf-header {
  background: #ffffff; border-color: #d5d3cd;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* the page shuts on the same soot the stage and the banner stand on */
body.t-brandwag .sf-foot, body.t-brandwag .sf-footer, body.t-brandwag .sf-footer a {
  background: var(--bw-soot); border-color: #2a2724; color: #9c968d;
}

/* flat slabs, no borders anywhere. Soot is the default control colour; red is
   spent once, above the fold, and never again on a button. */
body.t-brandwag .btn.brand { background: var(--bw-soot); color: #ecebe7; border: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 11.5px; padding: 16px 30px; }
body.t-brandwag .sc-hero .btn.brand { background: var(--bw-red); color: #ffffff; }
body.t-brandwag .sc-banner .btn.brand { background: #ecebe7; color: var(--bw-soot); }

/* the stage: two slides, the whole first screen, headline left of centre */
body.t-brandwag .sc-hero { min-height: 100vh; padding: 100px max(24px, calc(50vw - 580px)); }
body.t-brandwag .sc-hero h1 { font-weight: 800; font-size: clamp(36px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }

/* THE WELD — four capability slabs fused to the bottom edge of the stage. The
   strip surrenders its container, its gutters and its image boxes, and the
   label becomes the whole tile. */
body.t-brandwag .sc-hero + .sc-strip { max-width: none; width: 100%; margin: 0; padding: 0; }
body.t-brandwag .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
body.t-brandwag .sc-hero + .sc-strip .sc-strip-img { display: none; }
body.t-brandwag .sc-hero + .sc-strip .sc-strip-card { background: var(--bw-soot); padding: 40px 22px 44px; }
body.t-brandwag .sc-hero + .sc-strip .sc-strip-label { margin: 0; color: #ecebe7; text-align: center; font-size: clamp(13px, 1.35vw, 17px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

/* RED, TWO OF THREE — a hairline under every section heading, ranged with it */
body.t-brandwag .sc-h2 { color: var(--heading); font-weight: 800; letter-spacing: -0.025em; }
body.t-brandwag .sc-h2::after { content: ''; display: block; width: 44px; height: 2px; margin: 15px auto 0; background: var(--bw-red); }
body.t-brandwag .sc-about-copy .sc-h2::after { margin-left: 0; }

/* the page's ONLY two-up: photograph pinned left at half the band, two
   paragraphs and the four measured lines ranged right. The shared sheet already
   sets pre-line on this copy, which is what keeps the readiness lines apart. */
body.t-brandwag .sc-about-split { padding: 100px 20px 92px; gap: 56px; align-items: start; }
body.t-brandwag .sc-about-media img { aspect-ratio: 4 / 5; object-fit: cover; }
body.t-brandwag .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.9; }

/* EIGHT tiles, four across, two rows that fill. Flat-lays keep their own white
   ground so nothing floats on a halo, and RED THREE OF THREE is the rule over
   the rand figure — the only red below the stage. */
body.t-brandwag .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 26px; }
body.t-brandwag .sc-buy-media img { aspect-ratio: 1; object-fit: contain; background: #ffffff; padding: 22px; }
body.t-brandwag .sc-buy-cat { color: var(--muted); }
body.t-brandwag .sc-buy-p { margin-top: 10px; padding-top: 9px; border-top: 2px solid var(--bw-red); color: var(--heading); font-weight: 800; font-size: 17px; }

/* the six-up field wall, contained and gapped in every direction — the weld's
   opposite, and it sits after the catalogue rather than under the stage */
body.t-brandwag .sc-buygrid ~ .sc-strip .sc-strip-row, body.t-brandwag .sc-products ~ .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
body.t-brandwag .sc-buygrid ~ .sc-strip .sc-strip-label, body.t-brandwag .sc-products ~ .sc-strip .sc-strip-label { margin-top: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.13em; font-size: 10.5px; font-weight: 700; }

@media (max-width: 1000px) {
  body.t-brandwag .sc-hero { min-height: 82vh; }
  body.t-brandwag .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-brandwag .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-brandwag .sc-buygrid ~ .sc-strip .sc-strip-row, body.t-brandwag .sc-products ~ .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — burnt ground. Ash paper goes to a warm near-black, which means the
   soot slabs have to drop BELOW it to stay readable as slabs: #0d0c0b under a
   #1a1917 ground keeps the weld's three hairlines visible instead of letting
   the four tiles dissolve into the page. The control colour inverts with the
   ground — soot buttons would vanish, so they go ash — and the red lifts two
   steps because #c8201f was picked against ash paper and goes to dried blood on
   a dark one. The flat-lay tiles keep their pure white: the product photographs
   are shot on white and a dark tile would ring every one of them. */
html[data-theme="dark"] body.t-brandwag {
  background: #1a1917;
  color: #b3aea6;
  --bw-soot: #0d0c0b;
  --bw-red: #e04338;
  --header-bg: #232120;
  --surface: #232120;
  --surface-2: #2b2926;
  --line: #33302c;
  --line-strong: #47433d;
  --heading: #ecebe7;
  --text: #b3aea6;
  --muted: #85807a;
}
html[data-theme="dark"] body.t-brandwag .sf-head, html[data-theme="dark"] body.t-brandwag .sf-header { background: #232120; border-color: #33302c; }
html[data-theme="dark"] body.t-brandwag .sf-foot, html[data-theme="dark"] body.t-brandwag .sf-footer, html[data-theme="dark"] body.t-brandwag .sf-footer a { background: #0d0c0b; border-color: #26241f; color: #8d877f; }
html[data-theme="dark"] body.t-brandwag .btn.brand { background: #ecebe7; color: #141312; }
html[data-theme="dark"] body.t-brandwag .sc-hero .btn.brand { background: var(--bw-red); color: #1a0f0d; }
html[data-theme="dark"] body.t-brandwag .sc-hero + .sc-strip .sc-strip-card { background: #0d0c0b; }