/* ============================== VAAN ==============================
   THE STRUCTURAL MOVE: one slate blue-black ground runs unbroken from the
   header to the footer and is cut into exactly twice — by a four-tile shelf
   welded edge to edge with no gutter and no container, its labels lying
   straight on the pictures, and by a contained 4x2 catalogue whose cards are
   the ONLY white surfaces anywhere on the page, so galvanised steel and brass
   read true instead of grey on grey. Between the stage and that shelf the page
   gives up photographs entirely for one narrow centred column of type. Ochre is
   spent twice only: the controls and the rand figure. The cold water-white is
   kept for the links and the four tile labels and appears nowhere else.
   Nothing here orders, positions or reflows a single item inside the header. */
body.t-vaan {
  background: #141b23;
  color: #b7c3cc;
  --vn-ochre: #a6603a;
  --vn-lit: #bd7046;
  --vn-water: #dce9f0;
  --bg-flat: #141b23;
  --header-bg: #141b23;
  --surface: #1b232c;
  --surface-2: #212b35;
  --line: #27313c;
  --line-strong: #3a4854;
  --heading: #e8f0f5;
  --text: #b7c3cc;
  --muted: #7d8b96;
  --radius: 0;
  --shadow: none;
}

/* a flat slate bar exactly the colour of the page, so the stage begins beneath
   the header rather than behind it. Type, colour and tracking only. */
body.t-vaan .sf-head, body.t-vaan .sf-header,
body.t-vaan .sf-foot, body.t-vaan .sf-footer, body.t-vaan .sf-cats {
  background: #141b23; border-color: #27313c;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-vaan .sf-name { text-transform: uppercase; letter-spacing: 0.3em; font-size: 13px; font-weight: 700; }
body.t-vaan .sf-navlink { color: var(--vn-water); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; }

/* OCHRE 1 of 2 — every control is a flat red-dust slab with no edge on it, and
   the hero ghost carries a hairline as an inset shadow rather than a border */
body.t-vaan .btn.brand { background: var(--vn-ochre); border: 0; border-radius: 0; box-shadow: none; color: #f7ede4; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 16px 32px; }
body.t-vaan .btn.brand:hover { background: var(--vn-lit); color: #ffffff; }
body.t-vaan .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 0; box-shadow: inset 0 0 0 1px rgba(220, 233, 240, 0.55); color: var(--vn-water); }
body.t-vaan .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--vn-ochre); box-shadow: none; color: #ffffff; }

/* THE STAGE — the whole first screen, three plates cross-fading, with a small
   tracked line set above the heading and the copy held dead centre */
body.t-vaan .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-vaan .sc-hero-inner::before { content: 'Donkin Street · Beaufort West · since 1978'; display: block; margin-bottom: 22px; color: rgba(220, 233, 240, 0.8); text-transform: uppercase; letter-spacing: 0.34em; font-size: 10.5px; font-weight: 700; }
body.t-vaan .sc-hero h1 { font-size: clamp(31px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -0.018em; font-weight: 700; margin-bottom: 18px; }
body.t-vaan .sc-h2 { color: var(--heading); font-weight: 700; font-size: clamp(21px, 2.8vw, 33px); letter-spacing: -0.01em; margin-bottom: 26px; }

/* THE BREATH BAND — the one block on the page with no photograph in it. A
   narrow centred column of water-white prose on bare slate, and the reason the
   gapless shelf underneath lands as hard as it does. */
body.t-vaan .sc-richtext { max-width: 620px; text-align: center; padding: 106px 20px 92px; }
body.t-vaan .sc-richtext p, body.t-vaan .sc-about-copy p { color: var(--vn-water); font-size: clamp(15.5px, 1.9vw, 17.5px); line-height: 1.95; }

/* CUT ONE — four tiles welded edge to edge, no gutter, no container and no
   heading, with the label lying on the picture. WATER-WHITE 1 of 2. */
body.t-vaan .sc-strip { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-vaan .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
body.t-vaan .sc-strip-card { position: relative; }
body.t-vaan .sc-strip-img { aspect-ratio: 4 / 5; border: 0; border-radius: 0; }
body.t-vaan .sc-strip-label { position: absolute; left: 18px; right: 18px; bottom: 20px; margin: 0; color: var(--vn-water); font-size: clamp(13px, 1.5vw, 19px); font-weight: 700; line-height: 1.2; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78); }

/* CUT TWO — the catalogue, four across in two rows that both fill. The cards
   are the only white on the page, which is what makes galvanised steel read as
   steel; OCHRE 2 of 2 is the rand figure and nothing else. */
body.t-vaan .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; padding: 6px 0 20px; }
body.t-vaan .product-card, body.t-vaan .product-card:hover { background: #ffffff; border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.t-vaan .product-card .ph { background: #ffffff; border-radius: 0; }
body.t-vaan .product-card .meta { padding: 6px 16px 22px; text-align: center; }
body.t-vaan .product-card .t { color: #17212b; font-size: 15px; font-weight: 600; line-height: 1.35; }
body.t-vaan .product-card .p { margin-top: 8px; color: var(--vn-ochre); font-weight: 700; font-size: 16px; }

/* the parallax break: full bleed, words held in the middle of a calm dawn */
body.t-vaan .sc-banner { margin: clamp(48px, 6vw, 84px) calc(50% - 50vw) 0; min-height: 66vh; }
body.t-vaan .sc-banner h2 { font-size: clamp(24px, 3.8vw, 44px); font-weight: 700; line-height: 1.12; }

/* the asymmetry arrives AFTER the goods: one tall photograph hard against the
   left half, the copy right and vertically centred, both unframed */
body.t-vaan .sc-about-split { max-width: 1080px; padding: 104px 20px 96px; gap: 56px; }
body.t-vaan .sc-about-media img { aspect-ratio: 3 / 4; border-radius: 0; }
body.t-vaan .sc-about-split .sc-h2 { text-align: left; }

/* the practical lines sit BESIDE the form rather than above it, and the message
   label says out loud which four things we need */
body.t-vaan .sc-contact-split { max-width: 1080px; padding: 96px 20px 104px; gap: 56px; }
body.t-vaan .sc-contact-split label[for="sc-msg"]::after { content: 'Farm or town, a phone number, and what you need'; font-size: 13px; }

@media (max-width: 900px) {
  body.t-vaan .sc-hero { min-height: 88vh; }
  body.t-vaan .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-vaan .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-vaan .sc-banner { min-height: 52vh; }
}

/* NIGHT — the slate drops toward black so the four gapless tiles and the dawn
   band become the only lit things left, the ochre is lifted a stop to stay
   legible against it, and the catalogue cards cool from paper white to a wash
   that no longer glares out of a dark room. */
html[data-theme="dark"] body.t-vaan {
  background: #0b1016;
  color: #a9b6c0;
  --vn-ochre: #b76c42;
  --vn-lit: #cb7d4f;
  --vn-water: #e6f1f7;
  --bg-flat: #0b1016;
  --header-bg: #0b1016;
  --surface: #111820;
  --surface-2: #172029;
  --line: #1d2731;
  --line-strong: #2f3d49;
  --heading: #eef5f9;
  --text: #a9b6c0;
  --muted: #71808b;
}
html[data-theme="dark"] body.t-vaan .sf-head, html[data-theme="dark"] body.t-vaan .sf-header,
html[data-theme="dark"] body.t-vaan .sf-foot, html[data-theme="dark"] body.t-vaan .sf-footer,
html[data-theme="dark"] body.t-vaan .sf-cats { background: #0b1016; border-color: #1d2731; }
html[data-theme="dark"] body.t-vaan .product-card, html[data-theme="dark"] body.t-vaan .product-card:hover { background: #eef2f5; }
html[data-theme="dark"] body.t-vaan .product-card .ph { background: #eef2f5; }