/* ---- loods (Loods 319) — the gapless four-tile strip is the structural move ----
   The feature band throws away its container AND its gutters and runs edge to
   edge as four TOUCHING charcoal tiles split only by a hairline, so the row
   reads as one continuous strip instead of four cards. Everything else falls
   out of that: ink-charcoal full-bleed bands (hero, strip, speaker wall,
   quotes) alternating with contained bone ones (about, programme, tickets,
   register), and oxide orange spent exactly three times — the hero date line,
   the hero button's ring, and the lifted third ticket. Nothing here touches
   .ws-nav-inner / .ws-brand / .ws-nav-links order or position: colour only. */
body.t-loods.ws-body {
  --bg: #f2efe9; --fg: #4c4a44; --heading: #14161a; --text: #4c4a44; --muted: #85837c;
  --lds-ink: #1a1c1e; --lds-oxide: #c05621; --lds-line: #ddd8ce; --lds-dim: #a09e97; --lds-card: #fbf9f5;
  --hero-a: rgba(14, 16, 18, .32); --hero-b: rgba(14, 16, 18, .66);
}

/* the bar floats on the opening photograph rather than sitting on a ground */
body.t-loods .ws-nav { background: rgba(16, 18, 20, .34); border-bottom: 0; color: #f4f2ec; backdrop-filter: saturate(1.2) blur(9px); }

/* the sheet's hardcoded greys re-pointed at tokens so night actually moves */
body.t-loods .ws-sub, body.t-loods .ws-story-copy p, body.t-loods .ws-list li, body.t-loods .ws-plan li { color: var(--text); }

/* one whole screen of photograph, three frames cross-fading behind centred copy */
body.t-loods .ws-hero { min-height: 100vh; }
body.t-loods .ws-hero-inner { display: flex; flex-direction: column; align-items: center; }
body.t-loods .ws-hero-inner p { order: -1; max-width: none; margin: 0 0 20px; color: var(--lds-oxide); font-family: "Anton", "Arial Narrow", var(--sans); font-size: clamp(12px, 1.5vw, 15px); font-weight: 400; letter-spacing: .34em; text-transform: uppercase; }
body.t-loods .ws-hero h1 { max-width: 13ch; margin: 0 0 36px; font-family: "Anton", "Arial Narrow", var(--sans); font-size: clamp(48px, 10vw, 132px); font-weight: 400; line-height: .92; letter-spacing: .012em; text-transform: uppercase; text-shadow: 0 2px 40px rgba(0, 0, 0, .42); }

/* the page's only outlined button — an oxide ring, no fill until you touch it */
body.t-loods.ws-body .ws-hero-cta.btn.brand { background: transparent; color: #f4f2ec; box-shadow: inset 0 0 0 1px var(--lds-oxide); border-radius: 0; padding: 16px 40px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
body.t-loods.ws-body .ws-hero-cta.btn.brand:hover { background: var(--lds-oxide); color: #fdf8f4; }

/* bone below, charcoal on the three full-bleed bands — the tokens flip with it */
body.t-loods.ws-body .ws-section:not(.ws-features):not(.ws-team):not(.ws-testimonials) { background: var(--bg); padding: 96px 0; }
body.t-loods.ws-body .ws-section.ws-features, body.t-loods.ws-body .ws-section.ws-team, body.t-loods.ws-body .ws-section.ws-testimonials { background: var(--lds-ink); color: var(--lds-dim); --heading: #f4f2ec; --text: #a6a39b; --muted: #949188; }
body.t-loods .ws-h2, body.t-loods .ws-story-copy h2 { color: var(--heading); font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }

/* every other button is a flat charcoal slab — no ring, no accent */
body.t-loods.ws-body .btn.brand { background: var(--lds-ink); color: #f4f2ec; border-radius: 0; padding: 15px 32px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

/* ★ THE MOVE — four tiles, no container, no gutters, one continuous strip */
body.t-loods.ws-body .ws-section.ws-features { padding: 0; }
body.t-loods .ws-features > .ws-container { max-width: none; padding: 0; }
body.t-loods .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-loods .ws-feature, body.t-loods .ws-member { text-align: left; }
body.t-loods .ws-feature { padding: 62px 38px 66px; box-shadow: inset 1px 0 0 rgba(244, 242, 236, .13); }
body.t-loods .ws-feature h3, body.t-loods .ws-member strong { color: var(--heading); font-size: 16.5px; font-weight: 700; letter-spacing: -.012em; margin: 0 0 9px; }
body.t-loods .ws-feature p, body.t-loods .ws-member p { color: var(--text); font-size: 14px; line-height: 1.68; }
body.t-loods .ws-member .muted, body.t-loods .ws-quote figcaption { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }

/* the page takes a breath: contained, half and half, the photograph hard left */
body.t-loods .ws-story-grid { grid-template-columns: 1fr 1fr; gap: 58px; }
body.t-loods .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 5; }

/* the speaker wall carries the middle of the page — eight tall crops, 4 x 2 */
body.t-loods .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 22px; }
body.t-loods .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; margin: 0 0 15px; }

/* the programme is six ruled lines, not bullets */
body.t-loods .ws-list { max-width: 74ch; margin: 0 auto; padding: 0; list-style: none; }
body.t-loods .ws-list li { border-bottom: 1px solid var(--lds-line); padding: 17px 0; margin: 0; font-size: 15.5px; }

/* four rungs on one row; the third stands up and takes the last of the oxide */
body.t-loods .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1120px; }
body.t-loods .ws-plan { background: var(--lds-card); border: 1px solid var(--lds-line); border-radius: 0; padding: 34px 24px; text-align: left; }
body.t-loods .ws-plan li::before { content: '—'; color: var(--lds-dim); font-weight: 400; }
body.t-loods .ws-plan:nth-child(3) { background: var(--lds-ink); border-color: var(--lds-oxide); transform: translateY(-20px); --heading: #f4f2ec; --text: #a6a39b; --muted: #97948c; }
body.t-loods .ws-plan:nth-child(3) h3, body.t-loods .ws-plan:nth-child(3) .ws-plan-amt { color: var(--heading); }
body.t-loods.ws-body .ws-plan:nth-child(3) .btn.brand { background: var(--lds-oxide); }

/* the quotes go quiet — one at a time, centred on the dark, no cards */
body.t-loods .ws-testimonials-grid { grid-template-columns: 1fr; gap: 56px; max-width: 780px; margin: 0 auto; }
body.t-loods .ws-quote { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; text-align: center; }
body.t-loods .ws-quote blockquote { color: var(--heading); font-size: clamp(19px, 2.4vw, 27px); font-weight: 400; line-height: 1.5; }
body.t-loods .ws-quote blockquote::before { content: none; }

/* register: one photograph of the room, then a single field wide enough to talk in */
body.t-loods .ws-contact > .ws-container { max-width: 920px; }
body.t-loods .ws-contact .ws-h2::before { content: ''; display: block; aspect-ratio: 21 / 9; margin-bottom: 44px; background: url("/media/samples/lds_hero_3.jpg") center / cover; }
body.t-loods .ws-contact .ws-form { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body.t-loods .ws-contact .ws-field:has(textarea), body.t-loods .ws-contact .ws-form .btn.brand { grid-column: 1 / -1; }
body.t-loods .ws-contact .ws-form .btn.brand { justify-self: start; }
body.t-loods .ws-field input, body.t-loods .ws-field textarea { background: var(--lds-card); border: 1px solid var(--lds-line); border-radius: 0; color: var(--heading); }
body.t-loods .ws-contact textarea { min-height: 152px; }

/* every count still fills its rows on the way down: 4 -> 2 -> 1, 8 -> 4 -> 2 */
@media (max-width: 980px) {
  body.t-loods .ws-features-grid, body.t-loods .ws-team-grid, body.t-loods .ws-pricing-grid, body.t-loods .ws-contact .ws-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-loods .ws-story-grid { grid-template-columns: 1fr; }
  body.t-loods .ws-plan:nth-child(3) { transform: none; }
}
@media (max-width: 600px) {
  body.t-loods .ws-features-grid, body.t-loods .ws-pricing-grid, body.t-loods .ws-contact .ws-form { grid-template-columns: 1fr; }
  body.t-loods .ws-feature { padding: 44px 24px 48px; }
}

/* night — the bone cools to graphite and the charcoal bands drop below it, so
   the strip and the speaker wall stay the darkest surfaces on the page */
html[data-theme="dark"] body.t-loods.ws-body {
  --bg: #16181a; --fg: #a8a69f; --heading: #f2f0ea; --text: #a8a69f; --muted: #7e7c76;
  --lds-ink: #0a0b0c; --lds-oxide: #d9702f; --lds-line: #2c2f32; --lds-dim: #8b8982; --lds-card: #1f2225;
  --hero-a: rgba(6, 7, 8, .34); --hero-b: rgba(6, 7, 8, .72);
}
html[data-theme="dark"] body.t-loods .ws-nav { background: rgba(8, 9, 10, .52); }