.work-page { overflow-x: hidden; }
.work-page .site-nav a[aria-current="page"] { color: var(--orange-text); }

.work-gate,
.work-content {
  background: var(--cream);
  color: var(--ink);
}

.work-gate {
  min-height: calc(100svh - 92px);
  display: grid;
  align-items: start;
  /* Shared top padding with .hero (drift-tempo-concept.css) and
     .services-hero (services.css) so every hero headline starts at
     the same Y position. */
  padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6.5rem);
}

.work-gate__inner {
  display: grid;
  grid-template-columns: minmax(20rem, .78fr) minmax(0, 1.22fr);
  /* Top-align so the headline starts right under .work-gate's shared
     padding-top instead of centering against the taller image column. */
  align-items: start;
  gap: clamp(3rem, 7vw, 8rem);
}

.work-gate__copy { position: relative; z-index: 7; }
.work-gate .eyebrow { color: var(--orange-text); margin-bottom: 1.25rem; }

.work-gate h1,
.work-content h1,
.work-next h2 {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .88;
}

/* The gate moves screen-reader focus to the work title after a successful
   unlock. It is a static heading rather than an interactive control, so do
   not draw the browser's blue focus rectangle around the hero. Keyboard
   focus remains visible on every link, button and form field. */
#work-title[tabindex="-1"]:focus { outline: none; }

.work-gate h1 { font-size: clamp(3.8rem, 6vw, 6.5rem); }
.work-gate h1 em,
.work-content h1 em { color: var(--orange); }

.work-gate__intro {
  max-width: 32rem;
  margin: 1.6rem 0 clamp(2.5rem, 4vw, 4rem);
  font-size: var(--type-body);
  line-height: 1.4;
  letter-spacing: -.03em;
  color: var(--ink);
}

.work-gate__form { max-width: 34rem; }
.work-gate__form label {
  display: block;
  margin-bottom: .55rem;
  color: var(--orange-text);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.work-gate__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  border-bottom: 1px solid rgba(13, 13, 12, .3);
}

.work-gate__form input[type="password"] {
  min-width: 0;
  padding: .85rem 0 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 500 clamp(1.05rem, 1.3vw, 1.25rem)/1 'DM Sans', sans-serif;
}

.work-gate__form input::placeholder { color: rgba(13, 13, 12, .4); }
.work-gate__field:focus-within { border-color: var(--ink); }

.work-gate__form button {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 .9rem/1 'DM Sans', sans-serif;
  cursor: pointer;
}

.work-gate__visibility {
  min-width: 3.4rem;
  min-height: 44px;
  justify-content: center;
  padding: .7rem .8rem .9rem;
  color: var(--ink) !important;
}

.work-gate__visibility:hover,
.work-gate__visibility:focus-visible { color: var(--orange) !important; }

.work-gate__submit {
  min-height: 44px;
  gap: 1rem;
  padding: .7rem 0 .9rem 1rem;
}

.work-gate__form button b {
  color: var(--orange);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: .7;
  transition: transform .25s ease;
}

.work-gate__form button:hover b,
.work-gate__form button:focus-visible b { transform: translateX(.35rem); }
.work-gate__form button:focus-visible { outline: 2px solid var(--orange); outline-offset: .25rem; }
.work-gate__message { min-height: 1.4rem; margin: .85rem 0 0; color: var(--orange-text); font-size: .88rem; font-weight: 700; }
.work-gate__form input[aria-invalid="true"] { color: var(--orange); }

.work-gate__visual {
  position: relative;
  min-height: clamp(420px, 43vw, 650px);
  isolation: isolate;
}

.work-gate__image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--line);
  opacity: 1;
}

/* These used to animate in unconditionally as soon as the page loaded
   (a plain CSS animation with no gate), so the reveal always played
   immediately even before the person had scrolled at all. Gating it
   behind .is-visible -- added by work-gate.js on the person's first
   scroll -- keeps this consistent with the rest of the site: nothing
   animates in until you actually scroll. */
.work-gate__visual.is-visible .work-gate__image {
  animation: work-image-in .5s cubic-bezier(.22, 1, .36, 1) forwards;
}

.work-gate__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
}

.work-gate__image--main {
  z-index: 2;
  inset: 8% 2% 7% 6%;
  clip-path: polygon(3% 0, 100% 5%, 97% 100%, 0 94%);
  animation-delay: .08s;
}

.work-gate__image--main img { object-position: 50% center; }

.work-gate__image--strategy {
  z-index: 4;
  top: 0;
  left: -2%;
  width: 43%;
  height: 34%;
  transform: translate(-1.5rem, 2rem) rotate(-2deg);
  animation-delay: .22s;
}

.work-gate__image--strategy img { object-position: 58% center; }

.work-gate__image--set {
  z-index: 5;
  right: -2%;
  bottom: 0;
  width: 48%;
  height: 36%;
  transform: translate(1.5rem, 2rem) rotate(1.5deg);
  animation-delay: .34s;
}

.work-gate__image--set img { object-position: 49% center; }

.work-gate__orange {
  position: absolute;
  z-index: 3;
  top: 4%;
  right: 17%;
  width: 11%;
  height: 84%;
  background: var(--orange);
  mix-blend-mode: screen;
  opacity: .9;
  transform: translateX(2.5rem) rotate(1deg);
}

.work-gate__visual.is-visible .work-gate__orange {
  animation: work-orange-in .5s .1s cubic-bezier(.22, 1, .36, 1) forwards;
}

.work-gate__caption {
  position: absolute;
  z-index: 8;
  right: 2%;
  bottom: -2.1rem;
  margin: 0;
  color: rgba(13, 13, 12, .7);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@keyframes work-image-in {
  to { transform: translate(0, 0) rotate(0); }
}

@keyframes work-orange-in {
  to { transform: translateX(0) rotate(1deg); }
}

.work-content { padding-top: clamp(4.5rem, 7vw, 7rem); }
.work-content__intro { padding-bottom: clamp(4rem, 7vw, 7rem); }
.work-content__intro h1 { max-width: 64rem; font-size: clamp(3.8rem, 6vw, 6.5rem); }
.work-content__intro > p:last-child { max-width: 38rem; margin: 1.6rem 0 0; color: var(--ink); font-size: var(--type-body); line-height: 1.4; }

.work-mosaic {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
  padding-bottom: clamp(5rem, 9vw, 9rem);
}

.work-mosaic__item { margin: 0; min-width: 0; }
.work-mosaic__item img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .45s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.work-mosaic__item > img { height: auto; }
.work-mosaic__item--wide { grid-column: 1 / -1; }
.work-mosaic__item--wide img { aspect-ratio: 2.15 / 1; }
.work-mosaic__item--portrait img { aspect-ratio: 4 / 5; object-position: 46% center; }
.work-mosaic__item--strategy img { aspect-ratio: 4 / 5; object-position: 54% center; }
.work-mosaic__item--production { grid-column: 1 / -1; }
.work-mosaic__item--production img { aspect-ratio: 2.15 / 1; }
.work-mosaic__item:hover img { filter: grayscale(0) saturate(.75) contrast(1.04); }

.work-mosaic__item figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0 0;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 700;
}

.work-mosaic__item figcaption span { color: var(--orange-text); }

.work-next { background: var(--orange); color: var(--ink); }
.work-next .shell { min-height: clamp(15rem, 24vw, 22rem); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; align-items: end; column-gap: 2rem; }
.work-next .eyebrow { grid-column: 1 / -1; margin-bottom: 1.3rem; }
.work-next h2 { font-size: var(--type-section); }
.work-next a { color: var(--ink); font-size: var(--type-body); font-weight: 700; text-decoration: none; }
.work-next a span { display: inline-block; margin-left: 1rem; font-size: 2rem; transition: transform .25s ease; }
.work-next a:hover span { transform: translateX(.35rem); }

@media (max-width: 900px) {
  .work-gate__inner { grid-template-columns: 1fr; gap: 2rem; }
  .work-gate__copy { max-width: 38rem; }
  .work-gate__visual { min-height: min(74vw, 580px); }
}

@media (max-width: 720px) {
  .work-gate { min-height: 0; padding: 2rem 0 5rem; }
  .work-gate h1 { font-size: clamp(4.1rem, 19vw, 6.3rem); }
  .work-gate__intro { margin-bottom: 2.5rem; }
  .work-gate__field { grid-template-columns: 1fr; }
  .work-gate__form input[type="password"],
  .work-gate__form input[type="text"] { min-height: 48px; }
  .work-gate__visibility {
    position: absolute;
    right: 0;
    margin-top: .15rem;
    padding-inline: .5rem;
  }
  .work-gate__submit { justify-content: space-between; padding-left: 0; }
  .work-gate__visual { min-height: 76vw; margin-top: 1.25rem; }
  .work-gate__image--main { inset: 7% 0 7% 4%; }
  .work-gate__image--strategy { left: 0; width: 42%; }
  .work-gate__image--set { right: 0; width: 48%; }
  .work-gate__caption { display: none; }
  .work-content__intro h1 { font-size: clamp(4.1rem, 19vw, 6.3rem); }
  .work-mosaic { grid-template-columns: 1fr; }
  .work-mosaic__item--wide,
  .work-mosaic__item--production { grid-column: auto; }
  .work-mosaic__item--wide img,
  .work-mosaic__item--production img,
  .work-mosaic__item--portrait img,
  .work-mosaic__item--strategy img { aspect-ratio: 4 / 3; }
  .work-next .shell { min-height: 18rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
  .work-next a { margin-top: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .work-gate__image,
  .work-gate__orange { animation-duration: .01ms; animation-delay: 0s; }
}

.work-gate__request { margin: .5rem 0 0; font-size: .9rem; }
.work-gate__request a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }

/* Accessibility: darker orange for small text on cream (5.25:1). Brand orange stays for large type, slabs and dark backgrounds. */
:root { --orange-text: #b8360f; }

/* Keep grid children from widening the page if a headline is wider than the viewport (e.g. before web fonts load). */
.work-gate__inner > * { min-width: 0; }
.work-gate h1 { overflow-wrap: anywhere; }

/* NDS-style gate: one centered statement, one action, nothing else */
@keyframes work-pop { from { opacity: 0; filter: blur(10px); transform: translateY(14px); } to { opacity: 1; filter: blur(0); transform: none; } }
.work-page .work-gate { align-items: center; min-height: calc(100svh - 92px - 18svh); padding-block: clamp(3rem, 7vw, 6rem); }
.work-page .work-gate__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; }
.work-page .work-gate__visual { display: none; }
.work-page .work-gate__copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
.work-page .work-gate h1 { font-size: clamp(3.4rem, 8vw, 8.5rem); line-height: .9; letter-spacing: -.025em; text-wrap: balance; animation: work-pop .9s cubic-bezier(.22,.8,.3,1) both; }
.work-page .work-gate__intro { max-width: 34rem; margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2rem, 4vw, 3.5rem); font-size: clamp(1.1rem, 2vw, 1.35rem); animation: work-pop .9s .18s cubic-bezier(.22,.8,.3,1) both; }
.work-page .work-gate__form { width: min(100%, 30rem); text-align: left; animation: work-pop .9s .3s cubic-bezier(.22,.8,.3,1) both; }
.work-page .work-gate__message { text-align: center; }
.work-page .work-gate__request { margin: 1.2rem 0 0; font-size: .95rem; color: var(--ink); }
.work-page .work-gate__request a { color: var(--orange-text); font-weight: 700; }
@media (max-width: 720px) { .work-page .work-gate h1 { font-size: clamp(2.6rem, 14vw, 4rem); } .work-page .work-gate { min-height: calc(100svh - 88px - 14svh); } }
@media (prefers-reduced-motion: reduce) { .work-page .work-gate h1, .work-page .work-gate__intro, .work-page .work-gate__form { animation: none; } }
@media (max-width: 720px) {
  .work-page .work-gate h1 { font-size: clamp(2.4rem, 11.5vw, 3.6rem); overflow-wrap: normal; }
  .work-page .work-gate__field { grid-template-columns: minmax(0, 1fr) auto auto; }
  .work-page .work-gate__submit { padding-left: .4rem; }
  .work-page .work-gate__submit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .work-page .work-gate__submit b { font-size: 2.2rem; }
}
@media (max-width: 720px) { .work-page .work-gate__submit { position: relative; min-width: 2.6rem; justify-content: flex-end; } .work-page .work-gate__visibility { min-width: 3rem; } }
.work-page .work-gate__field input { width: 100%; min-width: 0; }
@media (max-width: 720px) { .work-page .work-gate__visibility { position: static; margin: 0; } .work-page .work-gate__submit { justify-content: flex-end; padding-left: .4rem; } }
@media (min-width: 721px) { .work-page .work-gate__intro { max-width: none; white-space: nowrap; } }
/* My display rules above must never beat the hidden attribute: once unlocked the gate has to disappear */
.work-page .work-gate[hidden], .work-page .work-content[hidden] { display: none !important; }
@media (max-width: 720px) { .work-page .work-gate { padding-block: 5rem 4rem; } }

/* Same headline as every other page (alignment rule in DESIGN-NOTES): same size, tracking and height under the header.
   The gate stays centred left to right; it just starts at the shared headline height instead of floating in the middle. */
.work-page .work-gate { align-items: start; padding-top: clamp(5rem, 11vw, 10rem); }
.work-page .work-gate h1 { font-size: clamp(3.4rem, 6vw, 6rem) !important; line-height: .88 !important; letter-spacing: -.025em !important; }
@media (max-width: 720px) {
  .work-page .work-gate { padding-top: 5rem; }
  .work-page .work-gate h1 { font-size: clamp(3.4rem, 15vw, 6rem) !important; letter-spacing: -.035em !important; }
}