/* ==========================================================================
   The Workshop — red and black bays
   The page is rebuilt around solid blocks rather than editorial hairlines:
   a heavy hero, a red statement band, a composed photo grid in full colour,
   the four stages as red bays, and a red close. The rhythm alternates
   black / red / black / red so the page has a pulse rather than a drift.

   Two rules run through the whole thing:
   - photography is never desaturated. The old page ran the gallery at
     grayscale(.7) brightness(.85) and the filmstrip at grayscale(1), which
     turned a photo-led page into fourteen grey rectangles.
   - nothing is a thin centred column. Blocks are edged, filled and sized.
   Prefix: ws-
   ========================================================================== */

.ws { background: #000; position: relative; overflow: clip; }
@supports not (overflow: clip) { .ws { overflow: hidden; } }

.ws-wrap {
  width: 100%; max-width: 1300px;
  margin: 0 auto; padding: 0 24px;
  position: relative; z-index: 5;
}
.ws-wrap--narrow { max-width: 980px; }

/* shared red fill — the deeper ramp, checked for white-text contrast */
.ws-red {
  background:
    radial-gradient(ellipse 70% 58% at 14% 0%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(158deg, #d42535 0%, #bb1c2b 54%, #9c1522 100%);
}

/* ------------------------------------------------------------------ hero */

.ws-hero {
  position: relative;
  height: 100svh; min-height: 640px; max-height: 940px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.ws-hero__img { position: absolute; inset: 0; }
.ws-hero__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  filter: brightness(.72) contrast(1.06);
}
.ws-hero__img:after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 26%, rgba(0,0,0,.55) 68%, #000 100%);
}
/* a red slab anchoring the headline to the bottom edge */
.ws-hero:after {
  content: ""; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  height: 6px; background: var(--primary);
}

.ws-hero__type { position: relative; z-index: 3; width: 100%; padding-bottom: 62px; }
.ws-hero h1 {
  margin: 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(2.7rem, 9.2vw, 8.2rem); line-height: .86; letter-spacing: -.025em;
}
.ws-hero h1 em {
  font-style: normal; display: block; color: var(--primary);
}

/* the meta line becomes a row of filled cells — a spec strip, not a caption */
.ws-hero__meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 44px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ws-hero__meta span {
  padding: 20px 22px;
  border-right: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.8); text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
}
.ws-hero__meta span:last-child { border-right: 0; }
.ws-hero__meta span b { color: var(--primary); font-weight: 700; font-size: 15px; }

.ws-scroll {
  position: absolute; right: 24px; bottom: 62px; z-index: 4;
  writing-mode: vertical-rl;
  color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .28em;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  display: flex; align-items: center; gap: 14px;
}
.ws-scroll:after {
  content: ""; width: 1px; height: 60px;
  background: linear-gradient(180deg, var(--primary), transparent);
}

/* ------------------------------------------------------- statement band */

.ws-statement { padding: 0; }
.ws-statement__in { padding: 86px 0 78px; }
.ws-statement p {
  margin: 0; color: #fff;
  font-family: 'Chakra Petch', sans-serif; font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.22; letter-spacing: -.01em;
  text-wrap: balance;
}
.ws-statement p b { font-weight: 700; color: #fff; }
.ws-statement__addr {
  display: inline-block; margin-top: 34px;
  border: 1px solid rgba(255,255,255,.5); padding: 12px 20px;
  color: #fff; text-transform: uppercase; letter-spacing: .2em;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600;
}

/* ------------------------------------------------------------ photo grid */

.ws-wall { padding: 96px 0 104px; }
.ws-wall__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; margin-bottom: 36px;
}
.ws-wall__head h2 {
  margin: 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem); line-height: 1.02; letter-spacing: -.02em;
}
.ws-wall__head p { margin: 0; color: rgba(255,255,255,.55); font-weight: 300; font-size: 14.5px; max-width: 40ch; }

/* Fourteen photographs over four columns: twelve single cells plus two
   doubles is exactly twenty cells, so the block closes off square with no
   ragged tail. Dense packing keeps it that way whatever order they sit in. */
.ws-masonry {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr; gap: 12px; grid-auto-flow: row dense;
}
.ws-shot {
  position: relative; margin: 0; overflow: hidden; cursor: pointer;
  background: #101010; aspect-ratio: 4 / 3;
  border: 1px solid rgba(255,255,255,.1);
}
.ws-shot--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.ws-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.95) contrast(1.03) saturate(1.02);
}
/* captions stay put — hiding them until hover left the grid looking blank */
.ws-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.9));
  color: #fff; text-transform: uppercase; letter-spacing: .1em;
  font-family: 'Chakra Petch', sans-serif; font-size: 10.5px; font-weight: 600;
}
.ws-shot--big figcaption { padding: 60px 22px 20px; font-size: 12px; }
.ws-shot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ------------------------------------------------------------- the bays */

.ws-process { padding: 0 0 104px; }
.ws-process .ws-wall__head { margin-bottom: 36px; }
.ws-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ws-node {
  position: relative; overflow: hidden;
  padding: 40px 40px 44px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(216,35,52,.16);
}
.ws-node b {
  /* .75 not .55 — the numeral sits in the lightest corner of the card, where
     anything dimmer drops under the 3:1 large-text floor */
  display: block; color: rgba(255,255,255,.75);
  font-family: 'Chakra Petch', sans-serif; font-size: 3.4rem; font-weight: 700; line-height: .82;
  letter-spacing: -.03em;
}
.ws-node h3 {
  margin: 20px 0 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: .03em;
}
.ws-node p { margin: 14px 0 0; color: rgba(255,255,255,.95); font-weight: 300; font-size: 14.5px; line-height: 1.8; }

.ws-callout {
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: #0a0a0a;
  padding: 34px 40px;
}
.ws-callout b {
  display: block; margin-bottom: 12px; color: var(--primary);
  text-transform: uppercase; letter-spacing: .18em;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600;
}
.ws-callout p { margin: 0; color: rgba(255,255,255,.8); font-weight: 300; line-height: 1.85; font-size: 15px; }
.ws-callout a { color: var(--primary); text-transform: none; font-family: inherit; font-size: inherit; display: inline; }

/* ------------------------------------------------------------ bleed row */

.ws-bleed { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; gap: 0; }
.ws-bleed__media { position: relative; min-height: 620px; }
.ws-bleed__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.9) contrast(1.04);
}
.ws-bleed__body { padding: 96px 6vw 96px 72px; background: #050505; }
.ws-bleed__body h2 {
  margin: 0 0 26px; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.04; letter-spacing: -.02em;
}
.ws-bleed__body p { color: rgba(255,255,255,.62); font-weight: 300; line-height: 1.9; margin: 0 0 18px; }
.ws-bleed__body p strong { color: #fff; font-weight: 600; }
.ws-bleed__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--primary); text-transform: uppercase; letter-spacing: .22em;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600;
  margin-bottom: 22px;
}
.ws-bleed__kicker:before { content: ""; width: 28px; height: 2px; background: var(--primary); }

/* -------------------------------------------------------------- red end */

.ws-end { padding: 88px 0; }
.ws-end__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.ws-end h2 {
  margin: 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.02; letter-spacing: -.02em;
}
.ws-end p { margin: 16px 0 0; color: rgba(255,255,255,.95); font-weight: 300; max-width: 46ch; line-height: 1.8; }
.ws-end__acts { display: flex; gap: 14px; flex-wrap: wrap; }
.ws-end__acts a {
  border: 2px solid #fff; color: #fff; background: transparent;
  padding: 16px 30px; min-height: 58px;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase; letter-spacing: .12em;
  font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600;
  transition: background .4s cubic-bezier(.22,.61,.36,1), color .4s, border-color .4s;
}
.ws-end__acts a:hover { background: #000; border-color: #000; color: #fff; }
.ws-end__acts a.is-solid { background: #000; border-color: #000; }
.ws-end__acts a.is-solid:hover { background: #fff; color: #bb1c2b; border-color: #fff; }

/* --------------------------------------------------- half in, half out

   The one statistic on this page that contradicts the page itself: half the
   work never reaches these bays. It is drawn as a literal 50/50 meter rather
   than a sentence, then two panels that are deliberately unequal in weight —
   the outbound one is filled red, because that is the half people do not
   expect. Nothing here repeats the four-bay flow above it.
   ---------------------------------------------------------------------- */

.ws-half { padding: 0 0 104px; }
.ws-half__head { max-width: 880px; margin-bottom: 40px; }
.ws-half__head h2 {
  margin: 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem); line-height: 1.02; letter-spacing: -.02em;
}
.ws-half__head p {
  margin: 20px 0 0; color: rgba(255,255,255,.62);
  font-weight: 300; font-size: 15.5px; line-height: 1.85; max-width: 66ch;
}
.ws-half__head p strong { color: #fff; font-weight: 600; }

/* the meter */
.ws-half__meter { margin-bottom: 16px; }
.ws-half__bar { display: grid; grid-template-columns: 1fr 1fr; height: 74px; }
.ws-half__seg {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  border: 1px solid rgba(255,255,255,.16);
}
.ws-half__seg b {
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); letter-spacing: -.02em; line-height: 1;
}
.ws-half__seg--here { background: #0a0a0a; color: rgba(255,255,255,.5); }
.ws-half__seg--there {
  border-left: 0; color: #fff;
  background: linear-gradient(158deg, #d42535 0%, #bb1c2b 54%, #9c1522 100%);
}
.ws-half__ticks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: 10px;
}
.ws-half__ticks span {
  color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .18em;
  font-family: 'Chakra Petch', sans-serif; font-size: 10.5px; font-weight: 600;
  text-align: center;
}
.ws-half__ticks span:last-child { color: var(--primary); }

/* the two panels */
.ws-half__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.ws-half__panel {
  padding: 40px 40px 44px;
  border: 1px solid rgba(255,255,255,.16);
  background: #0a0a0a;
}
.ws-half__panel--out { box-shadow: 0 18px 40px rgba(216,35,52,.16); }
.ws-half__tag {
  display: block; margin-bottom: 16px;
  color: var(--primary); text-transform: uppercase; letter-spacing: .2em;
  font-family: 'Chakra Petch', sans-serif; font-size: 10.5px; font-weight: 600;
}
.ws-half__panel--out .ws-half__tag { color: rgba(255,255,255,.85); }
.ws-half__panel h3 {
  margin: 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: .03em;
}
.ws-half__panel p { margin: 14px 0 0; color: rgba(255,255,255,.62); font-weight: 300; font-size: 14.5px; line-height: 1.8; }
.ws-half__panel--out p { color: rgba(255,255,255,.95); }

/* sub-contractors */
.ws-half__sub {
  margin-top: 16px; padding: 34px 40px;
  border: 1px solid rgba(255,255,255,.16); border-left: 3px solid var(--primary);
  background: #070707;
}
.ws-half__sub b {
  display: block; margin-bottom: 12px; color: var(--primary);
  text-transform: uppercase; letter-spacing: .18em;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600;
}
.ws-half__sub p { margin: 0; color: rgba(255,255,255,.8); font-weight: 300; line-height: 1.85; font-size: 15px; }

/* reach us */
.ws-half__reach {
  margin-top: 16px; padding: 32px 40px;
  border: 1px solid rgba(255,255,255,.16); background: #0a0a0a;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.ws-half__reach-lede b {
  display: block; color: #fff; text-transform: uppercase; letter-spacing: .06em;
  font-family: 'Chakra Petch', sans-serif; font-size: 19px; font-weight: 700;
}
.ws-half__reach-lede p { margin: 8px 0 0; color: rgba(255,255,255,.55); font-weight: 300; font-size: 14px; }
.ws-half__reach-acts { display: flex; gap: 12px; flex-wrap: wrap; }

.ws-chan {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 62px; padding: 12px 26px;
  border: 2px solid rgba(255,255,255,.28); color: #fff;
  transition: background .4s cubic-bezier(.22,.61,.36,1), color .4s, border-color .4s;
}
.ws-chan svg { width: 22px; height: 22px; flex: none; }
.ws-chan span {
  display: flex; flex-direction: column; gap: 3px;
  text-transform: uppercase; letter-spacing: .16em;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.6);
  transition: color .4s ease;
}
.ws-chan span em {
  font-style: normal; text-transform: none; letter-spacing: .01em;
  font-size: 15px; font-weight: 700; color: #fff;
}
.ws-chan:hover { background: #fff; border-color: #fff; color: #000; }
.ws-chan:hover span, .ws-chan:hover span em { color: #000; }
.ws-chan--wa { border-color: rgba(216,35,52,.55); }
.ws-chan--wa:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.ws-chan--wa:hover span, .ws-chan--wa:hover span em { color: #fff; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .ws-bleed { grid-template-columns: 1fr; }
  .ws-bleed__media { min-height: 400px; }
  .ws-bleed__body { padding: 64px 24px; }
}

@media (max-width: 900px) {
  /* twenty cells over three columns leaves one empty at the very end — a
     short last row, which is what a gallery should do anyway */
  .ws-masonry { grid-template-columns: repeat(3, 1fr); }
  .ws-flow { grid-template-columns: 1fr; }
  .ws-node { padding: 32px 30px 34px; }
  .ws-half__pair { grid-template-columns: 1fr; }
  .ws-half__panel { padding: 32px 30px 34px; }
  .ws-half__sub, .ws-half__reach { padding: 28px 30px; }
  .ws-hero__meta { grid-template-columns: repeat(2, 1fr); }
  .ws-hero__meta span:nth-child(2) { border-right: 0; }
  .ws-hero__meta span:nth-child(1), .ws-hero__meta span:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.16); }
  .ws-wall { padding: 72px 0 78px; }
  .ws-statement__in { padding: 66px 0 60px; }
}

@media (max-width: 620px) {
  .ws-masonry { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ws-shot--big { grid-column: span 2; grid-row: span 1; aspect-ratio: 3 / 2; }
  .ws-hero { height: 88svh; min-height: 540px; }
  .ws-hero__type { padding-bottom: 44px; }
  .ws-scroll { display: none; }
  .ws-hero__meta { grid-template-columns: 1fr; }
  .ws-hero__meta span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .ws-hero__meta span:last-child { border-bottom: 0; }
  .ws-end__in { flex-direction: column; align-items: flex-start; }
  .ws-end__acts a { width: 100%; }
  .ws-node b { font-size: 2.8rem; }
  .ws-half { padding-bottom: 76px; }
  .ws-half__bar { height: 62px; }
  .ws-half__reach { flex-direction: column; align-items: flex-start; }
  .ws-half__reach-acts { width: 100%; }
  .ws-chan { width: 100%; }
}