/* ---- kaai (Kaai — Coworking on the Cape Town foreshore 137) -----------------
   THE STRUCTURAL MOVE: one sea-fog ground from the first pixel to the last. The
   zebra tint is switched off, the CTA band is stripped of its paint and every
   card surface is dissolved, so the page never changes weight top to bottom —
   whitespace and a single verdigris hairline are the only things dividing the
   bands. That leaves the four priced tiers as the loudest object on the page,
   which is the point: this is a price list dressed as a photo essay. Verdigris
   is spent on nothing but the rand figures, the rules and the slabs. Every
   selector is a class or an attribute — the hero is section one, so anything
   element-indexed would silently never fire on the bands beneath it. */
body.t-kaai.ws-body {
  --bg: #f2f1ed; --fg: #3c4a55; --heading: #14202b; --text: #3c4a55; --muted: #7b8892;
  --kaa-verd: #3f7d6f; --kaa-line: #d6d6d0; --kaa-field: #ffffff; --kaa-on-verd: #f4f3ef;
  --hero-a: rgba(10, 18, 25, .16); --hero-b: rgba(10, 18, 25, .64);
}

/* the bar and the last line — contained, opaque, one hairline each */
body.t-kaai .ws-nav, body.t-kaai .ws-footer { background: var(--bg); border-color: var(--kaa-line); }
body.t-kaai .ws-nav-links a { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .74; }
/* the conversion lives in the header, not the body — the only slab up here */
body.t-kaai .ws-nav-links a[href="#pricing"] { background: var(--kaa-verd); color: var(--kaa-on-verd); opacity: 1; padding: 9px 15px; border-bottom: 0; }

/* hero — the whole first screen, copy dropped into the bottom-left corner */
body.t-kaai .ws-hero { min-height: 100vh; align-items: flex-end; padding-bottom: 34px; }
body.t-kaai .ws-hero h1 { font-size: clamp(33px, 5.2vw, 60px); font-weight: 600; letter-spacing: -.025em; line-height: 1.07; max-width: 15ch; text-shadow: none; }
body.t-kaai.ws-body .ws-hero-cta.btn.brand { background: var(--kaa-verd); color: var(--kaa-on-verd); border-radius: 0; box-shadow: none; padding: 15px 30px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

/* THE GROUND — no zebra, no painted band, whitespace does all the dividing */
body.t-kaai .ws-section, body.t-kaai .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { padding: 94px 0; background: transparent; }
body.t-kaai .ws-h2, body.t-kaai .ws-title-h, body.t-kaai .ws-cta-inner h2 { font-size: clamp(23px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--heading); text-align: left; margin: 0 0 16px; }
body.t-kaai .ws-sub, body.t-kaai .ws-title-sub { text-align: left; color: var(--muted); font-size: 15.5px; line-height: 1.75; max-width: 56ch; margin: 0 0 30px; }
body.t-kaai .ws-feature p, body.t-kaai .ws-member p, body.t-kaai .ws-plan li, body.t-kaai .ws-list li { color: var(--text); line-height: 1.7; }

/* THE HOIST — a member line lands second, straight off the photograph, bare */
body.t-kaai .ws-quoteblock { text-align: left; padding: 96px 0 88px; }
body.t-kaai .ws-quote-t { font-size: clamp(21px, 2.7vw, 29px); font-weight: 400; font-style: normal; line-height: 1.5; color: var(--heading); margin: 0 0 20px; }
body.t-kaai .ws-quote-a, body.t-kaai .ws-plan h3 { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* four across, three times over — the figures, the faces, the tiers */
body.t-kaai .ws-features-grid, body.t-kaai .ws-team-grid, body.t-kaai .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; max-width: none; }
body.t-kaai .ws-feature { text-align: left; padding: 24px 0 0; border-top: 1px solid var(--kaa-line); color: var(--kaa-verd); }
body.t-kaai .ws-feature h3 { font-size: clamp(19px, 2.3vw, 25px); font-weight: 600; letter-spacing: -.02em; color: var(--heading); margin: 14px 0 8px; }

/* the floor — three across, two down, gapped and CONTAINED, never bled */
body.t-kaai .ws-photogrid .ws-photogrid-grid { max-width: 1120px; margin: 0 auto; padding: 0 22px; gap: 16px; }

/* THE PAYLOAD — no cards: a verdigris rule, the rand figure at display size */
body.t-kaai .ws-plan { background: transparent; border: 0; border-top: 2px solid var(--kaa-verd); border-radius: 0; padding: 22px 0 0; text-align: left; display: flex; flex-direction: column; }
body.t-kaai .ws-plan-amt { font-size: clamp(29px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.03em; color: var(--kaa-verd); }
body.t-kaai.ws-body .ws-plan .btn.brand, body.t-kaai.ws-body .ws-cta .btn.brand, body.t-kaai.ws-body .ws-contact .btn.brand { background: var(--kaa-verd); color: var(--kaa-on-verd); border-radius: 0; box-shadow: none; margin-top: auto; padding: 14px 24px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* the ask, softly, twice — hairlines instead of the painted brand band */
body.t-kaai.ws-body .ws-section.ws-cta { background: transparent; color: var(--fg); border-top: 1px solid var(--kaa-line); border-bottom: 1px solid var(--kaa-line); padding: 74px 0; }
body.t-kaai .ws-cta-inner { text-align: left; margin: 0; max-width: 620px; }
body.t-kaai .ws-field input, body.t-kaai .ws-field textarea, body.t-kaai .ws-field select { background: var(--kaa-field); border: 1px solid var(--kaa-line); border-radius: 0; color: var(--heading); }

@media (max-width: 860px) {
  body.t-kaai .ws-section { padding: 58px 0; }
  body.t-kaai .ws-features-grid, body.t-kaai .ws-team-grid, body.t-kaai .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kaai .ws-nav-links { background: var(--bg); border: 1px solid var(--kaa-line); border-radius: 0; box-shadow: none; }
}

/* night — the same fog turned harbour-dark, verdigris lifted so it still reads */
html[data-theme="dark"] body.t-kaai.ws-body {
  --bg: #101a22; --fg: #a7b4bc; --heading: #eef2f0; --text: #a7b4bc; --muted: #78868f;
  --kaa-verd: #6fae9d; --kaa-line: #27343d; --kaa-field: #16222b; --kaa-on-verd: #0c151b;
  --hero-a: rgba(5, 10, 14, .20); --hero-b: rgba(5, 10, 14, .70);
}