/* ---------- Kloof — gorge swing & kloofing runs (website) --------------------
   THE ONE STRUCTURAL MOVE: this page never clamps. `.ws-container` gives up its
   1120px and keeps only a bezel pad, so every band — hero, both story plates,
   the six tiles, the closing strip — runs the full width of the glass. The
   rhythm is one shape repeated: a copy block that never takes more than half
   the screen, with the other half left as bare photograph on purpose. Colour is
   left to the pictures; harness orange lands on the hero button, the mid-page
   button and the submit button, and on nothing else.
   Nothing here touches .sf-header / .ws-nav / .ws-nav-inner / .ws-brand or any
   item inside them — no order, no absolute positioning, no nth-of-type. */
body.t-kloof.ws-body {
  --bg: #0e1113; --fg: #c3bfb7; --heading: #f2efe9; --text: #b0aca4; --muted: #82807a;
  --kl-orange: #ff4d1a; --kl-line: #23292c; --kl-field: #14181a; --kl-strip: #07090a;
  --hero-a: rgba(7, 9, 10, .20); --hero-b: rgba(7, 9, 10, .56);
}

/* the clamp is removed here and nowhere restored — this line is the template */
body.t-kloof .ws-container { max-width: none; padding: 0 clamp(22px, 6vw, 96px); }
body.t-kloof.ws-body .ws-section:not(.ws-cta) { padding: 0; background: transparent; }

/* one whole screen of photograph, four plates cross-fading; the words stand in
   the left 47% and the right of every frame is left empty */
body.t-kloof .ws-hero { min-height: 100vh; }
body.t-kloof .ws-hero-inner { max-width: none; padding: 0 clamp(22px, 6vw, 96px); }
body.t-kloof.ws-body .ws-hero h1 { white-space: pre-line; max-width: 47vw; font-size: clamp(40px, 5.8vw, 86px); font-weight: 700; line-height: .92; letter-spacing: -.045em; margin: 0 0 20px; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
body.t-kloof.ws-body .ws-hero p { max-width: 34ch; color: rgba(242, 239, 233, .88); font-size: 16.5px; line-height: 1.6; margin: 0 0 32px; }

/* the accent, all three of it */
body.t-kloof.ws-body .ws-hero-cta.btn.brand, body.t-kloof.ws-body .ws-cta .btn.brand, body.t-kloof.ws-body .ws-contact .btn.brand { background: var(--kl-orange); color: #140501; border-radius: 0; box-shadow: none; padding: 17px 40px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
body.t-kloof.ws-body .ws-hero-cta.btn.brand:hover, body.t-kloof.ws-body .ws-cta .btn.brand:hover, body.t-kloof.ws-body .ws-contact .btn.brand:hover { background: #ff6b3d; }

/* the two telling bands: photograph flush to the bezel, copy in the other half,
   left then right, so the page zig-zags without a second layout idea */
body.t-kloof .ws-story > .ws-container { padding: 0; }
body.t-kloof .ws-story-grid { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
body.t-kloof .ws-story-media img { border-radius: 0; aspect-ratio: auto; height: 100%; min-height: 76vh; object-fit: cover; }
body.t-kloof .ws-story-copy { display: grid; align-content: center; padding: clamp(56px, 8vw, 112px) clamp(22px, 5vw, 88px); }
body.t-kloof .ws-story-copy h2, body.t-kloof .ws-cta-inner h2, body.t-kloof .ws-contact .ws-h2 { color: var(--heading); font-size: clamp(28px, 3.9vw, 56px); font-weight: 700; letter-spacing: -.04em; line-height: 1; text-align: left; margin: 0 0 22px; max-width: 15ch; }
body.t-kloof .ws-story-copy p { color: var(--text); font-size: 16px; line-height: 1.9; max-width: 42ch; }

/* the darkest plate carries one line and one button, still under half the width */
body.t-kloof.ws-body .ws-section.ws-cta { background: linear-gradient(rgba(6, 8, 9, .52), rgba(6, 8, 9, .74)), url("/media/samples/klf_hero_night.jpg") center / cover fixed; color: var(--heading); padding: clamp(120px, 22vh, 220px) 0; }
body.t-kloof .ws-cta-inner { max-width: none; text-align: left; }

/* six tiles, no gap, no captions — a wall of pictures, not a gallery */
body.t-kloof .ws-photogrid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-kloof .ws-photogrid-grid img { aspect-ratio: 4 / 3; }

/* the only moment on the page with no photograph behind it */
body.t-kloof.ws-body .ws-quoteblock { padding: clamp(96px, 16vh, 180px) 0; text-align: left; }
body.t-kloof .ws-quote-t { font-style: normal; font-weight: 700; font-size: clamp(24px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -.04em; color: var(--heading); max-width: 22ch; margin: 0 0 20px; }
body.t-kloof .ws-quote-a, body.t-kloof .ws-field label { color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; }

/* the closing lip: darker than the page, a heading, five plain lines, five fields */
body.t-kloof.ws-body .ws-section.ws-contact { background: var(--kl-strip); padding: clamp(84px, 13vh, 140px) 0; }
body.t-kloof .ws-contact .ws-sub { text-align: left; max-width: 48ch; margin: 0 0 38px; white-space: pre-line; color: var(--muted); font-size: 14px; line-height: 2.05; }
body.t-kloof .ws-contact .ws-form { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
body.t-kloof .ws-contact .ws-field:has(select), body.t-kloof .ws-contact .ws-form .btn.brand { grid-column: 1 / -1; justify-self: start; width: 100%; }
body.t-kloof .ws-contact .ws-form .btn.brand { width: auto; }
body.t-kloof .ws-field input, body.t-kloof .ws-field select { background: var(--kl-field); border: 1px solid var(--kl-line); border-radius: 0; color: var(--heading); }

/* every band folds and every count still fills its rows: 3x2 → 2x3 → 1x6 */
@media (max-width: 980px) {
  body.t-kloof .ws-story-grid, body.t-kloof .ws-contact .ws-form { grid-template-columns: 1fr; }
  body.t-kloof .ws-story-media img { min-height: 54vh; }
  body.t-kloof .ws-photogrid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kloof.ws-body .ws-hero h1 { max-width: 100%; }
  body.t-kloof.ws-body .ws-section.ws-cta { background-attachment: scroll; }
}
@media (max-width: 620px) { body.t-kloof .ws-photogrid-grid { grid-template-columns: 1fr; } }

/* night — the slate drops to river-bottom black, the type cools off the bone,
   the closing strip goes further down still so it stays the darkest surface,
   and the orange lifts a shade so it still reads as the only colour */
html[data-theme="dark"] body.t-kloof.ws-body {
  --bg: #06080a; --fg: #a8a49c; --heading: #e8e4dc; --text: #99958e; --muted: #6e6c67;
  --kl-orange: #ff5c2b; --kl-line: #1a2023; --kl-field: #0d1113; --kl-strip: #010203;
  --hero-a: rgba(2, 3, 4, .26); --hero-b: rgba(2, 3, 4, .64);
}