/* ---- kern (Kern — Biokinetics & movement rehab 290) ------------------------
   THE STRUCTURAL MOVE: one cold bone ground carries every clamped block, and it
   is interrupted exactly TWICE by full-bleed graphite — the letterboxed film
   band and an eight-across gapless run of treatment detail. Chartreuse lime is
   rationed to three marks on the whole page and no more: the short rule above
   every heading, the play triangle on the still, and the slab welded under the
   submit. Everything else is photograph and type. */
body.t-kern.ws-body {
  --bg: #f3f2ee; --fg: #3a3d3f; --heading: #16181a; --text: #3a3d3f; --muted: #7b7f82;
  --kn-graphite: #16181a; --kn-lime: #93b81a; --kn-line: #dcdad3;
  --hero-a: rgba(14, 16, 18, .28); --hero-b: rgba(14, 16, 18, .64);
}
body.t-kern { background: var(--bg); }
body.t-kern .ws-brand { color: var(--heading); text-transform: uppercase; letter-spacing: .2em; font-weight: 800; font-size: 15px; }
body.t-kern .ws-nav-links a, body.t-kern .ws-nav-links a:hover { color: var(--heading); text-transform: uppercase; letter-spacing: .13em; font-size: 11.5px; font-weight: 700; }

/* the stage — three frames crossfading, copy hard left, nothing laid over it */
body.t-kern .ws-hero { min-height: 94vh; }
body.t-kern .ws-hero h1 { font-size: clamp(36px, 6vw, 74px); font-weight: 800; letter-spacing: -.042em; line-height: 1.02; max-width: 17ch; text-shadow: none; }

/* flat slabs, never an outline */
body.t-kern.ws-body .btn.brand { background: var(--heading); color: var(--bg); border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 700; padding: 17px 34px; }
body.t-kern.ws-body .ws-hero-cta.btn.brand { background: #f3f2ee; color: #16181a; }

/* one clamped ground the whole way down — every alternating tint killed */
body.t-kern.ws-body .ws-section { padding: 96px 0; }
body.t-kern.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-kern .ws-h2 { color: var(--heading); font-size: clamp(23px, 3vw, 33px); font-weight: 800; letter-spacing: -.032em; line-height: 1.1; }
body.t-kern .ws-title-h, body.t-kern .ws-cta-inner h2 { color: var(--heading); font-size: clamp(30px, 5vw, 56px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; max-width: 22ch; margin: 0 auto 28px; }
/* LIME 1 OF 3 — the rule over every heading, and the only colour on the clamp */
body.t-kern .ws-h2::before, body.t-kern .ws-title-h::before, body.t-kern .ws-cta-inner h2::before { content: ''; display: block; width: 46px; height: 4px; margin: 0 auto 22px; background: var(--kn-lime); }
body.t-kern .ws-title-sub { color: var(--text); white-space: pre-line; font-size: 16.5px; line-height: 1.85; max-width: 54ch; margin: 0 auto; }

/* three across, two deep — each one ruled off at the top, no card, no box */
body.t-kern .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 44px; }
body.t-kern .ws-feature { color: var(--muted); text-align: left; padding: 22px 0 0; border-top: 1px solid var(--kn-line); }
body.t-kern .ws-feature h3, body.t-kern .ws-member strong { color: var(--heading); font-size: 16px; font-weight: 700; letter-spacing: -.012em; }
body.t-kern .ws-feature p, body.t-kern .ws-member p, body.t-kern .ws-gallery-cap span { color: var(--text); font-size: 14.5px; line-height: 1.72; }

/* BREAK 1 OF 2 — the film band, graphite edge to edge, LIME 2 OF 3 on the triangle */
body.t-kern.ws-body .ws-video { background: var(--kn-graphite); padding: 116px 0; }
body.t-kern .ws-video .ws-narrow { max-width: 1040px; }
body.t-kern .ws-video .ws-h2 { color: #f3f2ee; margin-bottom: 34px; }
body.t-kern .ws-video-frame { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; background: #0e1012 url("/media/samples/krn_video.jpg") center / cover; }
body.t-kern .ws-video-frame::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-top: 27px solid transparent; border-bottom: 27px solid transparent; border-left: 46px solid var(--kn-lime); }
body.t-kern .ws-video-caption { color: #9ba0a3; font-size: 14px; line-height: 1.7; max-width: 62ch; margin: 22px auto 0; }

/* two by two, the plain-English label ruled off under each picture */
body.t-kern .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 40px; }
body.t-kern .ws-gallery-item img { aspect-ratio: 4 / 3; border-radius: 0; }
body.t-kern .ws-gallery-cap { border-top: 1px solid var(--kn-line); margin-top: 18px; padding: 16px 0 0; gap: 7px; }
body.t-kern .ws-gallery-cap strong { color: var(--heading); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* BREAK 2 OF 2 — eight tiles butted edge to edge, no container and no gutter */
body.t-kern.ws-body .ws-photogrid { padding: 0; background: var(--kn-graphite); }
body.t-kern .ws-photogrid-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
body.t-kern .ws-photogrid-grid img { aspect-ratio: 4 / 5; }

/* the about is type only — centred, larger, no photograph anywhere near it */
body.t-kern .ws-richtext .ws-narrow { max-width: 700px; text-align: center; }
body.t-kern .ws-richtext p { color: var(--text); font-size: 18px; line-height: 1.8; margin: 0 0 22px; }

/* the widest grid on the page: four portraits, the name ruled off under the crop */
body.t-kern .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 30px; }
body.t-kern .ws-member { text-align: left; }
body.t-kern .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; margin: 0; }
body.t-kern .ws-member strong { display: block; border-top: 1px solid var(--kn-line); margin-top: 16px; padding-top: 14px; }
body.t-kern .ws-member .muted { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 5px 0 0; }

/* the close — one oversized line and one slab, on the same bone ground */
body.t-kern.ws-body .ws-cta { background: transparent; border-top: 1px solid var(--kn-line); padding: 104px 0; }

/* rooms, hours and medical aids one side; the four fields the other */
body.t-kern .ws-contact .ws-narrow { max-width: 1060px; display: grid; grid-template-columns: 5fr 6fr; column-gap: 76px; align-items: start; }
body.t-kern .ws-contact .ws-h2, body.t-kern .ws-contact .ws-sub { grid-column: 1; text-align: left; }
body.t-kern .ws-contact .ws-h2::before { margin-left: 0; }
body.t-kern .ws-contact .ws-sub { color: var(--text); white-space: pre-line; font-size: 14.5px; line-height: 2.05; max-width: 34ch; margin: 0; }
body.t-kern .ws-contact .ws-form { grid-column: 2; grid-row: 1 / -1; max-width: none; margin: 0; gap: 24px; }
body.t-kern .ws-field label { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
body.t-kern .ws-field input, body.t-kern .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--kn-line); border-radius: 0; color: var(--heading); padding: 11px 0; }
/* LIME 3 OF 3 — welded under the submit, the last mark on the page */
body.t-kern.ws-body .ws-contact .btn.brand { align-self: flex-start; box-shadow: inset 0 -5px 0 var(--kn-lime); }

@media (max-width: 1000px) {
  body.t-kern .ws-features-grid, body.t-kern .ws-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kern .ws-photogrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.t-kern .ws-contact .ws-narrow { grid-template-columns: 1fr; row-gap: 34px; }
  body.t-kern .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
}
@media (max-width: 620px) {
  body.t-kern .ws-section { padding: 62px 0; }
  body.t-kern .ws-features-grid, body.t-kern .ws-team-grid, body.t-kern .ws-gallery-grid { grid-template-columns: 1fr; }
  body.t-kern .ws-photogrid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* night — the same cold rooms after hours, the lime one stop brighter */
html[data-theme="dark"] body.t-kern.ws-body {
  --bg: #121416; --fg: #a3a7aa; --heading: #f0efe9; --text: #a3a7aa; --muted: #75797c;
  --kn-graphite: #08090a; --kn-lime: #a9d321; --kn-line: #2a2d30;
  --hero-a: rgba(5, 7, 8, .34); --hero-b: rgba(5, 7, 8, .70);
}
html[data-theme="dark"] body.t-kern { background: var(--bg); }