/* ---- southlight (Southlight — Film services 37) — dune sand, cold pine-teal ----
   STRUCTURAL MOVE: a four-across drumbeat struck three times — four service
   columns in ONE row, eight work tiles as 4x2, four crew in ONE row — so the eye
   learns the beat and the page reads engineered rather than assembled. Air is
   loaded BETWEEN bands, never inside them, and the profile portrait bleeds off
   the left edge while its copy stays inside the column. */
body.t-southlight.ws-body { --bg: #e3dccd; --fg: #4a463c; --heading: #1c1b17; --text: #4a463c; --muted: #857f72; }
body.t-southlight .ws-nav { background: color-mix(in srgb, #e3dccd 90%, transparent); border-bottom: 1px solid #cfc6b2; }
body.t-southlight .ws-section { padding: 124px 0; }
body.t-southlight .ws-hero { min-height: 100vh; }
body.t-southlight .ws-hero h1 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 700; letter-spacing: -0.035em; max-width: 17ch; }
body.t-southlight .ws-col-h { text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; font-weight: 700; color: #1f4d4a; margin-bottom: 14px; }
body.t-southlight .ws-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
body.t-southlight .ws-gallery-item img { border-radius: 0; }
body.t-southlight .ws-gallery-cap strong { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; }
body.t-southlight .ws-team-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
body.t-southlight .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; margin-bottom: 16px; }
/* the profile band — image edge-to-edge on one side, copy contained on the other */
body.t-southlight .ws-story { background: #d8d0bc; padding: 0; }
body.t-southlight .ws-story-grid { max-width: none; padding: 0; gap: 0; grid-template-columns: 42% 1fr; align-items: stretch; }
body.t-southlight .ws-story-media img { border-radius: 0; aspect-ratio: auto; height: 100%; min-height: 520px; }
body.t-southlight .ws-story-copy { padding: 116px 48px 116px 72px; max-width: 660px; }
/* the numbered credentials read as a ruled ledger, not a bullet list */
body.t-southlight .ws-list-number li { border-bottom: 1px solid #cfc6b2; padding-bottom: 15px; margin-bottom: 15px; }
body.t-southlight .ws-logos-row img { height: 46px; filter: grayscale(1); opacity: 0.9; }
body.t-southlight .ws-quoteblock { background: #1f4d4a; }
body.t-southlight .ws-quote-t { color: #e3dccd; font-style: normal; font-weight: 400; }
body.t-southlight .ws-quote-a { color: #9dbeba; }
body.t-southlight .ws-title-h { font-size: clamp(44px, 9vw, 112px); font-weight: 800; letter-spacing: -0.05em; }
body.t-southlight .btn.brand { background: #1f4d4a; color: #e3dccd; }
body.t-southlight .btn.brand:hover { background: #173b39; }
@media (max-width: 900px) {
  body.t-southlight .ws-section { padding: 64px 0; }
  body.t-southlight .ws-gallery-grid, body.t-southlight .ws-team-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-southlight .ws-story-grid { grid-template-columns: 1fr; }
  body.t-southlight .ws-story-media img { min-height: 320px; }
  body.t-southlight .ws-story-copy { padding: 44px 22px 56px; }
}

/* southlight — dune sand by day, the same veld after dark by night */
html[data-theme="dark"] body.t-southlight.ws-body { --bg: #16150f; --fg: #bdb6a5; --heading: #ece5d5; --text: #bdb6a5; --muted: #857f70; }
html[data-theme="dark"] body.t-southlight { background: #16150f; }
html[data-theme="dark"] body.t-southlight .ws-nav { background: color-mix(in srgb, #16150f 90%, transparent); border-bottom-color: #2c2a20; }
html[data-theme="dark"] body.t-southlight .ws-story { background: #1e1c14; }
html[data-theme="dark"] body.t-southlight .ws-story-copy p,
html[data-theme="dark"] body.t-southlight .ws-member p,
html[data-theme="dark"] body.t-southlight .ws-sub,
html[data-theme="dark"] body.t-southlight .ws-title-sub { color: #bdb6a5; }
html[data-theme="dark"] body.t-southlight .ws-list-number li { border-bottom-color: #2c2a20; }
html[data-theme="dark"] body.t-southlight .ws-col-h { color: #7fb0aa; }
html[data-theme="dark"] body.t-southlight .ws-field input,
html[data-theme="dark"] body.t-southlight .ws-field textarea,
html[data-theme="dark"] body.t-southlight .ws-field select { background: #1e1c14; border-color: #2c2a20; color: #ece5d5; }
html[data-theme="dark"] body.t-southlight .btn.brand { background: #5f9e97; color: #16150f; }