/* ---- tred (Tred — Stroke & neuro-rehabilitation unit 345) -------------------
   THE STRUCTURAL MOVE: a gapped icon row and a completely gapless photographic
   block sit back to back. Six programme tiles breathe on a 46px gutter under a
   warm hairline, and then four therapy tiles weld together with zero gutter at
   all, their labels riding the lower edge of the photograph so the block reads
   as one continuous strip rather than as cards. Below the hero exactly ONE
   element leaves the 1150px container — the near-black counters stripe — which
   is why the closing call to action is stripped back to bare paper instead of
   taking the shared sheet's brand-coloured band. Terracotta is spent on the
   buttons, the six glyphs and the four numerals, and nowhere else on the page.
   Sections are reached by CLASS and by id (#story, #about), never by
   :nth-of-type, which matches the ELEMENT and would land on the hero.
   Nothing here touches .ws-nav / .ws-nav-inner / .ws-brand or any item inside
   the header: no order, no absolute positioning, no nth-of-type. */
body.t-tred.ws-body {
  --bg: #f7f4ef; --fg: #4d4841; --heading: #1b1917; --text: #4d4841; --muted: #857e74;
  --td-clay: #b0603c; --td-line: #e2dbcf; --td-dark: #141312; --td-field: #fffdfa;
  --hero-a: rgba(20, 19, 18, .28); --hero-b: rgba(20, 19, 18, .62);
}
body.t-tred { background: var(--bg); }
body.t-tred.ws-body .ws-section:not(.ws-columns) { background: var(--bg); }
body.t-tred .ws-section { padding: 94px 0; }
body.t-tred .ws-container { max-width: 1150px; }

/* the bar is paper closed by one warm hairline — its items are left alone */
body.t-tred .ws-nav { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--td-line); }

/* one whole screen of photograph, three frames cross-fading, the copy left */
body.t-tred .ws-hero { min-height: 100vh; }
body.t-tred .ws-hero h1 { font-size: clamp(37px, 5.4vw, 66px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; max-width: 17ch; }

/* clay 1 of 3 — every slab on the page: flat, square-cornered, no border */
body.t-tred.ws-body .btn.brand, body.t-tred.ws-body .ws-cta .btn.brand, body.t-tred.ws-body .ws-hero-cta.btn.brand { background: var(--td-clay); color: #fffaf6; border-radius: 0; box-shadow: none; padding: 15px 32px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
body.t-tred.ws-body .btn.brand:hover, body.t-tred.ws-body .ws-hero-cta.btn.brand:hover { background: #964e2e; }

/* one type system — the sheet's hardcoded greys re-pointed so night moves */
body.t-tred .ws-h2, body.t-tred .ws-story-copy h2, body.t-tred .ws-cta-inner h2 { color: var(--heading); font-size: clamp(24px, 3.1vw, 35px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
body.t-tred .ws-sub, body.t-tred .ws-feature p, body.t-tred .ws-story-copy p, body.t-tred .ws-richtext p, body.t-tred .ws-member p { color: var(--text); }

/* clay 2 of 3 — SIX glyph tiles, three across, hung off a warm hairline */
body.t-tred .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 46px; }
body.t-tred .ws-feature { text-align: left; padding: 20px 0 0; border-top: 1px solid var(--td-line); }
body.t-tred .ws-feature-icon { color: var(--td-clay); margin-bottom: 13px; }
body.t-tred .ws-feature h3 { color: var(--heading); font-size: 16.5px; font-weight: 700; margin: 0 0 8px; }

/* every photograph on the page is square-cornered; the split runs tall */
body.t-tred .ws-story-media img, body.t-tred .ws-gallery-item img, body.t-tred .ws-member-photo img { border-radius: 0; }
body.t-tred .ws-story-grid { grid-template-columns: 1fr 1fr; gap: 58px; }
body.t-tred .ws-story-media img { aspect-ratio: 4 / 5; }

/* THE HINGE — the gapped row above runs straight into a 2x2 with NO gutter at
   all, the label riding the lower edge of the photograph instead of sitting
   under it, so the four tiles read as one continuous photographic block */
body.t-tred .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
body.t-tred .ws-gallery-item { position: relative; }
body.t-tred .ws-gallery-item img { aspect-ratio: 4 / 3; }
body.t-tred .ws-gallery-cap { position: absolute; inset: auto 0 0 0; gap: 4px; padding: 96px 30px 26px; background: linear-gradient(rgba(16, 15, 14, 0), rgba(16, 15, 14, .86)); }
body.t-tred .ws-gallery-cap strong { color: #ffffff; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
body.t-tred .ws-gallery-cap span { color: #ddd2c6; font-size: 12.5px; }

/* four portraits, gapped and ranged left — photo, name, role, one short bio */
body.t-tred .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
body.t-tred .ws-member { text-align: left; }
body.t-tred .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; margin: 0 0 15px; }

/* clay 3 of 3 — THE ONE FULL-BLEED ELEMENT BELOW THE HERO: near-black stripe,
   four oversized terracotta numerals, small caption words under each */
body.t-tred.ws-body .ws-section.ws-columns { background: var(--td-dark); padding: 82px 0; }
body.t-tred .ws-col-h { color: var(--td-clay); font-size: clamp(42px, 5.8vw, 76px); font-weight: 700; letter-spacing: -.05em; line-height: .9; margin: 0 0 14px; }
body.t-tred .ws-columns .ws-col p { color: #979089; font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; line-height: 1.7; margin: 0; }

/* the history is given room; the reference's news row becomes six welded frames */
body.t-tred .ws-richtext .ws-narrow { max-width: 800px; }
body.t-tred.ws-body .ws-photogrid { padding: 0 22px 94px; }
body.t-tred .ws-photogrid-grid { max-width: 1106px; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-tred .ws-photogrid-grid img { aspect-ratio: 3 / 2; }

/* the close stays on bare paper — one hairline, one line, one slab */
body.t-tred .ws-cta-inner { max-width: 820px; border-top: 1px solid var(--td-line); padding-top: 52px; }

/* the last band — the facts ranged left, the form filling the right column */
body.t-tred .ws-contact .ws-narrow { max-width: 1106px; display: grid; grid-template-columns: 5fr 6fr; column-gap: 74px; }
body.t-tred .ws-contact .ws-h2 { text-align: left; margin: 0; }
body.t-tred .ws-contact .ws-sub { text-align: left; margin: 22px 0 0; max-width: 34ch; white-space: pre-line; font-size: 15px; line-height: 2; }
body.t-tred .ws-contact .ws-form { grid-column: 2; grid-row: 1 / -1; max-width: none; }
body.t-tred .ws-field input, body.t-tred .ws-field textarea, body.t-tred .ws-field select { background: var(--td-field); border: 1px solid var(--td-line); border-radius: 0; color: var(--heading); }

/* every count still fills its rows as the page folds: 6→3x2→2x3→1, 4→2x2→1 */
@media (max-width: 1000px) {
  body.t-tred .ws-features-grid, body.t-tred .ws-team-grid, body.t-tred .ws-photogrid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-tred .ws-story-grid { grid-template-columns: 1fr; gap: 30px; }
  body.t-tred .ws-contact .ws-narrow { grid-template-columns: 1fr; row-gap: 32px; }
  body.t-tred .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
}
@media (max-width: 620px) {
  body.t-tred .ws-features-grid, body.t-tred .ws-team-grid, body.t-tred .ws-gallery-grid { grid-template-columns: 1fr; }
}

/* night — the bone paper drops to a warm graphite, the hairline dims, and the
   counters stripe goes BELOW the page ground so it is still the darkest
   surface on the site; the clay lifts a shade so the four numerals hold */
html[data-theme="dark"] body.t-tred.ws-body {
  --bg: #171512; --fg: #b2aa9e; --heading: #f4f0e9; --text: #b2aa9e; --muted: #857d72;
  --td-clay: #cf7a53; --td-line: #2d2922; --td-dark: #0a0908; --td-field: #201d19;
  --hero-a: rgba(8, 7, 6, .34); --hero-b: rgba(8, 7, 6, .70);
}
html[data-theme="dark"] body.t-tred { background: var(--bg); }
html[data-theme="dark"] body.t-tred .ws-gallery-cap span { color: #cabfb2; }