/* ---- kuier (Kuier — Multi-code sports club & clubhouse 348) -----------------
   THE STRUCTURAL MOVE: the reference is a two-column vertical split slider, so
   nothing here is a contained centred column — ONE rule opens every heading,
   sub, tile, plan grid and form to the page, every band runs edge to edge at
   7vw, and the two story photographs are pressed hard against opposite page
   edges with a narrow measure of chalk type standing against the other: the
   split frozen into scroll. The counter row welds onto the same field-green
   slab as the story above it, carrying bare river-sand numerals with no bar and
   no animation. Green #1f4d3f, chalk and sand, flat — the photographs do the
   rest, exactly as they do in the reference. */
body.t-kuier.ws-body {
  --bg: #ffffff; --fg: #14181a; --heading: #14181a; --text: #14181a; --muted: #6d746e;
  --ku-green: #1f4d3f; --ku-sand: #d9c6a3; --ku-chalk: #f4f1e8; --ku-line: #e2dacb;
  --hero-a: rgba(12, 24, 19, .14); --hero-b: rgba(12, 24, 19, .62);
  background: var(--bg);
}

/* the opener — a whole viewport of green with the copy held left at the page edge */
body.t-kuier .ws-hero { min-height: 100vh; }
body.t-kuier .ws-hero-inner { max-width: none; padding: 0 7vw; }

/* flat green slabs; the one ghost is sand, drawn with an inset, never a border */
body.t-kuier.ws-body .btn.brand { background: var(--brand); color: var(--ku-chalk); border: 0; border-radius: 0; box-shadow: none; padding: 16px 34px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
body.t-kuier.ws-body .ws-cta .btn.brand { background: transparent; color: var(--ku-sand); box-shadow: inset 0 0 0 1px var(--ku-sand); }

/* every band edge to edge — and the shared zebra tint killed at its own weight */
body.t-kuier .ws-section, body.t-kuier .ws-section:nth-child(even):not(.ws-cta) { padding: 88px 0; background: var(--bg); }
body.t-kuier .ws-section > .ws-container { max-width: none; padding: 0 7vw; }

/* NOTHING IS CENTRED AND NOTHING IS CONTAINED — the reference in a single rule */
body.t-kuier .ws-h2, body.t-kuier .ws-sub, body.t-kuier .ws-feature, body.t-kuier .ws-plan, body.t-kuier .ws-pricing-grid, body.t-kuier .ws-cta-inner, body.t-kuier .ws-form { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
body.t-kuier .ws-h2::before, body.t-kuier .ws-story-copy h2::before, body.t-kuier .ws-cta-inner h2::before { content: ''; display: block; width: 34px; height: 3px; margin: 0 0 18px; background: var(--ku-sand); }
body.t-kuier .ws-sub, body.t-kuier .ws-feature p, body.t-kuier .ws-plan li, body.t-kuier .ws-faq-item p, body.t-kuier .ws-col p { color: var(--muted); }

/* THE FROZEN SPLIT — photograph hard against a page edge, chalk type against the other */
body.t-kuier.ws-body .ws-section.ws-story, body.t-kuier.ws-body .ws-section.ws-contact { background: var(--ku-green); color: var(--ku-chalk); }
body.t-kuier.ws-body .ws-section.ws-story, body.t-kuier.ws-body .ws-section.ws-photogrid, body.t-kuier.ws-body .ws-section.ws-video { padding: 0; }
body.t-kuier .ws-story > .ws-container, body.t-kuier .ws-video > .ws-container { padding: 0; gap: 0; align-items: stretch; }
body.t-kuier .ws-story-media img { border-radius: 0; aspect-ratio: auto; height: 100%; min-height: 76vh; }
body.t-kuier .ws-story-copy { align-self: center; max-width: 44ch; padding: 64px 7vw; }
body.t-kuier .ws-story-copy p, body.t-kuier .ws-contact .ws-sub { color: var(--ku-chalk); white-space: pre-line; }

/* the counters — bare sand numerals welded onto the green above, no bars at all */
body.t-kuier #columns { padding: 0 0 92px; background: var(--ku-green); color: var(--ku-chalk); }
body.t-kuier #columns .ws-col-h { color: var(--ku-sand); font-size: clamp(44px, 6vw, 86px); font-weight: 800; line-height: 1; letter-spacing: -.05em; margin: 0 0 12px; }
body.t-kuier #columns .ws-col p { color: var(--ku-chalk); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.8; }

/* six gapless photographs; six tiles in two clean rows; four partners typeset 2x2 */
body.t-kuier .ws-photogrid-grid { gap: 0; }
body.t-kuier .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 56px; }
body.t-kuier .ws-feature-icon, body.t-kuier .ws-plan-amt { color: var(--brand); }
body.t-kuier #columns-2 .ws-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
body.t-kuier #columns-2 .ws-col { border-top: 2px solid var(--ku-sand); padding: 20px 0 30px; }
body.t-kuier .ws-plan { background: transparent; border: 0; border-top: 3px solid var(--brand); border-radius: 0; padding: 22px 0 0; }

/* the still, edge to edge, with a sand play target standing on it */
body.t-kuier .ws-video-frame { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; background: #14181a url("/media/samples/kui_video_still.jpg") center / cover; }
body.t-kuier .ws-video-frame::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; transform: translateX(7px); border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 32px solid var(--ku-sand); }

/* the close — one line over the darkest photograph, then the quiet green band */
body.t-kuier.ws-body .ws-section.ws-cta { padding: 132px 0; background: linear-gradient(rgba(11, 20, 16, .5), rgba(11, 20, 16, .72)), url("/media/samples/kui_grid_braai.jpg") center / cover; }
body.t-kuier .ws-contact > .ws-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
body.t-kuier .ws-contact .ws-h2 { grid-column: 1 / -1; }
body.t-kuier .ws-field input, body.t-kuier .ws-field textarea, body.t-kuier .ws-field select { background: transparent; border: 0; border-bottom: 1px solid rgba(217, 198, 163, .55); border-radius: 0; color: var(--ku-chalk); padding: 11px 2px; }

@media (max-width: 880px) {
  body.t-kuier .ws-story > .ws-container, body.t-kuier .ws-contact > .ws-container { grid-template-columns: 1fr; gap: 30px; }
  body.t-kuier .ws-story-media img { min-height: 0; aspect-ratio: 4 / 3; }
  body.t-kuier .ws-story-copy { padding: 34px 7vw 52px; }
  body.t-kuier .ws-features-grid, body.t-kuier #columns-2 .ws-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* night — the same green after the floodlights go on, the sand unchanged */
html[data-theme="dark"] body.t-kuier.ws-body {
  --bg: #0f1412; --fg: #ccd2cc; --heading: #f2efe6; --text: #ccd2cc; --muted: #838b84;
  --ku-green: #16352c; --ku-sand: #d9c6a3; --ku-chalk: #f2efe6; --ku-line: #29312c; --brand: #4f8a74;
  --hero-a: rgba(5, 11, 9, .30); --hero-b: rgba(5, 11, 9, .72);
}