/* ---- skoppel (Skoppelmaai — Childminding & aftercare 115) ------------------
   THE STRUCTURAL MOVE: one chalk-paper ground runs the whole way down with the
   alternating band wash switched off, so nothing on the page ever changes
   colour — and the four-icon row is welded flush to the bottom edge of a
   full-viewport hero with no band between them: .ws-features gives up its top
   padding entirely and the glyph cells carry it instead, so the icons simply
   begin where the photograph stops. Because the ground never breaks, the single
   filled price card is the only saturated block on the entire page. Purple is
   spent on four jobs and no others: the four glyphs, the hairline under the
   nav, the rule over each price card, and the buttons. The contact block is
   flexed into a column so the phone line can sit BENEATH the form instead of
   above it. :nth-child(3) on .ws-plan is safe because every sibling inside
   .ws-pricing-grid is a .ws-plan; no :nth-of-type is used anywhere, since the
   hero is always the first section element. */
body.t-skoppel.ws-body {
  --bg: #faf7f2; --fg: #1a1817; --heading: #1a1817; --text: #3d3833; --muted: #857d74;
  --sk-purple: #6b5b95; --sk-fill: #6b5b95; --sk-line: #e5ded2;
  --hero-a: rgba(26, 20, 14, .22); --hero-b: rgba(26, 20, 14, .56);
}
body.t-skoppel, html[data-theme="dark"] body.t-skoppel { background: var(--bg); }

/* a plain bar that leaves with the page — not sticky, no button, one hairline */
body.t-skoppel .ws-nav { position: static; background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--sk-purple); }

/* one photograph, the whole viewport, the phone number sitting under the words */
body.t-skoppel .ws-hero { min-height: calc(100vh - 62px); }
body.t-skoppel .ws-hero h1 { font-size: clamp(40px, 7.4vw, 84px); font-weight: 700; letter-spacing: -.04em; line-height: 1; max-width: 14ch; text-shadow: 0 2px 24px rgba(20, 16, 12, .34); }
body.t-skoppel.ws-body .btn.brand, body.t-skoppel.ws-body .ws-hero-cta.btn.brand { background: var(--sk-fill); color: #faf7f2; border: 0; border-radius: 0; box-shadow: none; padding: 15px 30px; font-size: 13.5px; font-weight: 650; letter-spacing: .05em; }

/* tall air between blocks, and the alternating wash off so the chalk is unbroken */
body.t-skoppel .ws-section { padding: 94px 0; }
body.t-skoppel.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-skoppel .ws-sub, body.t-skoppel .ws-feature p, body.t-skoppel .ws-member p, body.t-skoppel .ws-richtext p, body.t-skoppel .ws-quote blockquote, body.t-skoppel .ws-faq-item p, body.t-skoppel .ws-plan li { color: var(--text); }

/* THE WELD — no top padding at all, so the glyph row starts where the photo ends */
body.t-skoppel .ws-features { padding: 0 0 98px; }
body.t-skoppel .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-skoppel .ws-feature { text-align: left; padding: 46px 32px 0 0; }
body.t-skoppel .ws-feature-icon { color: var(--sk-purple); margin-bottom: 15px; }

/* the about band is type only, on a narrower measure than anything else */
body.t-skoppel .ws-richtext .ws-narrow { max-width: 610px; text-align: center; }

/* quotes are plain type on the same ground — no card, no shadow, no glyph */
body.t-skoppel .ws-quote { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
body.t-skoppel .ws-quote blockquote::before { content: none; }

/* four plans, gapless, ruled in purple — and one of them fills solid */
body.t-skoppel .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 1120px; }
body.t-skoppel .ws-plan { background: transparent; border: 0; border-top: 2px solid var(--sk-purple); border-radius: 0; text-align: left; padding: 18px 28px 30px 0; }
body.t-skoppel .ws-pricing-grid .ws-plan:nth-child(3) { background: var(--sk-fill); border-top-color: var(--sk-fill); padding-left: 28px; }
body.t-skoppel .ws-pricing-grid .ws-plan:nth-child(3) h3, body.t-skoppel .ws-pricing-grid .ws-plan:nth-child(3) .ws-plan-price, body.t-skoppel .ws-pricing-grid .ws-plan:nth-child(3) .ws-plan-period, body.t-skoppel .ws-pricing-grid .ws-plan:nth-child(3) li, body.t-skoppel .ws-pricing-grid .ws-plan:nth-child(3) li::before { color: #faf7f2; }
body.t-skoppel.ws-body .ws-pricing-grid .ws-plan:nth-child(3) .btn.brand { background: #faf7f2; color: #3b3157; }

body.t-skoppel .ws-faq-item { border-bottom: 1px solid var(--sk-line); }

/* the phone line repeats once BELOW the form, which source order puts above it */
body.t-skoppel .ws-contact .ws-narrow { display: flex; flex-direction: column; }
body.t-skoppel .ws-contact .ws-sub { order: 2; margin: 32px 0 0; color: var(--heading); font-weight: 650; }
body.t-skoppel .ws-field input, body.t-skoppel .ws-field textarea, body.t-skoppel .ws-field select { background: transparent; border: 0; border-bottom: 1px solid var(--sk-line); border-radius: 0; color: var(--heading); padding: 11px 2px; }

/* both four-up rows fold to two-up, so each still fills its rows */
@media (max-width: 860px) {
  body.t-skoppel .ws-features-grid, body.t-skoppel .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-skoppel .ws-feature { padding-right: 20px; }
  body.t-skoppel .ws-hero h1 { font-size: clamp(34px, 10vw, 54px); }
}

/* night — the same one hue, split in two: the glyph purple lifts so it reads on
   near-black, the fill stays deep enough to keep cream type legible on it */
html[data-theme="dark"] body.t-skoppel.ws-body {
  --bg: #16140f; --fg: #efe9df; --heading: #f6f1e8; --text: #b9b1a5; --muted: #8b8377;
  --sk-purple: #a99bdc; --sk-fill: #6d5ea3; --sk-line: #2b2721;
  --hero-a: rgba(10, 8, 6, .28); --hero-b: rgba(10, 8, 6, .62);
}