/* Homepage layout, colour roles and section styles. No shared brand tokens or other routes are replaced. */
body.workshop-home {
  --site-paper: #F9F9F9; --site-white: #fff; --site-ink: #1B1B1B;
  --site-muted: var(--site-ink); --site-tint: #EAEAEA; --site-line: #D7D7D7;
  --accent: var(--color-orange-700); --pl-paper: #F9F9F9; --pl-paper-bright: #fff;
  --pl-ink: #1B1B1B; --pl-mist: #EAEAEA; --pl-line: #D7D7D7;
  --bg: #F9F9F9; --text: #1B1B1B; --page-bg: #F9F9F9; --grid-line: #D7D7D7;
  --w-orange: var(--color-orange-700); --w-blue: var(--brand-orange-85); --w-green: var(--brand-orange-65); --w-yellow: var(--brand-orange);
  --w-pink: var(--brand-orange); --w-peach: var(--brand-orange); --w-ink: #1B1B1B; --w-line: #D7D7D7;
  /* One text inset inside the rails for every section: 40px, 24px from 800px down. */
  --home-inset: 40px;
  background: #F9F9F9; color: #1B1B1B; transition: none;
}
.workshop-home .pl-header-spacer { height: 60px; border-bottom: 0; background: var(--site-paper); }
.workshop-home .pl-header-spacer__inner { height: 60px; min-height: 60px; border-bottom: 1px solid var(--w-line); }
.workshop-home .home-section { --muted: var(--site-ink); }
.workshop-home main { overflow: clip; }
.w-skip { position: absolute; z-index: 99; top: 4px; left: 4px; transform: translateY(-150%); background: #fff; padding: 12px; }
.w-skip:focus { transform: none; }
.w-eyebrow { font: 12px/16px var(--arch-mono); text-transform: uppercase; letter-spacing: .09em; display: flex; align-items: center; gap: 12px; }
.w-eyebrow::before { content: ''; width: 7px; height: 7px; background: currentColor; flex: none; }
.w-hero { display: grid; grid-template-columns: 1.08fr 1fr; position: relative; border-bottom: 1px solid var(--w-line); }
.w-hero__copy { padding: 36px 0 30px var(--home-inset); position: relative; z-index: 2; }
.w-hero__copy .w-eyebrow { max-width: 380px; }
.w-hero h1 { font-size: clamp(62px,6.6vw,106px); line-height: .98; font-weight: 600; letter-spacing: -.04em; margin: 40px -80px 24px 0; }
.w-hero h1 > span { display: block; }
/* Each display line is pulled in by its first glyph's side bearing, so the ink starts on the eyebrow and paragraph edge.
   The first line's double-width word gap is spacing, so copied text keeps a single space. */
.w-hero h1 > span:first-child { margin-left: -.026em; word-spacing: .153em; }
.w-hero h1 .w-impossible { color: var(--w-orange); font-weight: 500; margin-left: -.063em; }
/* Measures are em equivalents of Instrument Sans ch (1ch = .666em), so text boxes keep their width while the web font loads. */
.w-hero__copy > p { font-size: 16px; line-height: 24px; max-width: 23.31em; margin: 24px 0; color: var(--w-ink); }
.w-hero__art { min-width: 0; position: relative; overflow: hidden; border-left: 1px solid var(--w-line); background: var(--site-paper); display: flex; flex-direction: column; }
.w-art-caption { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--home-inset); font: 12px/16px var(--arch-mono); text-transform: uppercase; letter-spacing: .07em; z-index: 2; }
.w-art-caption > span { text-wrap: balance; }
.w-hero__foot { grid-column: 1/-1; border-top: 1px solid var(--w-line); display: grid; grid-template-columns: 1.08fr 1fr; }
.w-hero__foot > p { align-self: center; padding: 24px var(--home-inset); font-size: 14px; max-width: 31.97em; line-height: 20px; }
.w-hero__people { display: flex; gap: 0; padding-inline: var(--home-inset); align-items: center; border-left: 1px solid var(--w-line); text-decoration:none; }
.w-hero__people img { width: 48px; height: 57px; object-fit: cover; object-position: top; filter: grayscale(1); margin-right: 4px; }
.w-hero__people span { margin-left: 16px; font-size: 14px; line-height: 20px; }
.w-hero__people::after { content:''; display:block; flex:none; width:18px; height:18px; margin-left:auto; background:currentColor; -webkit-mask:url('../assets/icons/pixel-chevron-right.svg') center / contain no-repeat; mask:url('../assets/icons/pixel-chevron-right.svg') center / contain no-repeat; }
.w-hero__people:hover::after { animation:pl-button-arrow-slide .32s steps(4,end) both; }
.w-hero__people:hover { color: #1B1B1B; }
.w-hero__people:hover img { filter: grayscale(0); }
@media(max-width:420px){.w-hero__people img{width:36px;height:43px;margin-right:3px}.w-hero__people span{font-size:12px;line-height:16px;margin-left:12px}}
@media(prefers-reduced-motion:reduce){.w-hero__people:hover::after{animation:none}}
/* Bands between sections stay open: the section above closes them and the next starts without a rule, as the pinned story does. */
.w-divider { height: 60px; background: var(--site-paper); }
/* The intro shares the lab's columns; its 112px gap (1.4 × both 40px insets) starts
   the paragraph on the same edge as the step text below. */
.w-intro { padding: 56px var(--home-inset); display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 112px; border-bottom: 1px solid var(--w-line); align-items: end; }
.w-intro h2 { font-weight: 500; margin-top: 28px; }
.w-intro h2 span { color: var(--w-orange); }
.w-intro > p { max-width: 26.64em; font-size: 16px; line-height: 24px; }
.w-lab { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); border-bottom: 1px solid var(--w-line); background: var(--site-paper); }
.w-lab__board { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--site-paper); border-right: 1px solid var(--w-line); }
.w-lab__board svg { width: 100%; height: 345px; }
.w-lab__route { opacity: 0; }
.w-lab[data-mode="2"] .w-lab__route { opacity: 1; }
.w-lab__content { display: grid; padding: 0; }
.w-lab__step { display: block; text-align: left; width: 100%; padding: 24px var(--home-inset); border-bottom: 1px solid var(--w-line); }
.w-lab__step:last-child { border-bottom: 0; }
.w-lab__step > span:first-child { display: flex; align-items: center; gap: 8px; }
.w-lab__step b { font-size: 20px; font-weight: 500; letter-spacing: -.03em; }
.w-lab__step-copy { display: block; color: var(--w-ink); font-size: 14px; line-height: 20px; padding-top: 12px; text-wrap: pretty; }
.workshop-home .pl-proof { background: #F9F9F9; }
.workshop-home .pl-proof .pl-cell__title { font-weight: 500; }
.workshop-home .pl-proof > .pl-grid { grid-template-columns: 1fr; }
.workshop-home .pl-proof > .pl-grid > .pl-cell { grid-column: auto; padding: 40px var(--home-inset); background: #F9F9F9; border-right: 0; }
/* The client row keeps its five-column rhythm above the compact people strip. */
.workshop-home .pl-clients { grid-template-columns: repeat(5,minmax(0,1fr)); }
.workshop-home .pl-client { padding: 20px; }
.workshop-home .pl-client:nth-child(n) { border-right: 1px solid var(--site-line); }
.workshop-home .pl-client__viewport { height: clamp(100px,9vw,144px); }
.workshop-home .pl-clients__more { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; padding: 24px; border-bottom: 1px solid var(--site-line); background: var(--w-yellow); color: var(--site-ink); font-size: 14px; line-height: 20px; }
.workshop-home .pl-clients__more-title { font-size: clamp(22px,2.3vw,32px); line-height: 1.1; font-weight: 500; letter-spacing: -.035em; }
/* Homepage team header: title and link on the left, carousel arrows on the right. */
.workshop-home .people-heading { --font: "Instrument Sans", sans-serif; --mono: "Martian Mono", monospace; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 24px; padding: 40px var(--home-inset); }
.workshop-home .people-heading__title { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0; border: 0; }
.workshop-home .people-heading #people-title { width: 344px; max-width: 100%; margin: 0; font-weight: 500; color: #1B1B1B; }
.workshop-home .people-heading #people-title span { color: var(--w-orange); }
.workshop-home .people-card { padding: 6px; background: #EAEAEA; }
/* Eight portraits instead of five keeps the original crop at about 60% height.
   Card dividers are 1px gaps, so neither strip edge ever doubles a frame rail. */
.workshop-home .people-strip { gap: 1px; background: var(--site-line); }
.workshop-home .people-strip > .people-card { flex-basis: calc((100% - 7px) / 8); border-right: 0; }
@media (max-width: 880px) {
  .workshop-home .people-strip > .people-card { flex-basis: 30%; }
}
@media (max-width: 540px) {
  .workshop-home .people-strip > .people-card { flex-basis: calc((100% - 1px) / 2); }
}
/* Controls flush with the clipped frame edge draw their focus ring inside. */
.w-hero__people:focus-visible, .w-lab__step:focus-visible { outline-offset: -4px; }
/* In-page links land 16px below the header, where the pinned opportunity story also sits. */
.workshop-home section { scroll-margin-top: 16px; }
@media (max-width: 1100px) {
  .w-hero h1 { font-size: 7vw; }
}
/* Below the pinned story's 901px the intro stacks; two columns would break the heading. */
@media (max-width: 900px) {
  .w-intro { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 880px) {
  .workshop-home .pl-clients { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workshop-home .pl-client:nth-child(2n) { border-right: 0; }
  .workshop-home .pl-clients__more { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  body.workshop-home { --home-inset: 24px; }
  .w-hero { grid-template-columns: 1fr; }
  .w-hero__copy { padding: 32px var(--home-inset) 80px; }
  .w-hero h1 { font-size: clamp(58px,11vw,85px); margin: 40px 0 24px; }
  .w-hero__art { border-left: 0; border-top: 1px solid var(--w-line); }
  .w-hero__foot { grid-template-columns: 1fr; }
  .w-hero__foot > p { padding: 24px var(--home-inset); }
  .w-hero__people { padding: 16px var(--home-inset); border-left: 0; border-top: 1px solid var(--w-line); }
  .w-intro { padding: 40px var(--home-inset); }
  .w-lab { grid-template-columns: 1fr; }
  .w-lab__board { border-right: 0; border-bottom: 1px solid var(--w-line); }
  .workshop-home .pl-proof > .pl-grid > .pl-cell { padding: 32px var(--home-inset); }
  .workshop-home .people-heading { padding: 32px var(--home-inset); }
  .workshop-home .people-heading__title { display: contents; }
  .workshop-home .people-heading #people-title { grid-column: 1 / -1; }
  .workshop-home .people-link { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .w-lab__route { transition: none; }
}
@media (max-width: 640px) {
  body.workshop-home { --site-header-inset: 16px; }
  .w-hero h1 { font-size: clamp(38px,12vw,65px); }
  .w-art-caption { font-size: 12px; line-height: 16px; letter-spacing: .02em; }
}
/* Below this width the longer opportunity captions take two lines; reserving
   both keeps the board and cards still when a card changes the caption. */
@media (max-width: 440px) {
  .w-lab__board .w-art-caption { align-items: flex-start; min-height: 64px; }
}
/* The hero is ordinary document flow; construction never holds up scrolling. */
.w-build-story { position: relative; overflow-anchor: none; }
.w-build-story .w-hero { background: var(--site-paper); }
.w-build-track { min-width: 0; display: flex; }
.w-build-track .w-hero__art { width: 100%; background: var(--site-paper); }
@media (min-width: 801px) {
  /* The eyebrow and the art caption open the same row, so their text tops share one line. */
  .w-hero__copy { padding-top: 32px; padding-bottom: 96px; }
  .w-hero__art > .w-art-caption:first-child { padding-top: 32px; }
  .w-hero__foot > p { padding-block: 16px; }
  .w-hero__people { padding-block: 12px; }
}
@media (min-width: 801px) and (max-height: 740px) {
  .w-hero__copy, .w-hero__art > .w-art-caption:first-child { padding-top: 24px; }
  .w-hero h1 { font-size: clamp(50px,min(6.6vw,11svh),106px); margin-top: 28px; }
}