/* ---------- Quorum — workplace law & CCMA (WEBSITE, bridge 99) --------------
   STRUCTURAL MOVE — ONE GROUND, HAIRLINE RULES, THREE INVERSIONS: every band on
   the page sits on the same bone paper and is cut off from the one above it by a
   single black hairline, so the whole thing reads as a ruled brief rather than a
   stack of cards. Exactly three blocks invert to near-black ink — the hero, the
   four-up counter row and the middle retainer card — and nothing else is dark.
   The zebra wash is overruled at equal weight (same :not() tail, later in the
   file) so no band can tint itself. Accent is one dry clay red: the section
   label rules, the plate ledger, the featured card's edge. No blue, no gradient,
   no glass, no shadow. The nav is absolute rather than fixed so it rides on the
   first slide and then leaves — a fixed bar over bone paper would collide with
   the type it scrolls across. Section targeting is by class or by the renderer's
   own anchor ids (#story, #story-2) — never :nth-of-type. */
body.t-quorum.ws-body {
  --bg: #f4f1e9; --fg: #3a3833; --heading: #12110f; --text: #3a3833; --muted: #7b776e;
  --qm-ink: #12110f; --qm-on: #f4f1e9; --qm-on-mute: #9d988e;
  --qm-rule: #12110f; --qm-hair: rgba(18, 17, 15, .16); --qm-clay: #9c3b2e; --qm-clay-lit: #c4614f;
  --hero-a: rgba(12, 11, 10, .44); --hero-b: rgba(12, 11, 10, .74);
}
body.t-quorum { background: var(--bg); }
body.t-quorum .ws-section:not(.ws-cta):not(.ws-shoplink) { background: var(--bg); }
body.t-quorum .ws-section { padding: 86px 0; border-top: 1px solid var(--qm-rule); }
body.t-quorum .ws-container:not(.ws-narrow) { max-width: 1160px; padding: 0 30px; }

/* nav — rides on the first slide, then goes with it */
body.t-quorum .ws-nav { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; backdrop-filter: none; }
body.t-quorum .ws-nav-inner { height: 80px; color: var(--qm-on); }
body.t-quorum .ws-brand { color: var(--qm-on); font-size: 13.5px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; }
body.t-quorum .ws-nav-links { margin: 0 auto 0 44px; justify-content: flex-start; gap: 26px; }
body.t-quorum .ws-nav-links a { color: var(--qm-on); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .76; }
body.t-quorum .ws-nav-links a:hover, body.t-quorum .ws-nav-links a.on { color: var(--qm-clay-lit); opacity: 1; }

/* INVERSION ONE — the figure leads, the practice lines stand beside it */
body.t-quorum .ws-hero { min-height: 100vh; align-items: flex-end; }
body.t-quorum .ws-hero-inner { max-width: 1160px; padding: 0 30px 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32ch); gap: 0 clamp(28px, 5vw, 70px); align-items: end; }
body.t-quorum .ws-hero h1 { grid-column: 1; max-width: none; margin: 0; font-size: clamp(50px, 9.2vw, 116px); font-weight: 700; letter-spacing: -.05em; line-height: .92; text-shadow: none; }
body.t-quorum .ws-hero p { grid-column: 2; max-width: none; margin: 0 0 24px; padding-top: 18px; border-top: 1px solid rgba(244, 241, 233, .42); font-size: 14.5px; line-height: 1.74; opacity: .92; }
body.t-quorum .ws-hero-cta { grid-column: 2; justify-self: start; }
body.t-quorum.ws-body .btn.brand { background: var(--qm-ink); border-color: var(--qm-ink); color: var(--qm-on); border-radius: 0; box-shadow: none; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 16px 30px; }
body.t-quorum.ws-body .btn.brand:hover { background: var(--qm-clay); border-color: var(--qm-clay); opacity: 1; }
body.t-quorum.ws-body .ws-hero-cta.btn.brand { background: var(--qm-on); border-color: var(--qm-on); color: var(--qm-ink); }
body.t-quorum.ws-body .ws-hero-cta.btn.brand:hover { background: var(--qm-clay); border-color: var(--qm-clay); color: var(--qm-on); }

/* labels, not headlines — except in the narrow column, which is the page's voice */
body.t-quorum .ws-h2, body.t-quorum .ws-story-copy h2 { text-align: left; text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 700; color: var(--heading); margin: 0 0 28px; }
body.t-quorum .ws-h2::after, body.t-quorum .ws-story-copy h2::after { content: ''; display: block; width: 34px; height: 1px; background: var(--qm-clay); margin-top: 14px; }
body.t-quorum .ws-sub { text-align: left; max-width: 54ch; margin: 0 0 34px; font-size: 15px; line-height: 1.75; color: var(--muted); }

/* THE JOLT — straight off a full-viewport stage into 62 characters, left-ranged */
body.t-quorum .ws-richtext .ws-narrow { max-width: 62ch; margin-left: max(30px, calc((100% - 1100px) / 2)); margin-right: 30px; padding: 0; }
body.t-quorum .ws-richtext .ws-h2 { text-transform: none; letter-spacing: -.03em; font-size: clamp(25px, 3.3vw, 40px); line-height: 1.14; margin: 0 0 26px; }
body.t-quorum .ws-richtext .ws-h2::after { content: none; }
body.t-quorum .ws-richtext p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.82; color: var(--text); }
body.t-quorum .ws-richtext p:last-child { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--qm-clay); color: var(--qm-clay); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7; }

/* the name-plate band — set in our own type, edge to edge, a rule between halves */
body.t-quorum .ws-listblock { padding: 0; }
body.t-quorum .ws-listblock .ws-narrow { max-width: none; padding: 26px 0 0; }
body.t-quorum .ws-listblock .ws-h2 { text-align: center; margin: 0; color: var(--muted); }
body.t-quorum .ws-listblock .ws-h2::after { margin: 12px auto 0; }
body.t-quorum .ws-list-bullet { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); list-style: none; padding: 0; margin: 22px 0 0; }
body.t-quorum .ws-list-bullet li { margin: 0; padding: 24px 6px; text-align: center; border-left: 1px solid var(--qm-hair); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--heading); }
body.t-quorum .ws-list-bullet li:first-child { border-left: 0; }

/* the split band, twice — the second one rotated. Only the first carries figures */
body.t-quorum .ws-story-grid { gap: clamp(30px, 5vw, 70px); align-items: center; }
body.t-quorum .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 3; }
body.t-quorum .ws-story-copy p { white-space: pre-line; font-size: 16px; line-height: 1.8; color: var(--text); }
body.t-quorum #story .ws-story-copy p::first-line { font-size: clamp(19px, 2.3vw, 27px); font-weight: 700; letter-spacing: -.025em; color: var(--heading); }

/* THE SPINE — eight portraits, four across and two down, no orphan */
body.t-quorum .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 26px; }
body.t-quorum .ws-member { text-align: left; }
body.t-quorum .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; margin: 0 0 16px; filter: grayscale(1); }
body.t-quorum .ws-member strong { font-size: 15.5px; font-weight: 700; color: var(--heading); }
body.t-quorum .ws-member .muted.small { display: block; margin-top: 5px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--qm-clay); }
body.t-quorum .ws-member p { margin: 12px 0 0; font-size: 13px; line-height: 1.62; color: var(--muted); }

/* INVERSION TWO — real money on a website page, the middle card in ink */
body.t-quorum .ws-pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: none; }
body.t-quorum .ws-plan { background: transparent; border: 1px solid var(--qm-hair); border-left-width: 0; border-radius: 0; padding: 34px 28px 36px; text-align: left; }
body.t-quorum .ws-plan:first-child { border-left-width: 1px; }
body.t-quorum .ws-plan h3 { margin: 0 0 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
body.t-quorum .ws-plan-amt { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.045em; color: var(--heading); }
body.t-quorum .ws-plan ul { display: block; margin: 24px 0 28px; }
body.t-quorum .ws-plan li { padding: 11px 0; border-top: 1px solid var(--qm-hair); font-size: 13.5px; line-height: 1.55; color: var(--text); }
body.t-quorum .ws-plan li::before { content: none; }
body.t-quorum .ws-plan:nth-child(2) { background: var(--qm-ink); border: 1px solid var(--qm-clay); color: var(--qm-on); }
body.t-quorum .ws-plan:nth-child(2) h3 { color: var(--qm-clay-lit); }
body.t-quorum .ws-plan:nth-child(2) .ws-plan-amt { color: var(--qm-on); }
body.t-quorum .ws-plan:nth-child(2) li { border-top-color: rgba(244, 241, 233, .2); color: var(--qm-on-mute); }
body.t-quorum .ws-plan:nth-child(2) .btn.brand { background: var(--qm-on); border-color: var(--qm-on); color: var(--qm-ink); }

/* INVERSION THREE — the bare counter row, four claims, gapless */
body.t-quorum .ws-features:not(.ws-cta):not(.ws-shoplink) { background: var(--qm-ink); }
body.t-quorum .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-quorum .ws-feature { text-align: left; padding: 4px clamp(18px, 2.6vw, 36px); border-left: 1px solid rgba(244, 241, 233, .2); }
body.t-quorum .ws-feature:first-child { border-left: 0; padding-left: 0; }
body.t-quorum .ws-feature-icon { margin: 0 0 20px; color: var(--qm-clay-lit); }
body.t-quorum .ws-feature h3 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.045em; color: var(--qm-on); }
body.t-quorum .ws-feature p { margin: 0; font-size: 13px; line-height: 1.66; color: var(--qm-on-mute); }

body.t-quorum .ws-testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
body.t-quorum .ws-quote { background: transparent; border: 0; border-top: 1px solid var(--qm-rule); border-radius: 0; box-shadow: none; padding: 22px 0 0; }
body.t-quorum .ws-quote blockquote { font-size: 15px; line-height: 1.76; color: var(--text); }
body.t-quorum .ws-quote blockquote::before { content: none; }
body.t-quorum .ws-quote figcaption, body.t-quorum .ws-quote figcaption .muted { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--qm-clay); }

/* the close — address one side, four fields the other */
body.t-quorum .ws-contact .ws-narrow { max-width: 1160px; padding: 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 6vw, 84px); align-items: start; }
body.t-quorum .ws-contact .ws-h2, body.t-quorum .ws-contact .ws-sub { grid-column: 1; }
body.t-quorum .ws-contact .ws-sub { max-width: 36ch; margin: 0; white-space: pre-line; font-size: 14px; line-height: 1.95; color: var(--text); }
body.t-quorum .ws-contact .ws-form { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin: 0; }
body.t-quorum .ws-field label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.t-quorum .ws-field input, body.t-quorum .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--qm-hair); border-radius: 0; padding: 10px 0; color: var(--heading); }
body.t-quorum .ws-footer { border-top: 1px solid var(--qm-rule); }

@media (max-width: 1040px) { body.t-quorum .ws-list-bullet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  body.t-quorum .ws-section { padding: 58px 0; }
  body.t-quorum .ws-listblock { padding: 0; }
  body.t-quorum .ws-hero { min-height: 84vh; }
  body.t-quorum .ws-hero-inner, body.t-quorum .ws-contact .ws-narrow { grid-template-columns: 1fr; }
  body.t-quorum .ws-hero h1, body.t-quorum .ws-hero p, body.t-quorum .ws-hero-cta { grid-column: 1; }
  body.t-quorum .ws-hero p { margin-top: 22px; }
  body.t-quorum .ws-contact .ws-form { grid-column: 1; grid-row: auto; margin-top: 34px; }
  body.t-quorum .ws-team-grid, body.t-quorum .ws-features-grid, body.t-quorum .ws-list-bullet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-quorum .ws-pricing-grid, body.t-quorum .ws-testimonials-grid { grid-template-columns: 1fr; }
  body.t-quorum .ws-plan { border-left-width: 1px; }
  body.t-quorum .ws-feature { padding: 26px 0; border-left: 0; border-top: 1px solid rgba(244, 241, 233, .2); }
  body.t-quorum .ws-feature:first-child { border-top: 0; }
}
@media (max-width: 760px) {
  body.t-quorum .ws-nav-links { margin: 0; background: var(--qm-ink); border-color: var(--qm-hair); border-radius: 0; box-shadow: none; }
  body.t-quorum .ws-nav-links a { color: var(--qm-on); font-size: 12px; padding: 13px 12px; }
}

/* night — same brief, read under a lamp: bone becomes soot, the hairlines invert */
html[data-theme="dark"] body.t-quorum.ws-body {
  --bg: #131210; --fg: #a8a49b; --heading: #f2efe6; --text: #a8a49b; --muted: #7a766d;
  --qm-ink: #080807; --qm-on: #f2efe6; --qm-on-mute: #918c83;
  --qm-rule: #38352e; --qm-hair: rgba(242, 239, 230, .17); --qm-clay: #c4614f; --qm-clay-lit: #d97764;
  --hero-a: rgba(6, 6, 5, .52); --hero-b: rgba(6, 6, 5, .80);
}
html[data-theme="dark"] body.t-quorum { background: #131210; }
html[data-theme="dark"] body.t-quorum .ws-section:not(.ws-cta):not(.ws-shoplink) { background: #131210; }
html[data-theme="dark"] body.t-quorum .ws-features:not(.ws-cta):not(.ws-shoplink) { background: #080807; }
html[data-theme="dark"] body.t-quorum .ws-member-photo img { filter: grayscale(1) brightness(.86); }
html[data-theme="dark"] body.t-quorum.ws-body .btn.brand { background: #f2efe6; border-color: #f2efe6; color: #131210; }
html[data-theme="dark"] body.t-quorum.ws-body .btn.brand:hover { background: var(--qm-clay); border-color: var(--qm-clay); color: #131210; }