/* Works gallery: same layout as the template, one rectangular 16:9 tile per project.
   Clicking a tile opens the project view (works.js).
   Colours follow the template's theme variables: in the light theme --c-dark-primary is
   #0f0f0f and --c-light-primary #f0f0f0, in the "invert color" theme they swap, so the
   project view is dark on the light theme and light on the inverted one. */

#works .works-list__thumb {
  overflow: hidden;
  cursor: pointer;
  background: #1c1c1c;
}
html[data-theme=dark] #works .works-list__thumb { background: #e3e3e3; }
#works .works-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
#works .works-list__item:hover .works-list__thumb img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  #works .works-list__thumb img { transition: none; }
}

/* Layout: 16:9 tiles filling the column, and every other column half a tile lower, like a
   brick bond turned 90 degrees (the column filler in the bundle counts that half tile, see
   tools/apply_content.py). Percentages resolve against the column width: a tile is 56.25%
   tall, so half a tile pitch is 28.125% plus half the gap.
   On desktop the lowered column also gets the half tile below it, so all columns measure
   the same and the template's scrubbed parallax (which bottom-aligns the columns) keeps
   the stagger instead of evening it out. */
#works .columns-list { --pw-gap: var(--column-gap); }
#works .works-list__thumb { width: 100%; margin: 0; }
#works .works-list__item:not(:first-child) { margin-top: var(--pw-gap); }
#works .columns-list__item:nth-child(even) { padding: calc(28.125% + var(--pw-gap) / 2) 0; }
@media (max-width: 1023px) {
  #works .columns-list { --pw-gap: var(--offset-6); }
  #works .columns-list__item:nth-child(even) { padding-bottom: 0; }
}

/* The site's own cursor (a small difference-blended dot, z-index 1100; the system cursor is
   hidden on desktop) sits above the project view and its open/close disc while they are up */
html:has(.pw-work.is-open) .cursor-pos,
html:has(.pw-work-disc.is-on) .cursor-pos { z-index: 9001; }

/* ---- project view ---------------------------------------------------- */
.pw-work {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--c-dark-primary);
  color: var(--c-light-primary);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;   /* not visibility: a fresh subtree on each open, no stale inherited style */
}
.pw-work.is-open { display: block; }

/* open/close: a plain dark disc scales over the screen, a ghost of the clicked
   tile grows and fades on top of it (transform + opacity only) */
.pw-work-disc,
.pw-work-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9000;
  border-radius: 50%;
  display: none;
  will-change: transform, opacity;
}
.pw-work-disc { background: var(--c-dark-primary); }
.pw-work-ghost { overflow: hidden; border-radius: 0; }
.pw-work-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-work-disc.is-on,
.pw-work-ghost.is-on { display: block; }

.pw-work__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  font-size: .84375rem;  /* matches the site's enlarged small text (type.css) */
  line-height: 1;
  background: linear-gradient(var(--c-dark-primary) 60%, color-mix(in srgb, var(--c-dark-primary) 0%, transparent));
}
.pw-work__bar button,
.pw-work__bar a {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
/* Close: a large target (about 135 x 60 px, square corners so the whole box takes the click)
   at the top right of the sticky bar, label a step up from the small text and the x in a
   44 px ring that fills on hover */
.pw-work__bar { padding: .5rem .5rem .5rem 1rem; }
.pw-work__bar .pw-work__close {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.75rem;
  padding: .5rem .5rem .5rem 1.5rem;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}
.pw-work__close svg {
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  padding: .875rem;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 50%;
  transform: rotate(45deg);
  transition: background-color .25s ease, border-color .25s ease;
}
.pw-work__close:hover svg { background: color-mix(in srgb, currentColor 18%, transparent); border-color: currentColor; }
.pw-work__close:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.pw-work__close:focus:not(:focus-visible) { outline: none; }

.pw-work__head {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 1rem;
  padding: 18vh 1rem 6rem;
}
.pw-work__title {
  grid-column: 1 / -1;
  margin: 0 0 4rem;
  font-size: clamp(3rem, 9vw, 10rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.04em;
}
.pw-work__meta {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .75rem 2rem;
  margin: 0;
  font-size: .84375rem;  /* matches the site's enlarged small text (type.css) */
  line-height: 1.3;
}
.pw-work__meta dt { opacity: .5; }
.pw-work__meta dd { margin: 0; }
.pw-work__text {
  grid-column: 5 / 9;
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.pw-work__visit {
  grid-column: 5 / 9;
  justify-self: start;
  margin-top: 2rem;
  font-size: .84375rem;  /* matches the site's enlarged small text (type.css) */
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.pw-work__shots {
  display: grid;
  gap: 1rem;
  padding: 0 1rem;
}
.pw-work__shots img {
  width: 100%;
  height: auto;
  display: block;
  background: #1c1c1c;
  opacity: 0;
  transition: opacity .5s ease-out;
}
.pw-work__shots img.is-ready { opacity: 1; }
html[data-theme=dark] .pw-work__shots img { background: #e3e3e3; }
@media (prefers-reduced-motion: reduce) {
  .pw-work__shots img { transition: none; }
}

.pw-work__next {
  display: block;
  margin-top: 1rem;
  padding: 8rem 1rem 3rem;
  border-top: 1px solid color-mix(in srgb, var(--c-light-primary) 15%, transparent);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.pw-work__next small { display: block; font-size: .84375rem; opacity: .5; margin-bottom: 1rem; }
.pw-work__next span {
  font-size: clamp(2.5rem, 6vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.04em;
}

@media (max-width: 1023px) {
  .pw-work__head { padding-top: 14vh; padding-bottom: 3rem; }
  .pw-work__title { margin-bottom: 2.5rem; }
  .pw-work__meta { grid-column: 1 / -1; margin-bottom: 2rem; }
  .pw-work__text, .pw-work__visit { grid-column: 1 / -1; }
  .pw-work__shots { gap: .5rem; padding: 0 .5rem; }
  .pw-work__next { padding-top: 5rem; }
}


/* company name over each tile on hover / keyboard focus */
#works .works-list__thumb { position: relative; }
#works .works-list__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 42, .62);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
#works .pw-tile-name {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, calc(-50% + 6px));
  max-width: 80%;
  color: #f0f0f0;
  font-size: clamp(1.25rem, 2.2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
#works .works-list__item:hover .works-list__thumb::after,
#works .works-list__thumb:focus-visible::after { opacity: 1; }
#works .works-list__item:hover .pw-tile-name,
#works .works-list__thumb:focus-visible .pw-tile-name { opacity: 1; transform: translate(-50%, -50%); }
@media (hover: none) {
  /* touch: no hover, so the name sits small at the bottom of each circle */
  #works .pw-tile-name { opacity: 1; top: auto; bottom: 12%; transform: translateX(-50%); font-size: .875rem; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #works .pw-tile-name, #works .works-list__thumb::after { transition: none; }
}
/* The tiles are now company logos (tools/make_logo_tiles.py), so the centred name would sit
   on top of the logo's own wordmark: no darkening layer, the name moves to a small dark label
   at the foot of the tile, readable on every brand colour and clear of the logo */
#works .works-list__thumb::after { display: none; }
#works .pw-tile-name {
  top: auto;
  bottom: 7%;
  transform: translate(-50%, 6px);
  padding: .4em .7em .45em;
  background: rgba(9, 11, 42, .72);
  font-size: .875rem;
  letter-spacing: 0;
}
#works .works-list__item:hover .pw-tile-name,
#works .works-list__thumb:focus-visible .pw-tile-name { transform: translate(-50%, 0); }
@media (hover: none) {
  #works .pw-tile-name { opacity: 1; bottom: 4%; transform: translateX(-50%); font-size: .6875rem; padding: .3em .55em .35em; }
}

/* hover: a second image of the work (its cover screenshot) fades in over the logo tile */
#works .pw-tile-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .45s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
#works .pw-tile-name { z-index: 2; }
@media (hover: hover) {
  #works .works-list__item:hover .pw-tile-alt,
  #works .works-list__thumb:focus-visible .pw-tile-alt { opacity: 1; transform: scale(1); }
}
@media (hover: none) {
  #works .pw-tile-alt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #works .pw-tile-alt { transition: opacity .2s linear; transform: none; }
}

/* (moved here from services-art.css, which is no longer loaded) the Works section's decorative
   line overlay runs 100lvh past its section (template: height calc(100% + 100lvh)) and on phones
   sat over the services carousel, catching the swipe; it is never interactive */
#works .lines-wrap { pointer-events: none; }

/* "Selected Works" title, back as a section headline (the user missed it). The template's small
   centred label (.works-title, height-0 wrap) becomes the headline, set like the Our Vision
   titles (Consistency, Refinement): same type (.h2), on the second grid line, its top on the
   screen's middle line, in the light text colour on the Works field. Its wrap is in the flow and
   a screen tall, so the title holds the screen the moment the column shutter lands (#works top
   68% above the screen, the template's section padding) and the gallery comes up after it.
   Reveal (hexagon.js adds .pw-title-in once the shutter has finished turning, and splits the
   title into letters): each letter rises out of a mask and fades in, one after another, on the
   site's ease-out; it all takes about 1.6s. Scrolling back up takes it out quickly. */
#works .title-wrap {
  height: auto !important;
  opacity: 1 !important;
  padding: 61lvh 0 0;
  min-height: 112lvh;
  box-sizing: border-box;
}
#works .works-title {
  position: static;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0 0 0 12.5vw;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  transform: none;
  text-align: left;
  /* the site's big titles ("WE", "WE DO", MAP SHAPE BUILD GROW: the template's .h1): capitals,
     14.625rem, tracked -.1em, on two lines */
  /* in the logo's own font, Studio Display (tools/make_logo_font.py; @font-face in logo-zero.css), at
     the big titles' size; serif capitals want far less negative tracking than the Helvetica's -.1em */
  font-family: "Studio Display", serif;
  font-size: 14.625rem;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .9;
  text-transform: uppercase;
  color: var(--c-light-primary);
  white-space: normal;
  max-width: 5em;
}
/* one mask per word, one span per letter. The masks get room on the right and below: the tight
   tracking (-.1em) pulls each word's box in past its last letter, which would clip it */
#works .pw-wt-word { white-space: nowrap; display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0 .16em .1em 0; margin: 0 -.16em -.1em 0; }
/* each letter rises out of its mask as the title scrolls up the screen (hexagon.js scrubs it) */
#works .pw-wt-l { display: inline-block; opacity: 0; transform: translateY(105%); will-change: transform; }
@media (max-width: 1023px) {
  #works .works-title { font-size: min(7.875rem, 17.5vw); max-width: 6em; margin-left: var(--padding-sm); }
  #works .title-wrap { padding-top: 52lvh; min-height: 86lvh; }
}
/* phones: no tall empty band between the title and the first tiles. The title needs no screen-tall
   stage there (the shutter lands it straight away), and the template's 10rem gap above the gallery
   goes; the tiles follow the title at a normal section gap */
@media (max-width: 1023px) {
  #works .title-wrap { min-height: 0; }
  #works .columns-list-wrap { margin-top: 3rem !important; }
}
/* phones: one roomy list instead of two cramped columns (the user's call). The template's two column
   lists dissolve into one (display: contents) and the tiles take project order from works.js; each
   tile runs the full width at its own 16:10 with an even gap, the logos read at a proper size, and
   the name written under each logo goes (the logo is the name) */
@media (max-width: 1023px) {
  #works .columns-list-wrap { height: auto !important; overflow: visible !important; margin-top: 2.5rem !important; }
  #works .columns-list { display: flex !important; flex-direction: column; gap: 1rem; padding: 0 var(--padding-sm); transform: none !important; }
  #works .columns-list__item, #works .columns-list__item > ul, #works .columns-list__item .works-list { display: contents !important; }
  #works .columns-list__item { padding: 0 !important; transform: none !important; }
  #works .works-list__item { margin: 0 !important; width: 100%; transform: none !important; }
  #works .works-list__thumb { aspect-ratio: 16 / 10; height: auto; }
  #works .pw-tile-name, #works .works-list__thumb::after { display: none !important; }
}