/* ---- clutch (Clutch — K53 driving school 190) -------------------------------
   THE STRUCTURAL MOVE: the ground is bare tar and every contained band is its
   own bone plate laid on top of it, so the charcoal shows only as a 16px seam
   between plates. That one decision does all the punctuation without a second
   colour. The call band is simply a plate WITHHELD — a whole height of bare tar
   let through between two plates. And in the middle of the page the four
   photographs run edge to edge with no gutter at all, with the four counter
   figures welded straight onto their underside on the same tar and no seam
   between them, so pictures and numbers read as one dark slab. The bar is solid
   tar from the first pixel and sits ABOVE the stage rather than floating on it,
   wordmark hard left. Cards are abolished everywhere: features, portraits,
   plans and quotes are all just a column under a 2px rule. Road-line yellow is
   spent three ways only — the slab buttons, the counter figures, the rand. */
body.t-clutch.ws-body {
  --bg: #22242a; --fg: #3a3e46; --heading: #16181c; --text: #3a3e46; --muted: #71767f;
  --clt-bone: #f4f2ed; --clt-line: #dcd8d0; --clt-yellow: #f0b429;
  --hero-a: rgba(16,18,22,.34); --hero-b: rgba(16,18,22,.62);
}
body.t-clutch { background: var(--bg); }

/* solid tar bar, opaque from the first pixel, never transparent over the stage */
body.t-clutch .ws-nav { background: var(--bg); backdrop-filter: none; border-bottom: 0; color: #edeae4; }
body.t-clutch .ws-brand { color: #f6f4ef; text-transform: uppercase; letter-spacing: .26em; font-size: 14px; font-weight: 700; }
body.t-clutch .ws-nav-links a { color: #c9c6bf; opacity: 1; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; }
body.t-clutch .ws-nav-links a:hover, body.t-clutch .ws-nav-links a.on { color: var(--clt-yellow); border-bottom-color: var(--clt-yellow); }

/* the stage is exactly one viewport once the bar standing above it is counted */
body.t-clutch .ws-hero { min-height: calc(100vh - 62px); }
body.t-clutch .ws-hero h1 { font-size: clamp(38px, 6.6vw, 80px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; }
body.t-clutch.ws-body .btn.brand, body.t-clutch.ws-body .ws-hero-cta.btn.brand { background: var(--clt-yellow); color: #1b1d21; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 700; padding: 16px 34px; }

/* THE PLATES — each contained band is bone on tar, the tar left as the seam */
body.t-clutch .ws-section { padding: 0 0 16px; }
body.t-clutch .ws-cta, body.t-clutch.ws-body .ws-section:nth-child(even):not(.ws-cta) { background: transparent; }
body.t-clutch .ws-section > .ws-container { background: var(--clt-bone); padding: 76px 46px; }
body.t-clutch .ws-h2, body.t-clutch .ws-story-copy h2 { color: var(--heading); font-size: clamp(25px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
body.t-clutch .ws-sub, body.t-clutch .ws-story-copy p, body.t-clutch .ws-feature p, body.t-clutch .ws-member p, body.t-clutch .ws-plan li, body.t-clutch .ws-list li, body.t-clutch .ws-quote blockquote { color: var(--text); font-size: 15px; line-height: 1.75; }
body.t-clutch .ws-features-grid, body.t-clutch .ws-team-grid, body.t-clutch .ws-testimonials-grid, body.t-clutch .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: none; }
/* no cards anywhere — every tile is a column standing under a 2px rule */
body.t-clutch .ws-feature, body.t-clutch .ws-member, body.t-clutch .ws-plan, body.t-clutch .ws-quote { background: transparent; border: 0; border-top: 2px solid var(--heading); border-radius: 0; box-shadow: none; padding: 22px 0 0; text-align: left; }
body.t-clutch .ws-story-media img, body.t-clutch .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; margin: 0 0 14px; }
body.t-clutch .ws-quote blockquote::before { content: none; }

/* the only thing that leaves the plates: four photographs flush, figures welded under */
body.t-clutch .ws-photogrid { padding: 0; }
body.t-clutch .ws-photogrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-clutch .ws-columns > .ws-container, body.t-clutch .ws-cta > .ws-container { background: transparent; padding: 58px 22px 86px; text-align: center; }
body.t-clutch .ws-col-h { color: var(--clt-yellow); font-size: clamp(42px, 5.4vw, 72px); font-weight: 700; letter-spacing: -.05em; line-height: .95; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
/* the only type that ever sits directly on the tar */
body.t-clutch .ws-columns .ws-col p, body.t-clutch .ws-cta-inner p, body.t-clutch .ws-footer { color: #aeaba4; font-size: 13px; line-height: 1.65; border-top-color: rgba(255,255,255,.10); }
body.t-clutch .ws-cta-inner h2 { color: #f6f4ef; }
body.t-clutch .ws-plan-amt { color: var(--clt-yellow); font-size: 34px; letter-spacing: -.03em; }

/* split enquiry: address column left, the form held hard against it on the right */
body.t-clutch .ws-contact > .ws-container { max-width: 1120px; display: grid; grid-template-columns: 4fr 6fr; column-gap: 56px; }
body.t-clutch .ws-contact .ws-h2, body.t-clutch .ws-contact .ws-sub { text-align: left; margin: 0 0 14px; max-width: 34ch; }
body.t-clutch .ws-contact .ws-form { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
body.t-clutch .ws-field input, body.t-clutch .ws-field select, body.t-clutch .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--clt-line); border-radius: 0; padding: 12px 2px; color: var(--heading); }

@media (max-width: 860px) {
  body.t-clutch .ws-section > .ws-container { padding: 52px 22px; }
  body.t-clutch .ws-features-grid, body.t-clutch .ws-team-grid, body.t-clutch .ws-testimonials-grid, body.t-clutch .ws-pricing-grid, body.t-clutch .ws-photogrid-grid, body.t-clutch .ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-clutch .ws-contact > .ws-container { grid-template-columns: 1fr; }
  body.t-clutch .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
}

/* night — the same yard under the floodlight: tar a stop deeper, plates go slate */
html[data-theme="dark"] body.t-clutch.ws-body {
  --bg: #0d0e11; --fg: #a9abb2; --heading: #edeae4; --text: #a9abb2; --muted: #7c8089;
  --clt-bone: #191b20; --clt-line: #2d3037; --clt-yellow: #f5c14a;
  --hero-a: rgba(5,6,8,.40); --hero-b: rgba(5,6,8,.70);
}
html[data-theme="dark"] body.t-clutch { background: var(--bg); }