/* ---- gobo (Gobo — Stage lighting & rigging supply 188) — true black, CTB blue ----
   THE STRUCTURAL MOVE: FIVE BLOCKS AND NO STRIP ANYWHERE. The page opens on a
   full-viewport cross-fade with the nav lying transparent on the photograph,
   drops hard to a bare centred column with no picture in it at all, then hands
   the ENTIRE catalogue to one four-across tile wall two rows deep — the only
   image grid on the page — before a split of short factual lines and a narrow
   centred form. The tiles carry no border: they sit a half-step off the ground
   and open on a white plate, which is the only white anywhere. CTB steel-blue is
   spent exactly three times — the ghost control's rule, the price line, and the
   hairline under every heading — and the submit slabs go bone so nothing else
   steals it. The ghost rule is an inset shadow, not a border, so the slab stays
   flat. Both prose blocks are reached by class (.sc-richtext for the centred one,
   .sc-about-copy for the split), never by element position. */
body.t-gobo {
  background: #0b0b0c;
  color: #e9e7e2;
  --gb-ctb: #3f8fce;
  --gb-plate: #ffffff;
  --radius: 0;
  --shadow: none;
  --header-bg: transparent;
  --surface: #141416;
  --surface-2: #1b1b1e;
  --line: #26262a;
  --line-strong: #3a3a40;
  --heading: #f4f2ee;
  --text: #e9e7e2;
  --muted: #8b8a86;
}

/* the bar lies ON the photograph and never stops lying on it — the ground under
   the whole page is the same black as the stage, so a transparent sticky header
   never has to acquire a background halfway down */
body.t-gobo .sf-head, body.t-gobo .sf-header,
body.t-gobo .sf-foot, body.t-gobo .sf-footer, body.t-gobo .sf-cats {
  background: transparent; border-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-gobo .sf-name { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.24em; }
body.t-gobo .btn.brand { background: #e9e7e2; color: #0b0b0c; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 11.5px; padding: 15px 30px; }

/* THE STAGE — the whole first screen, nothing peeking under it */
body.t-gobo .sc-hero { min-height: calc(100vh - 58px); }
body.t-gobo .sc-hero h1 { font-weight: 800; font-size: clamp(32px, 5.4vw, 66px); line-height: 1.04; letter-spacing: -0.03em; }
/* SPEND 1 of 3 — the ghost control's rule, carried as an inset so the control
   keeps no border and stays a flat slab */
body.t-gobo .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1px var(--gb-ctb); color: #e9e7e2; }
body.t-gobo .sc-hero .btn.brand.sc-hero-ghost:hover { background: #e9e7e2; color: #0b0b0c; }

/* SPEND 2 of 3 — one hairline under every heading, and nothing else rules */
body.t-gobo .sc-h2 { text-align: left; font-weight: 700; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.02em; color: var(--heading); padding-bottom: 16px; border-bottom: 1px solid var(--gb-ctb); margin-bottom: 38px; }
body.t-gobo .sc-richtext .sc-h2, body.t-gobo .sc-contact .sc-h2 { text-align: center; }

/* THE QUIET SLAB — no picture in the band at all, centred heading over left-set
   body, and more air above and below it than anything else on the page gets */
body.t-gobo .sc-richtext { max-width: 660px; padding: 108px 20px 92px; }
body.t-gobo .sc-richtext p { text-align: left; color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* THE ONLY IMAGE GRID — four across, two rows, gapped rather than butted. The
   tile loses its border and sits a half-step off the ground; the flat-lay opens
   on a white plate, which is the only white on the page. */
body.t-gobo .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-bottom: 0; }
body.t-gobo .product-card, body.t-gobo .product-card:hover { border-color: transparent; transform: none; box-shadow: none; }
body.t-gobo .product-card .ph { background: var(--gb-plate); aspect-ratio: 4 / 5; }
body.t-gobo .product-card .meta { padding: 16px 16px 20px; }
/* SPEND 3 of 3 */
body.t-gobo .product-card .p { color: var(--gb-ctb); font-weight: 700; margin-top: 6px; }

/* THE FACTUAL LINES — the split's body is a run of one-line facts rather than
   prose, so it is set tabular and spaced like a spec sheet, not a paragraph */
body.t-gobo .sc-about-split { padding: 88px 20px 96px; gap: 60px; align-items: start; }
body.t-gobo .sc-about-media img { aspect-ratio: 3 / 4; }
body.t-gobo .sc-about-copy p { color: var(--text); font-size: 15px; line-height: 2.15; font-variant-numeric: tabular-nums; }

/* the page closes narrow and centred — no picture, no split, one bone slab */
body.t-gobo .sc-contact { max-width: 520px; padding: 24px 20px 112px; }
body.t-gobo .sc-contact-form .btn { align-self: stretch; text-align: center; }

@media (max-width: 900px) {
  body.t-gobo .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-gobo .sc-hero { min-height: 86vh; }
}

/* NIGHT — house lights out. The ground drops the last two steps to pitch, the
   bone comes off its daytime brightness so it stops glaring in a dark room, the
   white plate under each flat-lay dims with it for the same reason, and the CTB
   lifts a shade because #3f8fce was chosen against #0b0b0c and goes flat against
   anything blacker than that. */
html[data-theme="dark"] body.t-gobo {
  background: #050506;
  color: #d6d3cc;
  --gb-ctb: #56a3dd;
  --gb-plate: #e8e5df;
  --header-bg: transparent;
  --surface: #0f0f11;
  --surface-2: #16161a;
  --line: #1e1e22;
  --line-strong: #2f2f36;
  --heading: #eceae4;
  --text: #d6d3cc;
  --muted: #7c7b77;
}
html[data-theme="dark"] body.t-gobo .sf-head, html[data-theme="dark"] body.t-gobo .sf-header,
html[data-theme="dark"] body.t-gobo .sf-foot, html[data-theme="dark"] body.t-gobo .sf-footer,
html[data-theme="dark"] body.t-gobo .sf-cats { background: transparent; border-color: transparent; }
html[data-theme="dark"] body.t-gobo .btn.brand { background: #d6d3cc; color: #050506; }
html[data-theme="dark"] body.t-gobo .sc-hero .btn.brand.sc-hero-ghost { color: #d6d3cc; }
html[data-theme="dark"] body.t-gobo .sc-hero .btn.brand.sc-hero-ghost:hover { background: #d6d3cc; color: #050506; }