/* ---- vlam (Vlam — Bottled gas, regulators & appliances 289) -----------------
   THE STRUCTURAL MOVE: commerce arrives LATE, and the page earns it by
   starving itself of pictures first. The opening screen is the only full-bleed
   photograph the template owns — an enormous centred headline with three small
   isolated vignettes floating on the horizontal midline beneath it (the hero's
   extra slides, re-purposed out of the cross-fade stack into a scatter) and the
   CTA demoted from a slab to a bare tracked link with a down-arrow pinned at the
   bottom edge. Under it the page refuses to show another image for two whole
   beats: one display sentence alone in a narrow centred column, then a 33/66
   split whose left third is a single vast amber numeral over a short bold line
   and whose right two-thirds is one unbroken justified paragraph, the two beats
   parted by a hairline at 8% ink. Only then does a banner, a four-across
   catalogue and a lone charcoal offer band arrive. Amber is spent four times
   only — the numeral, the strip counters, the rand figure and the buttons — so
   all the warmth on the page has to come out of the photography.
   Nothing here touches the header, the nav or anything inside them; the only
   positional selectors are :first-child on identical sibling divs and
   :has(textarea) on the message field. */
body.t-vlam {
  background: #f7f6f3;
  color: #2b2f38;
  --vl-amber: #e8930c;
  --vl-amber-lit: #cf7f05;
  --vl-char: #1e2127;
  --vl-line: rgba(43, 47, 56, 0.08);
  --bg-flat: #f7f6f3;
  --header-bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #efeee9;
  --line: rgba(43, 47, 56, 0.08);
  --line-strong: rgba(43, 47, 56, 0.2);
  --heading: #2b2f38;
  --text: #2b2f38;
  --muted: #6f7480;
  --radius: 0;
  --shadow: none;
}

/* a flat paper bar carrying nothing but a hairline, and the one other charcoal
   surface on the page besides the offer band. Colour only — no item inside the
   header is moved, ordered or positioned. */
body.t-vlam .sf-head, body.t-vlam .sf-header, body.t-vlam .sf-cats {
  background: var(--bg-flat); border-color: var(--vl-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-vlam .sf-foot, body.t-vlam .sf-footer { background: var(--vl-char); border-color: rgba(255, 255, 255, 0.08); }
body.t-vlam .sf-footer, body.t-vlam .sf-footer a { color: #b6bac3; }

/* AMBER 1 of 4 — every control is a flat amber slab with no edge on it */
body.t-vlam .btn.brand { background: var(--vl-amber); border: 0; box-shadow: none; color: #1e2127; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; font-weight: 800; padding: 16px 32px; }
body.t-vlam .btn.brand:hover { background: var(--vl-amber-lit); color: #ffffff; }

/* THE ONLY FULL-BLEED PICTURE — near the whole window, headline dead centre */
body.t-vlam .sc-hero { min-height: 100vh; padding: 120px 20px; }
body.t-vlam .sc-hero h1 { font-size: clamp(36px, 7vw, 84px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; margin-bottom: 18px; }

/* THE SCATTER — the hero's extra slides stop being a cross-fade and become
   three small isolated vignettes standing on the midline under the headline.
   Opacity is forced on, so the shared fade wire toggling .on is inert here.
   Slide one repeats the section's own background, so it is dropped. */
body.t-vlam .sc-hero-slides { inset: auto 0 16%; display: flex; align-items: flex-end; justify-content: center; gap: clamp(34px, 9vw, 128px); pointer-events: none; }
body.t-vlam .sc-hero-slide { position: static; opacity: 1; transition: none; width: clamp(62px, 8vw, 112px); height: clamp(62px, 8vw, 112px); background-size: contain; background-repeat: no-repeat; background-position: center bottom; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45)); }
body.t-vlam .sc-hero-slide:first-child { display: none; }

/* the CTA is not a button on this page — it is the scroll cue at the bottom
   edge, a quiet tracked line with an arrow under it */
body.t-vlam .sc-hero .btn.brand.sc-hero-ghost,
body.t-vlam .sc-hero .btn.brand.sc-hero-ghost:hover { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); background: transparent; border: 0; box-shadow: none; padding: 0; color: rgba(255, 255, 255, 0.88); font-size: 11px; letter-spacing: 0.28em; }
body.t-vlam .sc-hero .btn.brand.sc-hero-ghost::after { content: '↓'; display: block; margin-top: 11px; font-size: 17px; letter-spacing: 0; }

body.t-vlam .sc-h2 { font-size: clamp(22px, 2.9vw, 34px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 30px; }

/* TWO TYPOGRAPHIC BEATS AND NO PHOTOGRAPH — the display sentence alone across
   the top, a hairline, then 33/66: the numeral and its line on the left, one
   unbroken justified paragraph on the right. The fourth row is empty and takes
   the paragraph's overhang so the numeral and its caption stay welded together.
   AMBER 2 of 4 is the figure. */
body.t-vlam .sc-richtext { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto auto 1fr; max-width: 1000px; padding: 122px 20px 112px; text-align: left; }
body.t-vlam .sc-richtext .sc-h2 { grid-column: 1 / -1; grid-row: 1; max-width: 20ch; margin: 0 auto 64px; text-align: center; font-size: clamp(26px, 3.8vw, 46px); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; }
body.t-vlam .sc-richtext::before { content: '92%'; grid-column: 1; grid-row: 2; padding: 30px 34px 0 0; border-top: 1px solid var(--vl-line); color: var(--vl-amber); font-size: clamp(52px, 8vw, 104px); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em; }
body.t-vlam .sc-richtext::after { content: 'of the homes on our delivery round cooked on gas through last winter’s schedule'; grid-column: 1; grid-row: 3; padding: 14px 34px 0 0; font-size: 13px; font-weight: 800; line-height: 1.5; }
body.t-vlam .sc-richtext p { grid-column: 2; grid-row: 2 / span 3; padding-top: 30px; border-top: 1px solid var(--vl-line); color: var(--text); font-size: 16.5px; line-height: 1.95; text-align: justify; }

/* THE PROGRESSION BAND — four equal columns welded together by hairlines with
   no gutter, small objects floated free on the paper rather than cropped into
   tiles, and a counter in front of each so it reads as an explanation running
   left to right instead of a row of things for sale. AMBER 3 of 4. */
body.t-vlam .sc-strip { max-width: 1180px; padding: 6px 20px 110px; counter-reset: vlam; }
body.t-vlam .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-vlam .sc-strip-card { counter-increment: vlam; text-align: left; padding: 0 clamp(16px, 2.6vw, 34px); border-left: 1px solid var(--vl-line); }
body.t-vlam .sc-strip-card::before { content: counter(vlam) '.'; display: block; margin-bottom: 16px; color: var(--vl-amber); font-size: 13px; font-weight: 800; }
body.t-vlam .sc-strip-img { border: 0; background: transparent; aspect-ratio: 4 / 3; }
body.t-vlam .sc-strip-img img { object-fit: contain; }

/* the one wide photograph after the opening screen, butted out past the column */
body.t-vlam .sc-banner { min-height: 62vh; padding: 13vh 22px 0; margin: 0 calc(50% - 50vw); }

/* commerce, arriving sixth: four across, two rows that both fill.
   AMBER 4 of 4 is the rand figure, and the category above it is held muted so
   the accent lands once per tile instead of twice. */
body.t-vlam .sc-buygrid { padding: 18px 20px 116px; }
body.t-vlam .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 28px; }
body.t-vlam .sc-buy-cat { color: var(--muted); letter-spacing: 0.18em; }
body.t-vlam .sc-buy-p { color: var(--vl-amber); font-weight: 800; font-size: 16px; }

/* the close: one charcoal band standing in for the reference's lone pricing
   box, the photograph pushed right back under it and a ribbon over the top */
body.t-vlam .sc-about-overlay { background-color: var(--vl-char); background-blend-mode: multiply; padding: 118px 20px 124px; }
body.t-vlam .sc-about-overlay::before { content: 'Special offer'; display: block; margin-bottom: 22px; text-align: center; color: var(--vl-amber); font-size: 11px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; }

/* boxed, never full-bleed: a short centred heading over a form in two equal
   columns with no gutter at all — name and email stacked left, the message
   filling the full height of the right, one slab under the pair */
body.t-vlam .sc-contact-split { grid-template-columns: 1fr; row-gap: 30px; max-width: 880px; padding: 104px 20px 112px; }
body.t-vlam .sc-contact-lead, body.t-vlam .sc-contact-lead .sc-h2 { text-align: center; }
body.t-vlam .sc-contact-split .sc-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
body.t-vlam .sc-contact-form .sc-field { border: 1px solid var(--vl-line); background: var(--surface); padding: 13px 16px 11px; margin: 0 0 -1px; }
body.t-vlam .sc-contact-form .sc-field:has(textarea) { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 -1px -1px; }
body.t-vlam .sc-field input, body.t-vlam .sc-field textarea { border: 0; background: transparent; padding: 6px 0; flex: 1; resize: none; }
body.t-vlam .sc-contact-form .btn { grid-column: 1 / -1; align-self: start; justify-self: stretch; text-align: center; }

@media (max-width: 900px) {
  body.t-vlam .sc-hero-slides { inset: auto 0 13%; gap: 24px; }
  body.t-vlam .sc-hero-slide { width: 58px; height: 58px; }
  body.t-vlam .sc-richtext { grid-template-columns: 1fr; grid-template-rows: auto; }
  body.t-vlam .sc-richtext .sc-h2, body.t-vlam .sc-richtext::before,
  body.t-vlam .sc-richtext::after, body.t-vlam .sc-richtext p { grid-column: 1; }
  body.t-vlam .sc-richtext p { grid-row: 4; padding-top: 26px; text-align: left; }
  body.t-vlam .sc-strip-row, body.t-vlam .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-vlam .sc-banner { min-height: 50vh; padding: 11vh 20px 0; }
  body.t-vlam .sc-contact-split .sc-contact-form { grid-template-columns: 1fr; }
  body.t-vlam .sc-contact-form .sc-field:has(textarea) { grid-column: 1; grid-row: auto; margin: 0 0 -1px; }
}

/* NIGHT — the paper turns to the same charcoal the offer band and the footer
   already are, so those two stop being holes and the page reads as one dark
   sheet with the hero and the banner as its only lit surfaces. The amber is
   lifted a stop to hold the numeral and the rand figures against it, and the
   hairlines move to 10% of the light instead of 8% of the ink. The header and
   footer rules above take their colour from these tokens, so nothing else has
   to be restated. */
html[data-theme="dark"] body.t-vlam {
  background: #16181c;
  color: #cbcfd6;
  --vl-amber: #f5a423;
  --vl-amber-lit: #ffb949;
  --vl-char: #101216;
  --vl-line: rgba(255, 255, 255, 0.1);
  --bg-flat: #16181c;
  --header-bg: #16181c;
  --surface: #1e2127;
  --surface-2: #252931;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);
  --heading: #f4f4f2;
  --text: #cbcfd6;
  --muted: #878d99;
}