/* ---- skimmer (Skimmer — Pool care, pumps & covers 265) ---------------------
   THE STRUCTURAL MOVE: there is no picture-with-words-on-it hero. The hero's
   four cross-fade slides are taken out of their stack and laid as a gapless
   four-tile mosaic — one big square holding the left half two units wide by two
   tall, two small squares across the top right, a landscape spanning them
   beneath — so the block closes as a perfect square touching all four viewport
   edges. Opacity is forced on and the transition killed, which makes the
   cross-fade script inert rather than blinking a tile out. The mosaic is then
   the ONLY full-bleed moment on the page: the banner is deliberately pulled
   back inside the container, and everything after it runs down one centred
   spine. Ground is bleached deck bone, all type is pool-shadow navy, and the
   chlorine lime is kept for the eyebrow, the panel hairlines, the rule over the
   price and the ghost button. Lime is never used as text on bone — at 11px it
   comes in around 2:1 — so accent WORDS take the deeper #6f8f22 and the exact
   #9fc93c is spent on rules and fills where it actually carries. */
body.t-skimmer {
  background: #ece8de; color: #16304a;
  --surface: #ffffff; --surface-2: #f4f1ea; --line: #d8d2c4; --line-strong: #c6bfad;
  --heading: #16304a; --text: #16304a; --muted: #556c81;
  --header-bg: rgba(236, 232, 222, 0.92);
}
body.t-skimmer .sf-head, body.t-skimmer .sf-foot { background: #ece8de; border-color: #d8d2c4; }

/* the mosaic — slides stop stacking and become grid cells */
body.t-skimmer .sc-hero { min-height: 84vh; padding: 0 20px; }
body.t-skimmer .sc-hero-slides { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 0; }
body.t-skimmer .sc-hero-slide { position: relative; inset: auto; opacity: 1; transition: none; }
body.t-skimmer .sc-hero-slide:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
body.t-skimmer .sc-hero-slide:nth-child(4) { grid-column: 3 / 5; }
body.t-skimmer .sc-hero h1 { font-weight: 700; font-size: clamp(27px, 4.2vw, 48px); line-height: 1.1; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55); }
body.t-skimmer .sc-hero .btn.brand.sc-hero-ghost { border-color: #9fc93c; color: #ffffff; border-radius: 0; }
body.t-skimmer .sc-hero .btn.brand.sc-hero-ghost:hover { background: #9fc93c; color: #16304a; }

/* the reference's twin text columns: one measure, split in two on desktop */
body.t-skimmer .sc-richtext { max-width: 940px; padding: 86px 20px 62px; }
body.t-skimmer .sc-richtext .sc-h2::before { content: 'Rietfontein Road, Boksburg North'; display: block; color: #6f8f22; margin-bottom: 15px; }
body.t-skimmer .sc-richtext p { column-count: 2; column-gap: 56px; text-align: left; font-size: 15.5px; line-height: 1.85; color: #3d5266; }

/* the mosaic restacks and the twin columns fall back to one measure together */
@media (max-width: 760px) {
  body.t-skimmer .sc-hero-slides { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr 1fr; }
  body.t-skimmer .sc-hero-slide:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  body.t-skimmer .sc-hero-slide:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
  body.t-skimmer .sc-richtext p { column-count: 1; }
}

/* the one contained breather — the negative-margin full bleed is undone, because
   the mosaic is allowed to touch the edges and nothing else is */
body.t-skimmer .sc-banner { margin: 30px auto 42px; width: auto; max-width: 940px; padding: 100px 28px; }

/* squares everywhere the shared sheet rounds things */
body.t-skimmer .sc-strip-img, body.t-skimmer .sc-field input, body.t-skimmer .sc-field textarea { border-radius: 0; border-color: #d8d2c4; }
body.t-skimmer .sc-strip-label, body.t-skimmer .sc-show-cat, body.t-skimmer .sc-richtext .sc-h2::before, body.t-skimmer .sc-about-overlay p { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 700; }
body.t-skimmer .sc-show-cat { color: #6f8f22; }

/* flat-lays on pure white: the checkerboard is switched off and a chlorine
   hairline separates the panels instead */
body.t-skimmer .sc-show-item { background: #ffffff; box-shadow: inset 0 1px 0 #9fc93c; }
body.t-skimmer .sc-show-inner { align-items: flex-start; text-align: left; padding: 46px 44px 54px; min-height: 566px; }
body.t-skimmer .sc-show-rule { display: none; }
body.t-skimmer .sc-show-price { border-top: 2px solid #9fc93c; padding-top: 13px; font-weight: 700; margin: 18px 0 22px; }

/* one voice at a time over the water — a quotation, a name, nothing else */
body.t-skimmer .sc-about-overlay .sc-h2 { font-size: clamp(21px, 2.9vw, 34px); font-weight: 500; line-height: 1.42; margin-bottom: 20px; }

body.t-skimmer .sc-contact { max-width: 560px; padding: 78px 20px 72px; }
body.t-skimmer .sc-contact-form .btn { align-self: center; }
body.t-skimmer .sc-contact::after {
  content: '112 Rietfontein Road, Boksburg North\A Monday to Friday 8am–5pm · Saturday 8am–1pm · closed Sunday\A Bakkie covers Boksburg, Benoni, Bedfordview, Kempton Park and Edenvale';
  display: block; white-space: pre-line; margin-top: 38px; padding-top: 24px;
  border-top: 1px solid #9fc93c; font-size: 13.5px; line-height: 2.05; color: #3d5266;
}

body.t-skimmer .btn.brand { background: #16304a; color: #ece8de; border-radius: 0; box-shadow: none; }
body.t-skimmer .btn.brand:hover { background: #0f2439; }
body.t-skimmer .sf-cart .badge { background: #16304a; }

/* night — the same deck after the lights go on: the bone drops to the navy that
   was carrying the type all day, the white cards go to wet slate, and the lime
   lifts to #b7dc55 so it still reads as chlorine against ink */
html[data-theme="dark"] body.t-skimmer {
  background: #101c28; color: #c3cfda;
  --surface: #172735; --surface-2: #1d2f3f; --line: #26394b; --line-strong: #33495e;
  --heading: #eaf1f7; --text: #c3cfda; --muted: #8ea0b1;
  --header-bg: rgba(16, 28, 40, 0.92);
}
html[data-theme="dark"] body.t-skimmer .sf-head, html[data-theme="dark"] body.t-skimmer .sf-foot, html[data-theme="dark"] body.t-skimmer .sf-header { background: #101c28; border-color: #26394b; }
html[data-theme="dark"] body.t-skimmer .sc-richtext .sc-h2::before, html[data-theme="dark"] body.t-skimmer .sc-show-cat { color: #b7dc55; }
html[data-theme="dark"] body.t-skimmer .sc-richtext p { color: #a9b8c6; }
html[data-theme="dark"] body.t-skimmer .sc-show-item { background: #172735; box-shadow: inset 0 1px 0 #b7dc55; }
html[data-theme="dark"] body.t-skimmer .sc-show-price { border-top-color: #b7dc55; }
html[data-theme="dark"] body.t-skimmer .sc-strip-img, html[data-theme="dark"] body.t-skimmer .sc-field input, html[data-theme="dark"] body.t-skimmer .sc-field textarea { background: #172735; border-color: #26394b; }
html[data-theme="dark"] body.t-skimmer .sc-contact::after { border-top-color: #26394b; color: #a9b8c6; }
html[data-theme="dark"] body.t-skimmer .btn.brand { background: #b7dc55; color: #101c28; }
html[data-theme="dark"] body.t-skimmer .btn.brand:hover { background: #c9e87c; }
html[data-theme="dark"] body.t-skimmer .sf-cart .badge { background: #b7dc55; color: #101c28; }