/* ======================================================================
   SOLUTIONS
   The old page was sixteen tiles in a flat five-across grid: every picture
   graded differently, nothing leading, and a headline the only thing a
   visitor could read before clicking. This sheet does three things.

   Synchronised — every picture on the page is put through the same grade
   and the same navy veil, so a yellow van, a dark studio shot and a blue
   diagram belong to one body of work.

   Organised — four featured pieces first, then the complete list under its
   own heading, with the filter as real chips and a live count.

   Legible — each card carries its field, its headline, one line of what it
   is, and who it was built with, without waiting for a hover.
   ====================================================================== */
.sa-gal.is-sol {
  /* The grade keeps the colour and lends it a common blue cast, rather
     than draining it: a yellow van stays a yellow van, but every picture
     on the page is lit by the same sky. */
  --sol-veil-a: rgba(10, 16, 34, .04);
  --sol-veil-b: rgba(10, 16, 34, .46);
  --sol-grade: saturate(1.02) contrast(1.08) brightness(.94);
  --sol-tint: #2B4A8C;
  --sol-tint-a: .30;

  /* three surfaces, each a step nearer the light than the one behind it */
  --sol-card: #16244A;
  --sol-card-lift: #1D3163;
  --sol-sheen: linear-gradient(180deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .012) 42%, rgba(255, 255, 255, 0) 100%);
  --sol-shadow: 0 16px 30px rgba(4, 7, 14, .52), 0 3px 9px rgba(4, 7, 14, .42);
  --sol-shadow-up: 0 34px 60px rgba(4, 7, 14, .66), 0 8px 20px rgba(4, 7, 14, .5);
  --sol-shadow-feat: 0 26px 48px rgba(4, 7, 14, .58), 0 5px 14px rgba(4, 7, 14, .45);

  position: relative;
  background-color: var(--sa-navy);
  background-image: linear-gradient(180deg, #172754 0%, #101B37 34%, #0F1A34 68%, #0C1428 100%);
}
/* the light in the room: a wide, soft rise behind the featured work, so the
   page has a near and a far rather than one flat wall of colour */
.sa-gal.is-sol::before {
  content: "";
  display: block;
  /* the base rule gives this a fixed width and shifts it half its own
     width to the left; here it has to span the whole section instead */
  position: absolute;
  left: 0; right: 0; top: 0;
  width: auto;
  height: min(1100px, 78%);
  transform: none;
  background-image:
    radial-gradient(64% 52% at 22% 26%, rgba(111, 143, 201, .30) 0%, rgba(78, 114, 183, .11) 42%, rgba(16, 27, 55, 0) 74%),
    radial-gradient(48% 40% at 86% 8%, rgba(47, 87, 154, .26) 0%, rgba(16, 27, 55, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.sa-gal.is-sol > * { position: relative; z-index: 1; }
.sa-gal.is-sol .sa-gal-in {
  width: min(1320px, calc(100% - 48px));
  max-width: none;
  padding: 0;
}

/* ---- the head --------------------------------------------------- */
.sa-gal.is-sol .sa-gal-head { max-width: 760px; margin-bottom: clamp(34px, 4.6vw, 62px); }
.sa-gal.is-sol .sa-gal-eyebrow {
  display: block;
  margin: 0 0 10px;
  letter-spacing: 0;
  font-size: 12px; line-height: 1.4; font-weight: 600;
  color: var(--sa-blue-lift);
  text-transform: none;
}
.sa-gal.is-sol .sa-gal-h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--sa-white);
}
.sa-gal.is-sol .sa-gal-sub {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .74);
}

/* ---- the two bands, each under its own heading ------------------- */
.sa-gal.is-sol .sa-sol-band { margin: 0 0 clamp(40px, 5vw, 72px); }
.sa-gal.is-sol .sa-sol-band:last-child { margin-bottom: 0; }
.sa-gal.is-sol .sa-sol-bar {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 6px 20px;
  margin-bottom: 20px;
  padding-bottom: 0;
}
.sa-gal.is-sol .sa-sol-h {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.3; font-weight: 600;
  color: var(--sa-white);
}
.sa-gal.is-sol .sa-sol-note,
.sa-gal.is-sol .sa-gal-count {
  margin: 0;
  font-size: 12px; line-height: 1.4;
  color: rgba(255, 255, 255, .55);
}

/* ---- featured ---------------------------------------------------- */
.sa-feat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
}
.sa-fcard {
  display: flex; flex-direction: column;
  min-width: 0;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--sol-card);
  background-image: var(--sol-sheen);
  box-shadow: var(--sol-shadow-feat);
  text-decoration: none;
  transition: background-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.sa-fcard:hover, .sa-fcard:focus-visible {
  background-color: var(--sol-card-lift);
  box-shadow: var(--sol-shadow-up);
  transform: translateY(-6px);
}
.sa-fcard:focus-visible { outline: 2px solid var(--sa-blue-lift); outline-offset: 2px; }
.sa-fcard-media {
  position: relative; display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #0C1428;
}
.sa-fcard-media, .sa-gal.is-sol .sa-tile .sa-tile-media { isolation: isolate; }
.sa-fcard-media::before,
.sa-gal.is-sol .sa-tile .sa-tile-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--sol-tint);
  mix-blend-mode: color;
  opacity: var(--sol-tint-a);
  pointer-events: none;
}
.sa-fcard-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, var(--sol-veil-a) 0%, var(--sol-veil-b) 100%);
  pointer-events: none;
}
.sa-fcard-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--sol-grade);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.sa-fcard:hover .sa-fcard-img { transform: scale(1.05); }
.sa-fcard-media, .sa-gal.is-sol .sa-tile .sa-tile-media { box-shadow: 0 14px 22px -14px rgba(4, 7, 14, .9); }
.sa-fcard-body {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 16px 14px;
}
.sa-fcard-keys { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.sa-fcard-key {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 0;
  background: rgba(111, 143, 201, .22);
  font-size: 10px; line-height: 1.3; font-weight: 500;
  color: #DCE6F8;
}
.sa-fcard-title {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.32; font-weight: 600;
  color: var(--sa-white);
}
.sa-fcard-hook {
  display: block;
  margin-bottom: 14px;
  font-size: 12.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}
.sa-fcard-foot {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: auto;
  padding-top: 13px;
}
.sa-fcard-client {
  font-size: 11px; line-height: 1.4;
  color: rgba(255, 255, 255, .58);
}
.sa-fcard-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; line-height: 1.4; font-weight: 500;
  color: #A8BEE8;
}
.sa-fcard-go svg { transition: transform .2s ease; }
.sa-fcard:hover .sa-fcard-go { color: #fff; }
.sa-fcard:hover .sa-fcard-go svg { transform: translateX(3px); }

/* ---- the filter, as chips ---------------------------------------- */
.sa-gal.is-sol .sa-gal-keys {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 18px;
}
.sa-gal.is-sol .sa-gk {
  padding: 7px 14px;
  border-radius: 0;
  border: 0;
  background: #1A2A52;
  font-family: inherit;
  font-size: 12px; line-height: 1.4; font-weight: 500;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.sa-gal.is-sol .sa-gk::after { display: none; }
.sa-gal.is-sol .sa-gk:hover { background: #24396E; color: #fff; }
.sa-gal.is-sol .sa-gk[aria-pressed="true"] {
  background: #DCE6F8;
  color: #101B37;
}
.sa-gal.is-sol .sa-gk:focus-visible { outline: 2px solid var(--sa-blue-lift); outline-offset: 2px; }

/* ---- the complete list ------------------------------------------- */
.sa-gal.is-sol .sa-gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* rows size to their own content: an equal-height rule would make the
     line between the matches and the rest as tall as a card */
  grid-auto-rows: auto;
  align-items: stretch;
  gap: clamp(12px, 1.4vw, 20px);
}
.sa-gal.is-sol .sa-tile {
  display: flex; flex-direction: column;
  grid-column: auto;
  min-width: 0; padding: 0;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--sol-card);
  background-image: var(--sol-sheen);
  box-shadow: var(--sol-shadow);
  transition: background-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.sa-gal.is-sol .sa-tile::before,
.sa-gal.is-sol .sa-tile::after { content: none; }
.sa-gal.is-sol .sa-tile:hover,
.sa-gal.is-sol .sa-tile:focus-visible {
  background-color: var(--sol-card-lift);
  box-shadow: var(--sol-shadow-up);
  transform: translateY(-6px);
}
.sa-gal.is-sol .sa-tile:focus-visible { outline: 2px solid var(--sa-blue-lift); outline-offset: 2px; }
.sa-gal.is-sol .sa-tile[hidden] { display: none; }
.sa-gal.is-sol .sa-tile.is-dim { opacity: 1; filter: none; }

.sa-gal.is-sol .sa-tile .sa-tile-media {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #0C1428;
  flex: 0 0 auto;
}
.sa-gal.is-sol .sa-tile .sa-tile-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, var(--sol-veil-a) 0%, var(--sol-veil-b) 100%);
  pointer-events: none;
}
.sa-gal.is-sol .sa-tile .sa-tile-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--sol-grade);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.sa-gal.is-sol .sa-tile:hover .sa-tile-img { transform: scale(1.05); }
.sa-gal.is-sol .sa-tile .sa-tile-glass { display: none; }

.sa-gal.is-sol .sa-tile .sa-tile-body {
  position: static;
  inset: auto;
  min-height: 0;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  width: auto; height: auto;
  padding: 14px 14px 13px;
  /* The old pane was frosted glass over the picture: a backdrop blur with
     the saturation pushed to 1.7. Left in place it did two things — it
     turned whatever sat behind it a vivid blue, and in Safari it stopped
     the card's own words painting until a hover forced a repaint. The card
     is a solid surface now, so every one of those is switched off. */
  background: none;
  background-image: none;
  background-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  transition: none;
}
.sa-gal.is-sol .sa-tile:hover .sa-tile-body,
.sa-gal.is-sol .sa-tile:focus-within .sa-tile-body {
  background-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
}
.sa-gal.is-sol .sa-tile .sa-tile-body::before { display: none; }
.sa-gal.is-sol .sa-tile .sa-tile-keys { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 9px; padding: 0; }
.sa-gal.is-sol .sa-tile .sa-tile-key {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 0;
  background: rgba(111, 143, 201, .22);
  font-size: 10px; line-height: 1.3; font-weight: 500;
  color: #DCE6F8;
}
.sa-gal.is-sol .sa-tile .sa-tile-title {
  display: block;
  margin: 0 0 7px; padding: 0;
  font-size: 14.5px; line-height: 1.34; font-weight: 600;
  color: var(--sa-white);
}
.sa-gal.is-sol .sa-tile .sa-tile-client {
  display: block;
  margin: 0; padding: 0;
  font-size: 11px; line-height: 1.4;
  color: rgba(255, 255, 255, .56);
}
/* the one line of what it is arrives on hover, under everything else */
.sa-gal.is-sol .sa-tile .sa-tile-hook {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  margin-top: auto;
  transition: grid-template-rows .28s ease, opacity .22s ease;
}
.sa-gal.is-sol .sa-tile:hover .sa-tile-hook,
.sa-gal.is-sol .sa-tile:focus-within .sa-tile-hook { grid-template-rows: 1fr; opacity: 1; }
.sa-gal.is-sol .sa-tile .sa-tile-hook > span { min-height: 0; overflow: hidden; }
.sa-gal.is-sol .sa-tile .sa-tile-hook p {
  margin: 11px 0 0; padding: 0;
  font-size: 12px; line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}
.sa-gal.is-sol .sa-tile .sa-tile-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 0;
  font-size: 11.5px; line-height: 1.4; font-weight: 500;
  color: #A8BEE8;
}
.sa-gal.is-sol .sa-tile .sa-tile-go::after { content: none; }
.sa-gal.is-sol .sa-tile .sa-tile-go svg { transition: transform .2s ease; }
.sa-gal.is-sol .sa-tile:hover .sa-tile-go svg { transform: translateX(3px); }

/* ---- nothing matched --------------------------------------------- */
.sa-gal.is-sol .sa-gal-empty {
  margin: 24px 0 0;
  font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.sa-gal.is-sol .sa-gal-reset {
  padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600;
  color: var(--sa-blue-lift);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sa-gal.is-sol .sa-gal-reset:hover { color: #fff; }

/* ---- narrower --------------------------------------------------- */
@media (max-width: 1180px) {
  .sa-feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sa-gal.is-sol .sa-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sa-gal.is-sol .sa-gal-in { width: calc(100% - 36px); }
  .sa-feat-grid,
  .sa-gal.is-sol .sa-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .sa-gal.is-sol .sa-gal-in { width: calc(100% - 28px); }
  .sa-feat-grid,
  .sa-gal.is-sol .sa-gal-grid { grid-template-columns: 1fr; }
  .sa-gal.is-sol .sa-tile .sa-tile-hook { grid-template-rows: 1fr; opacity: 1; }
}

/* ======================================================================
   FILTERING
   A filter that empties the grid answers the question and ends the visit.
   This one keeps every project on the page: the matches lead, the rest sit
   below a quiet line, turned down but legible and still one click away.
   The cards travel to their new places rather than jumping, so the move is
   something you can follow.
   ====================================================================== */
.sa-gal.is-sol .sa-tile {
  transition: background-color .24s ease, box-shadow .24s ease,
              transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, filter .3s ease;
}
.sa-gal.is-sol .sa-tile.is-aside {
  opacity: .46;
  filter: saturate(.45);
}
.sa-gal.is-sol .sa-tile.is-aside:hover,
.sa-gal.is-sol .sa-tile.is-aside:focus-within {
  opacity: 1;
  filter: none;
}
/* the match keeps its full strength and gains a little more ground */
.sa-gal.is-sol .sa-tile.is-match { box-shadow: var(--sol-shadow-feat); }

.sa-gal.is-sol .sa-gal-rule {
  grid-column: 1 / -1;
  margin: clamp(14px, 2vw, 26px) 0 2px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .56);
}
.sa-gal.is-sol .sa-gal-rule[hidden] { display: none; }
.sa-gal.is-sol .sa-gal-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
}
@media (prefers-reduced-motion: reduce) {
  .sa-gal.is-sol .sa-tile { transition: opacity .01ms, filter .01ms; }
}