/* ---- stopcock (Stopcock — Plumbing & water works 108) — bone counter, wet
   slate ink, oxidised brass -------------------------------------------------
   THE STRUCTURAL MOVE: the page is bone white from the header all the way down
   and then closes DARK TWICE. The banner is washed deep slate over its
   photograph by an inset shadow and its bottom margin is taken to zero, so the
   contact band lands straight onto it with no seam, no rule and no white
   between them — the two read as one painted foot under a page that never went
   dark once above it. Nothing else bleeds: strip and catalogue both stay inside
   the container, and the row count changes on every single block (1 slide → 4
   gapless tiles → 8 priced tiles → 1 narrow column), which is the reference's
   whole rhythm. Brass is the only warm colour anywhere and it is rationed to
   the buy slab, the tile labels and the category line; body copy stays slate so
   a parts list reads as a parts list. */
body.t-stopcock {
  background: #f0f2f1;
  color: #171c1f;
  --radius: 0;
  --header-bg: #f0f2f1;
  --surface: #ffffff;
  --surface-2: #e3e7e6;
  --line: #d5d9d8;
  --line-strong: #bcc2c1;
  --heading: #171c1f;
  --text: #171c1f;
  --muted: #5b6367;
  --sc-slate: #1b2226;
  --sc-brass: #8a6a26;
}
body.t-stopcock .sf-head, body.t-stopcock .sf-foot, body.t-stopcock .sf-footer { background: #f0f2f1; border-color: #d5d9d8; }
body.t-stopcock .btn.brand { background: var(--sc-brass); border-color: var(--sc-brass); color: #f7f4ee; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 15px 30px; }
body.t-stopcock .btn.brand:hover { background: #6e551d; opacity: 1; }

/* the opener holds the whole first screen, three slides crossing behind it,
   and every word sits hard against the container's left edge */
body.t-stopcock .sc-hero { min-height: 100vh; }
body.t-stopcock .sc-hero h1 { font-weight: 700; font-size: clamp(32px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -0.02em; max-width: 15ch; }
body.t-stopcock .sc-h2 { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; font-size: clamp(12px, 1.5vw, 14px); }

/* four flush tiles on bare white — no gutter, no border, no radius, so the
   shelves butt against one another the way they do behind the counter */
body.t-stopcock .sc-strip { padding: 78px 20px 12px; }
body.t-stopcock .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-stopcock .sc-strip-img { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
body.t-stopcock .sc-strip-label, body.t-stopcock .sc-buy-cat { color: var(--sc-brass); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 700; }

/* eight priced tiles, four across, two rows that fill — set left so the sizes
   and the pressures stack down the column like a price list */
body.t-stopcock .sc-buygrid { padding: 72px 20px 78px; }
body.t-stopcock .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; }
body.t-stopcock .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-stopcock .sc-buy-media img { aspect-ratio: 1; }
body.t-stopcock .sc-buy-p { color: var(--heading); font-weight: 700; font-size: 15px; }

/* the quietest block on the page: one narrow column, no photograph at all, and
   more empty margin either side than anywhere else */
body.t-stopcock .sc-richtext { max-width: 560px; padding: 96px 20px 92px; }
body.t-stopcock .sc-richtext p { font-size: 16.5px; line-height: 1.85; }

/* THE WELD — the banner is painted slate and loses its bottom margin, so the
   contact band sits directly on it and the page finishes on two dark bands */
body.t-stopcock .sc-banner { margin: 0 calc(50% - 50vw); min-height: 52vh; display: flex; align-items: center; box-shadow: inset 0 0 0 100vw rgba(27, 34, 38, 0.58); }
body.t-stopcock .sc-contact-band { background: var(--sc-slate); padding: 88px 0 96px; }
body.t-stopcock .sc-contact-band .sc-h2, body.t-stopcock .sc-contact-band .sc-contact-sub, body.t-stopcock .sc-contact-band .sc-field label { color: #eef1f0; }
body.t-stopcock .sc-contact-band .sc-field input, body.t-stopcock .sc-contact-band .sc-field textarea { background: #232c31; border-color: #333f45; color: #eef1f0; }
@media (max-width: 900px) {
  body.t-stopcock .sc-strip-row, body.t-stopcock .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-stopcock .sc-hero { min-height: 86vh; }
}

/* NIGHT — the counter after hours. The bone ground drops to wet slate and the
   two closing bands go a step darker still, so the page still ends darker than
   it started and the weld survives. The brass has to lift to a polished tone:
   #8a6a26 on a near-black ground stops reading as metal and reads as dirt. */
html[data-theme="dark"] body.t-stopcock {
  background: #12171a;
  color: #c2cacd;
  --header-bg: #12171a;
  --surface: #192024;
  --surface-2: #1f272b;
  --line: #293337;
  --line-strong: #3a464b;
  --heading: #edf1f2;
  --text: #c2cacd;
  --muted: #8a949a;
  --sc-slate: #0c1114;
  --sc-brass: #c8a052;
}
html[data-theme="dark"] body.t-stopcock .sf-head, html[data-theme="dark"] body.t-stopcock .sf-foot,
html[data-theme="dark"] body.t-stopcock .sf-footer { background: #12171a; border-color: #293337; }
html[data-theme="dark"] body.t-stopcock .btn.brand { background: var(--sc-brass); border-color: var(--sc-brass); color: #12171a; }
html[data-theme="dark"] body.t-stopcock .btn.brand:hover { background: #dcb668; }
html[data-theme="dark"] body.t-stopcock .sc-banner { box-shadow: inset 0 0 0 100vw rgba(8, 12, 14, 0.66); }
html[data-theme="dark"] body.t-stopcock .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-stopcock .sc-contact-band .sc-field textarea { background: #192024; border-color: #293337; color: #edf1f2; }