/* ============================================================================
   BRIDGES 131-150 — thirteen stores and seven websites.
   ==========================================================================*/
/* ---- cistern (Cistern — Rainwater tanks & catchment 150) — wet-concrete grey,
   gunmetal ink, one verdigris teal -------------------------------------------
   THE STRUCTURAL MOVE: the reference's four-column achievement counter survives
   as PHOTOGRAPHS. Four close-ups are welded flush onto the floor of the
   three-slide stage — no gap band above them, no gutter between them — and each
   carries a FIGURE set large in tabular numerals on a painted concrete bar,
   instead of the micro-caps category word a strip normally gets. That weld is
   the only gapless thing on the page; everything under it retreats into the
   bone container until the concrete band closes it. Verdigris is the control
   colour and the figure colour and nothing else — category labels are held to
   grey on purpose so the price is the only other coloured thing in a tile, and
   the submit on the concrete band goes bone rather than teal, which would sink
   into the ground it sits on. The six-up wall is targeted through
   `.sc-about-split + .sc-strip`, because the split richtext ahead of it renders
   as .sc-about-split and never as .sc-strip's own element type. */
body.t-cistern {
  background: #eef0ee;
  color: #262d2f;
  --cs-teal: #0f6b6b;
  --cs-figure: #7fc8c1;
  --cs-concrete: #4e5857;
  --radius: 0;
  --shadow: none;
  --header-bg: #eef0ee;
  --surface: #fbfbf9;
  --surface-2: #dfe3e1;
  --line: #cdd3d1;
  --line-strong: #b0b8b6;
  --heading: #1b2224;
  --text: #262d2f;
  --muted: #636d6c;
}

/* a flat menu strip on the container — nothing floats and nothing inverts over
   the stage, so the photograph starts underneath the bar rather than behind it */
body.t-cistern .sf-head, body.t-cistern .sf-header,
body.t-cistern .sf-foot, body.t-cistern .sf-footer, body.t-cistern .sf-cats {
  background: #eef0ee; border-color: #cdd3d1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-cistern .btn.brand { background: var(--cs-teal); border: 0; color: #f1f6f5; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 11.5px; padding: 16px 32px; }

/* the stage: three slides, the whole first screen, copy held to the left third */
body.t-cistern .sc-hero { min-height: 100vh; padding: 92px max(24px, calc(50vw - 560px)); }
body.t-cistern .sc-hero-left .sc-hero-inner { max-width: 520px; }
body.t-cistern .sc-hero h1 { font-weight: 800; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.03; letter-spacing: -0.03em; }

/* THE WELD — the counter row fused to the floor of the stage. The strip gives up
   its container, its padding and its gutters, and the label becomes a painted
   concrete bar carrying a number rather than a category word. */
body.t-cistern .sc-hero + .sc-strip { max-width: none; width: 100%; margin: 0; padding: 0; }
body.t-cistern .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-cistern .sc-hero + .sc-strip .sc-strip-img { aspect-ratio: 16 / 11; border: 0; }
body.t-cistern .sc-hero + .sc-strip .sc-strip-label { margin: 0; padding: 20px 22px 24px; background: var(--cs-concrete); color: var(--cs-figure); text-align: left; font-size: clamp(14px, 1.5vw, 19px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* PROSE, TWICE, BACK TO BACK — the bare centred statement carries more air than
   anything else on the page, and the split follows it with no band in between.
   Only the centred richtext holds .sc-richtext; the split one renders as
   .sc-about-split, so neither needs an element-type selector. */
body.t-cistern .sc-richtext { max-width: 700px; padding: 116px 20px 76px; }
body.t-cistern .sc-richtext p, body.t-cistern .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.95; }
body.t-cistern .sc-about-split { padding: 0 20px 92px; gap: 56px; }
body.t-cistern .sc-about-media img { aspect-ratio: 4 / 5; object-fit: cover; }

/* THE SIX-UP WALL — mid-page, and gapped in every direction, which is the point:
   it is the weld's opposite and it sits nowhere near the hero. */
body.t-cistern .sc-about-split + .sc-strip { padding: 0 20px 88px; }
body.t-cistern .sc-about-split + .sc-strip .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
body.t-cistern .sc-about-split + .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; }

/* TWO WALLS, ONE BANNER BETWEEN THEM — six half-width panels two across above,
   six priced cards three across below. Both counts fill their rows. */
body.t-cistern .sc-show-grid { gap: 18px; }
body.t-cistern .sc-show-item, body.t-cistern .sc-show-item:nth-child(4n + 2),
body.t-cistern .sc-show-item:nth-child(4n + 3) { background: var(--surface); border-left: 3px solid var(--cs-concrete); }
body.t-cistern .sc-show-cat, body.t-cistern .sc-buy-cat { color: var(--muted); }
body.t-cistern .sc-show-price, body.t-cistern .sc-buy-p { color: var(--cs-teal); font-weight: 700; font-variant-numeric: tabular-nums; }
body.t-cistern .sc-banner { margin: 56px calc(50% - 50vw) 64px; min-height: 54vh; display: flex; align-items: center; justify-content: center; }
body.t-cistern .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; }

/* the page closes on one unbroken painted band. The form tokens are re-pointed
   inside it so the inputs sit on wet concrete instead of on bone. */
body.t-cistern .sc-contact-band { background: var(--cs-concrete); color: #eef0ee; margin-top: 60px; padding: 88px 0 96px; --muted: #bcc5c4; --surface: #3f4a49; --line: #67716f; }
body.t-cistern .sc-contact-band .btn.brand { background: #eef0ee; color: #1b2224; }

@media (max-width: 900px) {
  body.t-cistern .sc-hero { min-height: 84vh; }
  body.t-cistern .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-cistern .sc-about-split + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-cistern .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.t-cistern .sc-about-split + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the yard after dark. Bone goes to wet slate, the concrete darkens with
   it so the weld and the closing band stay a shade off the ground rather than
   merging into it, and the verdigris lifts two steps: #0f6b6b was picked to hold
   against a bone container and goes to mud on a near-black one, so at night the
   slab takes dark type instead of light. The figure tint stays exactly where it
   is — it was chosen against painted concrete, and the concrete moved with the
   ground, so that relationship holds without touching it. */
html[data-theme="dark"] body.t-cistern {
  background: #13181a;
  color: #b3bebd;
  --cs-teal: #2f9d97;
  --cs-concrete: #262f30;
  --header-bg: #13181a;
  --surface: #1a2123;
  --surface-2: #202a2b;
  --line: #2c3537;
  --line-strong: #3d494b;
  --heading: #eef2f1;
  --text: #b3bebd;
  --muted: #7f8b8a;
}
html[data-theme="dark"] body.t-cistern .sf-head, html[data-theme="dark"] body.t-cistern .sf-header,
html[data-theme="dark"] body.t-cistern .sf-foot, html[data-theme="dark"] body.t-cistern .sf-footer,
html[data-theme="dark"] body.t-cistern .sf-cats { background: #13181a; border-color: #2c3537; }
html[data-theme="dark"] body.t-cistern .btn.brand { color: #0d1a19; }
html[data-theme="dark"] body.t-cistern .sc-contact-band { --muted: #9aa5a4; --surface: #313c3d; --line: #4a5658; }
html[data-theme="dark"] body.t-cistern .sc-contact-band .btn.brand { background: #eef2f1; color: #13181a; }