/* ---- stoep (Stoep 46) — cool grey-green stone, near-black, deep petrol ------
   STRUCTURAL MOVE: twin full-viewport fixed photographs bookend the page (hero
   at the head, the closing banner at the foot carrying the biggest type on the
   whole site) with nothing between them but two tight 2x2 blocks — half-width
   category tiles whose labels live ON the picture under a wash, then the four
   products in the same 2x2 at large scale. There is no prose block anywhere. */
body.t-stoep { background: #e6e7e2; color: #171814; }
body.t-stoep .sf-head, body.t-stoep .sf-foot { background: #e6e7e2; border-color: #d2d5cc; }
/* the two bookends: both full screen, both fixed, so the page opens and closes
   on the same gesture and the photograph slides under the copy on scroll */
body.t-stoep .sc-hero, body.t-stoep .sc-banner { min-height: 100vh; background-attachment: fixed; }
/* hero copy sits a third down rather than dead centre */
body.t-stoep .sc-hero { align-items: flex-start; padding-top: 31vh; }
body.t-stoep .sc-hero h1 { font-weight: 400; font-size: clamp(34px, 6.4vw, 78px); letter-spacing: -0.025em; margin-bottom: 0; }
body.t-stoep .sc-hero p { font-size: clamp(17px, 2.2vw, 31px); }
/* the page's one repeated ornament: a petrol hairline only 5% of its container
   wide, under the hero title, under every heading and inside every product card */
body.t-stoep .sc-hero h1::after, body.t-stoep .sc-h2::after, body.t-stoep .sc-show-rule {
  content: ''; display: block; width: 5%; min-width: 44px; height: 1px;
  background: #1f5e6e; opacity: 1; margin: 30px auto;
}
body.t-stoep .sc-hero h1::after { background: rgba(255, 255, 255, 0.85); }
/* 30px of rule + 62px of margin = the 92px of air between a heading and the
   block it introduces */
body.t-stoep .sc-h2 { font-weight: 400; font-size: clamp(15px, 1.8vw, 20px); letter-spacing: 0.01em; margin: 0 0 62px; }
body.t-stoep .sc-strip, body.t-stoep .sc-showcase > .container { padding-top: 100px; padding-bottom: 0; }
/* block one: two half-width tiles over two, 22px apart so the four read as one
   block. Matched by its position after the hero — never by :nth-of-type, which
   would match the hero itself */
body.t-stoep .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: 1fr 1fr; gap: 22px; }
body.t-stoep .sc-strip-card { position: relative; display: block; }
body.t-stoep .sc-strip-label {
  position: absolute; inset: 0; margin: 0; padding: 0 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(246, 247, 243, 0.9); color: #171814;
  font-weight: 400; font-size: 15px; letter-spacing: 0.01em;
  opacity: 0; transition: opacity 0.35s ease;
}
body.t-stoep .sc-strip-card:hover .sc-strip-label { opacity: 1; }
body.t-stoep .sc-strip-img, body.t-stoep .btn.brand { border: 0; border-radius: 0; box-shadow: none; }
body.t-stoep .sc-show-price { color: #1f5e6e; font-weight: 400; font-size: clamp(24px, 2.6vw, 31px); }
/* the closer is the about — vertically middle-aligned on the full-screen photo */
body.t-stoep .sc-banner { display: flex; align-items: center; justify-content: center; margin: 100px calc(50% - 50vw) 0; }
body.t-stoep .sc-banner-inner { max-width: 940px; width: 100%; }
/* an H1 at the foot bigger than the hero's at the head */
body.t-stoep .sc-banner h2 { font-weight: 400; font-size: clamp(38px, 8vw, 98px); letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 22px; }
body.t-stoep .sc-contact-band { background: #dcded6; padding: 100px 0; }
/* the field row runs wider than every other block on the page, then it stops */
body.t-stoep .sc-contact-band-inner { max-width: 1240px; }
body.t-stoep .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 26px; align-items: end; }
body.t-stoep .sc-contact-band .btn { grid-column: 1 / -1; justify-self: center; margin-top: 20px; }
@media (max-width: 760px) {
  body.t-stoep .sc-contact-band .sc-contact-form { grid-template-columns: 1fr; }
}

/* stoep by night — the stone and the near-black swap places, the petrol lifts
   so the hairlines and the price still carry on a dark ground */
html[data-theme="dark"] body.t-stoep { background: #171814; color: #ccd0c4; }
html[data-theme="dark"] body.t-stoep .sf-head, html[data-theme="dark"] body.t-stoep .sf-foot { background: #171814; border-color: #2c2f27; }
html[data-theme="dark"] body.t-stoep .sc-h2::after, html[data-theme="dark"] body.t-stoep .sc-show-rule { background: #6fa8b6; }
html[data-theme="dark"] body.t-stoep .sc-show-cat, html[data-theme="dark"] body.t-stoep .sc-show-price { color: #6fa8b6; }
html[data-theme="dark"] body.t-stoep .sc-strip-label { background: rgba(23, 24, 20, 0.9); color: #e6e7e2; }
html[data-theme="dark"] body.t-stoep .sc-contact-band { background: #101210; }
html[data-theme="dark"] body.t-stoep .btn.brand { background: #6fa8b6; color: #171814; }