/* ── 1. Fixed chrome the live page reveals via JS ───────────────────── */

/* The rail is built by JS on the live site; here it is static markup. Its
   hidden-at-rest state already lives in base-extracted.css
   (.section-pills__item { opacity: 0 } → .section-pills.is-visible …), so
   nothing is needed here — site.js only toggles .is-visible. */

/* Logo wordmark: on the live page .logo lives inside .hero but is position:fixed.
   Same here — no override needed. Only the placeholder length differs. */

/* ── 2. Placeholder media ───────────────────────────────────────────── */

/* Gallery panels are SVG. object-fit:contain on an SVG with a viewBox already
   letterboxes correctly, but Safari needs an explicit height to size width. */
.work-thumb__media .work-thumb__gallery-img { display: block; }

/* Placeholder clip for the five `[data-video]` cards. site.js injects a
   srcless <video class="work-thumb__video"> on scroll-in, exactly as the live
   IntersectionObserver does — the element exists purely to occupy the media
   cell, which is what restores the card from 74px to 294px on mobile. Since it
   has no source it would otherwise paint as an empty black box, so it gets the
   same neutral placeholder wash as the SVG gallery panels. No network request,
   no real footage. Geometry is untouched: sizing comes from the extracted
   stylesheet's `.work-thumb__media > .work-thumb__video` rules. */
video.work-thumb__video:not([src]) {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 12px, rgba(255, 255, 255, 0) 12px 24px),
    linear-gradient(160deg, #2f3b3a 0%, #1d2726 100%);
}

/* The old percentage cap for the 240x80 placeholder marks is gone. The real
   organisation logos vary far too much in aspect ratio for one shared rule —
   sizing is now per-logo, on .tb-card[data-logo="…"] in base-extracted.css. */

/* ── 3. Live-page JS side effects reproduced as static CSS ──────────── */

/* body.has-work-title is set by site.js, exactly as script.js does on the
   live page; the padding rules for it already live in base-extracted.css
   (40px on desktop, 0 below 700px) so nothing is asserted here — an earlier
   version of this file re-declared the desktop value and broke mobile. */

/* The industry filter row only paints once a discipline is chosen. It ships
   inside the banner but is invisible at rest on the live page. */
#work-title-banner .industry-filters { display: none; }
body[data-discipline] #work-title-banner .industry-filters { display: flex; }

/* ── 4. Reduced motion — the original stylesheet has no such block ──── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Entrance states must not be left in their "before" position. */
  .hero-word, .sr-word, .footer-word, .tb-rows,
  .trusted-hed--plain, .testimonial-card, .work-thumb {
    opacity: 1 !important;
    transform: none !important;
  }
  .intro-canvas { display: none; }
  .intro-giant { opacity: 1 !important; visibility: visible !important; }
}