/* ---- baan (Baan — Padel club & court hire 153) -----------------------------
   THE STRUCTURAL MOVE: the container breaks for PHOTOGRAPHY ONLY, never for
   text. Container and narrow are pinned to the SAME 900px axis — the bar
   included — so the six glyphs, the announcement, the timetable, the four
   quotes, the coaches and the form all sit on one unbroken bone-grey column
   and no image ever lands beside a paragraph. Exactly three rectangles leave
   that axis and all three are pictures: the full-viewport stage, the
   edge-to-edge film plate and the gapless eight-tile wall. Lime is spent three
   times and no more — every button, the timetable day markers, the one painted
   band. Tiles are welded with 1px grid gaps that show the ground through as
   hairlines, never gutters. Nothing is reached with :first-of-type /
   :nth-of-type. */
body.t-baan.ws-body {
  --bg: #e8e9e4; --fg: #43464a; --heading: #15181a; --text: #43464a; --muted: #7c8084;
  --bn-lime: #b9e02a; --bn-line: #cfd1cb;
  --hero-a: rgba(12, 14, 15, .32); --hero-b: rgba(12, 14, 15, .62);
}
body.t-baan { background: var(--bg); }

/* the bar rides transparent on the stage — wordmark hard left, five words right */
body.t-baan .ws-nav { position: absolute; top: 0; left: 0; right: 0; padding: 16px 0; background: transparent; backdrop-filter: none; border-bottom: 0; }
body.t-baan .ws-brand { color: #f2f3ee; text-transform: uppercase; letter-spacing: .34em; font-size: 12px; font-weight: 800; }
body.t-baan .ws-nav-links a { color: #f2f3ee; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 700; opacity: .82; border-bottom: 0; }
body.t-baan .ws-nav-links a:hover, body.t-baan .ws-nav-links a.on { color: var(--bn-lime); opacity: 1; border-bottom: 0; }

/* bleed 1 of 3 — three slides, the whole viewport, copy stacked dead centre */
body.t-baan .ws-hero { min-height: 100vh; }
body.t-baan .ws-hero h1 { font-size: clamp(42px, 8.6vw, 108px); font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; text-shadow: none; max-width: 13ch; }
body.t-baan .ws-hero p { font-size: 15px; line-height: 1.85; max-width: 58ch; margin: 26px auto 34px; }
/* lime 1 of 3 — every button on the page, flat slab, no border anywhere */
body.t-baan.ws-body .btn.brand, body.t-baan.ws-body .ws-hero-cta.btn.brand { background: var(--bn-lime); color: #15181a; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 800; padding: 18px 34px; }

/* THE AXIS — one width for the bar, the wide bands and the narrow ones alike */
body.t-baan .ws-container, body.t-baan .ws-narrow { max-width: 900px; }
body.t-baan .ws-section { padding: 96px 0; }
body.t-baan.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-baan .ws-h2, body.t-baan .ws-title-h { color: var(--heading); text-transform: uppercase; font-size: clamp(24px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.022em; line-height: 1.02; margin: 0 0 32px; text-align: center; }
body.t-baan .ws-sub, body.t-baan .ws-title-sub, body.t-baan .ws-feature p, body.t-baan .ws-member p, body.t-baan .ws-member .muted, body.t-baan .ws-field label { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.8; }
body.t-baan .ws-title-sub { max-width: 60ch; margin: 20px auto 0; }

/* six glyphs welded flush onto the bottom of the stage — hairlines, no gutters */
body.t-baan .ws-features { padding-top: 0; }
body.t-baan .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--bn-line); }
body.t-baan .ws-feature { background: var(--bg); color: var(--heading); text-align: left; padding: 34px 26px 38px; }
body.t-baan .ws-feature h3, body.t-baan .ws-quote figcaption strong, body.t-baan .ws-member strong { color: var(--heading); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; margin: 0 0 12px; }

/* the timetable — eight hairline rules, and lime 2 of 3 marking every day */
body.t-baan .ws-list { list-style: none; padding-left: 0; margin: 0; border-top: 1px solid var(--bn-line); }
body.t-baan .ws-list li { display: flex; align-items: baseline; gap: 18px; margin: 0; padding: 18px 2px; border-bottom: 1px solid var(--bn-line); color: var(--heading); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
body.t-baan .ws-list li::before { content: ''; flex: 0 0 auto; width: 26px; height: 4px; background: var(--bn-lime); transform: translateY(-3px); }

/* lime 3 of 3 — the one painted band, carrying the only graphite button */
body.t-baan.ws-body .ws-cta { background: var(--bn-lime); color: #15181a; }
body.t-baan .ws-cta-inner h2 { color: #15181a; text-transform: uppercase; font-weight: 800; letter-spacing: -.022em; }
body.t-baan.ws-body .ws-cta .btn.brand { background: #15181a; color: var(--bn-lime); }

/* bleeds 2 and 3 — the film plate and the wall lose their padding entirely */
body.t-baan .ws-video, body.t-baan .ws-video .ws-container, body.t-baan .ws-photogrid { padding: 0; max-width: none; }
body.t-baan .ws-video-frame { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; }
body.t-baan .ws-photogrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-baan .ws-photogrid-grid img { aspect-ratio: 4 / 3; filter: grayscale(1) contrast(1.16) brightness(.92); }

/* four quotes, contained, no photograph and no decoration */
body.t-baan .ws-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--bn-line); }
body.t-baan .ws-quote { background: var(--bg); border: 0; border-radius: 0; box-shadow: none; padding: 32px 28px; }
body.t-baan .ws-quote blockquote { color: var(--heading); font-size: 15px; line-height: 1.7; }
body.t-baan .ws-quote blockquote::before { content: none; }

/* four coaches — square portraits, not badges */
body.t-baan .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.t-baan .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; object-fit: cover; margin: 0 0 16px; filter: grayscale(1) contrast(1.1); }

/* it closes on ruled fields, same ground, nothing beside them */
body.t-baan .ws-field input, body.t-baan .ws-field textarea, body.t-baan .ws-field select { background: transparent; border: 0; border-bottom: 1px solid var(--bn-line); border-radius: 0; color: var(--heading); padding: 12px 2px; }

/* mobile: every welded row halves, and the menu drops onto bone */
@media (max-width: 780px) {
  body.t-baan .ws-nav-links a, body.t-baan .ws-nav-links .theme-toggle { color: var(--heading); opacity: 1; }
  body.t-baan .ws-features-grid, body.t-baan .ws-photogrid-grid, body.t-baan .ws-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-baan .ws-testimonials-grid { grid-template-columns: minmax(0, 1fr); }
  body.t-baan .ws-hero h1 { font-size: clamp(34px, 11vw, 56px); }
}

/* night — the bone goes to court-floor charcoal, the lime one stop hotter */
html[data-theme="dark"] body.t-baan.ws-body {
  --bg: #131513; --fg: #a2a69f; --heading: #f1f2ea; --text: #a2a69f; --muted: #787c76;
  --bn-lime: #c8ef37; --bn-line: #2b2e2a;
  --hero-a: rgba(6, 7, 6, .36); --hero-b: rgba(6, 7, 6, .68);
}
html[data-theme="dark"] body.t-baan { background: var(--bg); }
html[data-theme="dark"] body.t-baan .ws-photogrid-grid img, html[data-theme="dark"] body.t-baan .ws-member-photo img { filter: grayscale(1) contrast(1.1) brightness(.8); }