/* ---- Stut — business rescue & turnaround 175 --------------------------------
   THE STRUCTURAL MOVE: one unbroken pale cement ground from the opaque nav bar
   all the way to the footer, and the four-up practice band is the ONLY thing on
   it that ever goes full-bleed near-black. Everything else stays contained on
   the same grey, so the page alternates bleed and contained instead of running
   as a single ladder. Hazard orange (shoring props, site tape) is spent on
   exactly three jobs — the hero button, the rule above each of the four icons,
   and the opening quote mark on the client testimonial hoisted to second
   position — and nowhere else. The nav is STATIC, not sticky and not floating:
   it sits above the hero rather than over it, brand hard left. The zebra wash is
   overruled at equal weight so no band can tint itself, and the dark band rule
   is written AFTER it at the same specificity so it wins. Every target is a
   class or the renderer's own anchor id — never :nth-of-type. */
body.t-stut.ws-body {
  --bg: #e5e3dd; --fg: #3d3b35; --heading: #171612; --text: #3d3b35; --muted: #75726a;
  --st-ink: #121210; --st-on: #e8e6e0; --st-on-mute: #9b978e;
  --st-hair: rgba(23, 22, 18, .17); --st-orange: #e2620f;
  --hero-a: rgba(14, 13, 11, .40); --hero-b: rgba(14, 13, 11, .72);
}
body.t-stut, body.t-stut .ws-section:not(.ws-cta):not(.ws-shoplink) { background: var(--bg, #e5e3dd); }
body.t-stut .ws-section { padding: 84px 0; }

/* the bar sits ABOVE the slide, it never rides on it — brand left, links right */
body.t-stut .ws-nav { position: static; background: var(--bg, #e5e3dd); backdrop-filter: none; border-bottom: 1px solid var(--st-hair); }
body.t-stut .ws-brand { font-size: 14px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--heading); }
body.t-stut .ws-nav-links a { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--heading); opacity: .72; }

/* headings are site signage, not headlines — the page's voice is in the paragraphs */
body.t-stut .ws-h2, body.t-stut .ws-quote-a { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

body.t-stut .ws-hero { min-height: 100vh; }
body.t-stut .ws-hero h1 { font-size: clamp(38px, 6.6vw, 82px); font-weight: 700; letter-spacing: -.04em; line-height: 1.01; max-width: 17ch; text-shadow: none; }
body.t-stut.ws-body .btn.brand { background: var(--st-orange); color: #ffffff; border-radius: 0; box-shadow: none; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 17px 34px; }

/* THE ONE BLEED — four tiles, edge to edge, the only dark block on the page */
body.t-stut .ws-features:not(.ws-cta):not(.ws-shoplink) { background: var(--st-ink); padding: 96px 0; }
body.t-stut .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 48px); }
body.t-stut .ws-feature { text-align: left; padding: 0; }
body.t-stut .ws-feature-icon { margin: 0 0 22px; padding-top: 22px; border-top: 3px solid var(--st-orange); color: var(--st-on); }
body.t-stut .ws-feature h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--st-on); }
body.t-stut .ws-feature p { font-size: 14px; line-height: 1.72; color: var(--st-on-mute); }

/* second position, before the firm has explained a thing — one oversized mark */
body.t-stut .ws-quote-t { font-style: normal; font-weight: 500; font-size: clamp(19px, 2.4vw, 28px); line-height: 1.52; color: var(--heading); }
body.t-stut .ws-quote-t::before { content: "“"; display: block; margin: 0 0 4px; font-size: 92px; line-height: .66; color: var(--st-orange); }

/* exactly two, oversized — a portrait against a real paragraph, not a headshot grid */
body.t-stut .ws-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 64px); }
body.t-stut .ws-member { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 0 26px; align-items: start; text-align: left; }
body.t-stut .ws-member-photo { grid-row: 1 / span 3; }
body.t-stut .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; margin: 0; filter: grayscale(1); }
body.t-stut .ws-member strong { font-size: 19px; letter-spacing: -.02em; color: var(--heading); }
body.t-stut .ws-member .muted.small { display: block; margin-top: 7px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.t-stut .ws-member p { margin: 15px 0 0; font-size: 14.5px; line-height: 1.74; color: var(--text); }

body.t-stut .ws-richtext p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.85; color: var(--text); }
body.t-stut .ws-video-frame { border-radius: 0; box-shadow: none; }

/* photographs instead of client marks — six across, one strip, no lettering */
body.t-stut .ws-logos-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; opacity: 1; justify-content: initial; }
body.t-stut .ws-logos-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; filter: grayscale(1); }

body.t-stut .ws-contact .ws-sub { white-space: pre-line; font-size: 14px; line-height: 1.95; color: var(--text); }
body.t-stut .ws-field input, body.t-stut .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--st-hair); border-radius: 0; padding: 10px 0; color: var(--heading); }

@media (max-width: 900px) {
  body.t-stut .ws-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-stut .ws-logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-stut .ws-team-grid { grid-template-columns: 1fr; }
  body.t-stut .ws-hero { min-height: 84vh; }
}
@media (max-width: 620px) {
  body.t-stut .ws-features-grid { grid-template-columns: 1fr; }
  body.t-stut .ws-member { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 0 18px; }
}

/* night — the site office after hours: cement goes to soot, the one dark band
   goes darker still, and the hazard orange lifts so it survives the low ground */
html[data-theme="dark"] body.t-stut.ws-body {
  --bg: #1a1917; --fg: #a6a29a; --heading: #edeae2; --text: #a6a29a; --muted: #7d7a72;
  --st-ink: #0b0b0a; --st-on: #edeae2; --st-on-mute: #928e86;
  --st-hair: rgba(237, 234, 226, .16); --st-orange: #ef7b2c;
  --hero-a: rgba(8, 8, 7, .48); --hero-b: rgba(8, 8, 7, .80);
}
html[data-theme="dark"] body.t-stut .ws-logos-row img, html[data-theme="dark"] body.t-stut .ws-member-photo img { filter: grayscale(1) brightness(.82); }
