/* ---------- Skans — occupational health & safety consultancy (WEBSITE) ------
   THE STRUCTURAL MOVE: exactly two blocks on the page are painted, and they are
   the first and the last — a full-viewport three-slide stage and the closing
   prompt band, both cold zinc. Everything between them is one unbroken oyster
   ground with the zebra tint killed, so the page never changes weight. Both
   icon rows are welded gapless four across on the same hairline lattice (four
   tiles, then eight in two rows) and the face wall repeats that four-across
   beat with the portraits butted flush, so the whole middle is one drumbeat.
   Every section heading is demoted to a small label, which leaves only two
   places where the page raises its voice: the one oversized sentence under the
   stage, and the four figures. Brass is spent there and in one other place —
   a hairline UNDER the hero button, never a border ON it. The figure row is
   addressed by its anchor id (#columns), never :nth-of-type, which would match
   the hero. */
body.t-skans.ws-body {
  --bg: #f2f0ec; --fg: #4a4f54; --heading: #1c2023; --text: #4a4f54; --muted: #7d848a;
  --sk-zinc: #2b2f33; --sk-line: #d9d6ce; --sk-brass: #8c7233;
  --hero-a: rgba(20, 24, 27, .40); --hero-b: rgba(20, 24, 27, .68);
}

/* logo left, menu right, and it scrolls away with the first slide */
body.t-skans .ws-nav { position: static; background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--sk-line); }
body.t-skans .ws-brand { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .34em; }
body.t-skans .ws-nav-links a { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; opacity: .74; }

/* THE STAGE — a whole viewport of photograph, copy centred, one quiet slab */
body.t-skans .ws-hero { min-height: 100vh; }
body.t-skans .ws-hero h1 { font-size: clamp(34px, 6.4vw, 74px); font-weight: 800; line-height: 1; letter-spacing: -.035em; max-width: 17ch; }
body.t-skans.ws-body .ws-hero-cta.btn.brand { background: rgba(242, 240, 236, .94); color: var(--sk-zinc); box-shadow: none; }
/* BRASS, ONE OF TWO — a rule under the button, not a border on it */
body.t-skans .ws-hero-inner::after { content: ''; display: block; width: 68px; height: 2px; background: var(--sk-brass); margin: 32px auto 0; }

/* one oyster ground the whole way down — no tint, no second bleed */
body.t-skans.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-skans .ws-section { padding: 84px 0; }
body.t-skans.ws-body .btn.brand { border-radius: 0; text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 700; padding: 16px 34px; }

/* every heading demoted to a label; in the title band the label rides above the
   one oversized sentence (order on a flex container, inert everywhere else) */
body.t-skans .ws-h2, body.t-skans .ws-title-sub, body.t-skans .ws-quote-a { display: block; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: var(--muted); margin: 0 0 30px; order: -1; }
body.t-skans .ws-titleblock .ws-container { display: flex; flex-direction: column; }
body.t-skans .ws-title-h { font-size: clamp(25px, 3.5vw, 43px); font-weight: 500; line-height: 1.24; letter-spacing: -.02em; max-width: 26ch; margin: 0 auto; }

/* THE WELD — both icon rows four across, gapless, on one hairline lattice */
body.t-skans .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sk-line); border-left: 1px solid var(--sk-line); }
body.t-skans .ws-feature { text-align: left; padding: 28px 24px 30px; border-right: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
body.t-skans .ws-feature-icon { text-align: center; color: var(--heading); }

/* the face wall — the same four-across beat, portraits butted flush */
body.t-skans .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-skans .ws-member-photo img, body.t-skans .ws-story-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; margin: 0 0 14px; }
body.t-skans .ws-member strong, body.t-skans .ws-member .muted.small, body.t-skans .ws-member p { padding: 0 14px; }

/* BRASS, TWO OF TWO — the only place the page raises its voice */
body.t-skans #columns .ws-col-h { font-size: clamp(46px, 6.6vw, 92px); font-weight: 300; line-height: .9; letter-spacing: -.05em; color: var(--sk-brass); margin: 0 0 12px; }

/* the plant manager, alone on the ground */
body.t-skans .ws-quote-t { font-style: normal; font-weight: 400; font-size: clamp(21px, 3vw, 33px); line-height: 1.34; color: var(--heading); text-align: center; max-width: 28ch; margin: 0 auto 18px; }

/* the close — the second and last zinc band, then a squared-off form */
body.t-skans.ws-body .ws-cta { background: var(--sk-zinc); }
body.t-skans.ws-body .ws-cta .btn.brand { background: var(--bg); color: var(--sk-zinc); }
body.t-skans .ws-field input, body.t-skans .ws-field textarea, body.t-skans .ws-field select { background: transparent; border: 1px solid var(--sk-line); border-radius: 0; color: var(--heading); }

@media (max-width: 900px) {
  body.t-skans .ws-features-grid, body.t-skans .ws-team-grid, body.t-skans .ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-skans .ws-hero { min-height: 86vh; }
  body.t-skans .ws-nav-links a { opacity: 1; }
}

/* skans by night — the oyster cools to graphite and the two zinc bands go
   darker still, so the stage and the prompt band stay the only painted things;
   the brass lifts a shade so the four figures still carry the page */
html[data-theme="dark"] body.t-skans.ws-body {
  --bg: #16191b; --fg: #9aa1a7; --heading: #eceae4; --text: #9aa1a7; --muted: #6e767c;
  --sk-zinc: #0e1113; --sk-line: #2a2f33; --sk-brass: #b8974a;
  --hero-a: rgba(8, 11, 13, .38); --hero-b: rgba(8, 11, 13, .70);
}
html[data-theme="dark"] body.t-skans .ws-nav { background: var(--bg); }
html[data-theme="dark"] body.t-skans .ws-feature p, html[data-theme="dark"] body.t-skans .ws-member p, html[data-theme="dark"] body.t-skans .ws-story-copy p, html[data-theme="dark"] body.t-skans .ws-sub { color: var(--text); }
html[data-theme="dark"] body.t-skans.ws-body .ws-hero-cta.btn.brand { background: rgba(236, 234, 228, .94); color: #16191b; }
html[data-theme="dark"] body.t-skans.ws-body .ws-cta .btn.brand { background: #eceae4; color: #0e1113; }