/* ---- klipkop (Klipkop — Self-catering cottage 89) — chalk whitewash, near-black
   ink and one oxide stoep-red, the colour of the polish on every farm veranda in
   the country. The red is never a field: it appears only on the six feature icons,
   the amenity bullets and the hairline over each quote.
   THE STRUCTURAL MOVE: the hero is a CONTAINED banner, not a full-viewport stage —
   it sits inside the page margin with chalk showing on all four sides and is short
   enough that the icon ledge peeps above the fold. That single decision is what
   stops the page reading as a generic full-bleed template. Everything else holds
   one centre axis: the zebra tint is switched off so the ground never alternates,
   the quotes band steps half a tone warmer to separate itself, and the 3x2 photo
   wall is the only block allowed past the text column. ---- */
body.t-klipkop.ws-body { --bg: #f7f5f1; --fg: #4a463f; --heading: #141412; --text: #4a463f; --muted: #8b8579; }
body.t-klipkop .ws-nav { background: #f7f5f1; backdrop-filter: none; border-bottom: 1px solid #e3ded4; }
body.t-klipkop .ws-brand { text-transform: uppercase; letter-spacing: 0.28em; font-size: 13px; font-weight: 700; }
/* the last link is the solid booking slab pinned to the end of the bar */
body.t-klipkop .ws-nav-links a:last-child, body.t-klipkop .ws-nav-links a:last-child:hover { background: #141412; color: #f7f5f1; padding: 9px 17px; opacity: 1; border-bottom: 0; }
/* contained banner: page margin on all four sides, short enough to show the ledge */
body.t-klipkop .ws-hero { min-height: 46vh; max-width: 1240px; width: calc(100% - 44px); margin: 26px auto 0; --hero-a: rgba(18, 17, 15, 0.24); --hero-b: rgba(18, 17, 15, 0.56); }
body.t-klipkop .ws-hero-inner { padding: clamp(58px, 9vw, 100px) 22px; }
body.t-klipkop.ws-body .ws-hero h1 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; letter-spacing: -0.02em; max-width: 20ch; }
/* one action on the page, so the hero button and the form button are one slab */
body.t-klipkop.ws-body .ws-hero-cta.btn.brand, body.t-klipkop.ws-body .ws-contact .btn.brand { background: #141412; color: #f7f5f1; border-radius: 0; box-shadow: none; padding: 14px 30px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
/* no zebra — one chalk ground the whole way down, warmed once under the quotes */
body.t-klipkop.ws-body .ws-section:not(.ws-cta) { background: transparent; padding: 86px 0; }
body.t-klipkop.ws-body .ws-section.ws-testimonials { background: #efe9e0; }
body.t-klipkop .ws-h2 { font-size: clamp(19px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.01em; color: var(--heading); margin-bottom: 38px; }
body.t-klipkop .ws-features-grid { grid-template-columns: repeat(3, 1fr); gap: 50px 40px; }
body.t-klipkop .ws-feature-icon { color: #8a3b2c; margin-bottom: 14px; }
body.t-klipkop .ws-feature-icon .ws-ico { width: 27px; height: 27px; }
/* the photo wall is the only block that outruns the text column */
body.t-klipkop .ws-gallery .ws-container { max-width: 1440px; padding: 0 14px; }
body.t-klipkop .ws-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
body.t-klipkop .ws-gallery-item img { aspect-ratio: 4 / 3; border-radius: 0; }
body.t-klipkop .ws-gallery-cap strong { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: #141412; }
body.t-klipkop .ws-testimonials-grid { grid-template-columns: repeat(4, 1fr); gap: 34px; }
body.t-klipkop .ws-quote { background: transparent; border: 0; border-top: 1px solid #8a3b2c; border-radius: 0; box-shadow: none; padding: 18px 0 0; text-align: center; }
body.t-klipkop .ws-quote blockquote::before { content: none; }
body.t-klipkop .ws-video .ws-narrow { max-width: 940px; }
body.t-klipkop .ws-video-frame { border-radius: 0; box-shadow: none; }
/* the dry block: two columns of plain labels, oxide bullets, no photographs */
body.t-klipkop .ws-list-bullet { columns: 2; column-gap: 54px; padding-left: 20px; }
body.t-klipkop .ws-list-bullet li { font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; break-inside: avoid; }
body.t-klipkop .ws-list-bullet li::marker { color: #8a3b2c; }
body.t-klipkop.ws-body .ws-cta { background: #141412; padding: 74px 0; }
body.t-klipkop.ws-body .ws-cta .btn.brand { background: #f7f5f1; color: #141412; border-radius: 0; padding: 14px 30px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
body.t-klipkop .ws-contact .ws-form { max-width: 460px; }
body.t-klipkop .ws-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--muted); }
body.t-klipkop .ws-field input, body.t-klipkop .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid #d9d2c5; border-radius: 0; padding: 11px 0; color: #141412; }
@media (max-width: 860px) {
  body.t-klipkop .ws-features-grid, body.t-klipkop .ws-gallery-grid, body.t-klipkop .ws-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-klipkop .ws-list-bullet { columns: 1; }
}

html[data-theme="dark"] body.t-klipkop.ws-body { --bg: #14130f; --fg: #a9a49a; --heading: #f2efe8; --text: #a9a49a; --muted: #7d786d; }
html[data-theme="dark"] body.t-klipkop { background: #14130f; }
html[data-theme="dark"] body.t-klipkop .ws-nav { background: #14130f; border-bottom-color: #2a2820; }
html[data-theme="dark"] body.t-klipkop .ws-nav-links a:last-child, html[data-theme="dark"] body.t-klipkop .ws-nav-links a:last-child:hover { background: #f2efe8; color: #14130f; }
html[data-theme="dark"] body.t-klipkop.ws-body .ws-section.ws-testimonials { background: #1c1a15; }
html[data-theme="dark"] body.t-klipkop .ws-feature-icon, html[data-theme="dark"] body.t-klipkop .ws-list-bullet li::marker { color: #c4644f; }
html[data-theme="dark"] body.t-klipkop .ws-quote { border-top-color: #c4644f; }
html[data-theme="dark"] body.t-klipkop .ws-gallery-cap strong { color: #f2efe8; }
html[data-theme="dark"] body.t-klipkop .ws-field input, html[data-theme="dark"] body.t-klipkop .ws-field textarea { border-bottom-color: #322f26; color: #f2efe8; }
html[data-theme="dark"] body.t-klipkop.ws-body .ws-cta { background: #0b0a07; }
html[data-theme="dark"] body.t-klipkop.ws-body .ws-hero-cta.btn.brand, html[data-theme="dark"] body.t-klipkop.ws-body .ws-contact .btn.brand { background: #f2efe8; color: #14130f; }