/* ==========================================================================
   SAN Media Solution — Section 5 · Our Work
   Built to `Our works.. refrence section 5 .PNG`. `--w` is one pixel of that
   1672px artboard; the section begins at the artwork's y = 88, just above the
   kicker, so every measurement below is the artwork's minus 88.
   ========================================================================== */

.work {
  --w: calc(100vw / 1672);
  --u: var(--w);                          /* the shared .pill sizes follow this section's unit */
  --line: #e2e2e2;
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  height: calc(853 * var(--w));
  background: #fcfcfc;
  color: #111;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
@supports (width: 1cqw) {
  .work { --w: calc(1cqw / 16.72); }
}
.work.is-solo { padding-top: calc(88 * var(--w)); height: calc(941 * var(--w)); }
.work.is-solo > * { transform: translate3d(0, calc(88 * var(--w)), 0); }

/* the lime bracket that peeks in at the left edge */
.work__bracket {
  position: absolute;
  left: calc(-62 * var(--w)); top: calc(17 * var(--w));
  width: calc(97 * var(--w)); height: calc(142 * var(--w));
  border: calc(2 * var(--w)) solid var(--lime);
  border-radius: calc(16 * var(--w));
  pointer-events: none;
}

/* ── the top: kicker, headline, two paragraphs and the script ────────── */
.work__top { position: absolute; inset: 0 0 auto 0; height: calc(190 * var(--w)); }
.work__lede { position: absolute; left: calc(70 * var(--w)); top: calc(18 * var(--w)); }
.work__kicker {
  display: flex; align-items: center; gap: calc(17 * var(--w));
  margin: 0;
  font-size: max(calc(10.5 * var(--w)), 9px); font-weight: 500; letter-spacing: .42em; text-transform: uppercase; line-height: 1;
  color: #4a4a4e;
}
.work__kicker i { display: block; width: calc(50 * var(--w)); height: calc(2 * var(--w)); background: var(--lime); }
.work__title {
  margin: calc(13 * var(--w)) 0 0;
  font-size: calc(62 * var(--w)); font-weight: 900; line-height: calc(57 * var(--w)); letter-spacing: -.03em; text-transform: uppercase;
  color: #0a0a0a;
}
.work__title span { display: block; white-space: nowrap; }
.work__title em { font-style: normal; color: var(--lime); }
.work__para {
  position: absolute;
  left: calc(535 * var(--w)); top: calc(57 * var(--w));
  margin: 0;
  font-size: calc(19 * var(--w)); font-weight: 400; line-height: calc(24 * var(--w)); letter-spacing: -.012em;
  color: #3a3a3e; white-space: nowrap;
}
.work__para--right { left: calc(1405 * var(--w)); top: calc(40 * var(--w)); font-size: calc(17 * var(--w)); line-height: calc(23 * var(--w)); }
.work__ink { position: absolute; left: calc(1072 * var(--w)); top: calc(4 * var(--w)); width: calc(316 * var(--w)); height: auto; }

/* ── the industries: filters ──────────────────────────────────────────── */
.work__filters {
  position: absolute;
  left: calc(40 * var(--w)); right: calc(40 * var(--w)); top: calc(188 * var(--w));
  display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--w));
}
.chips { display: flex; flex-wrap: nowrap; gap: calc(10 * var(--w)); margin: 0; padding: 0; list-style: none; }
.chip {
  height: calc(40 * var(--w));
  padding: 0 calc(18 * var(--w));
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font: 500 calc(13 * var(--w)) / 1 var(--sans);
  letter-spacing: -.01em;
  color: #111;
  cursor: pointer;
  white-space: nowrap;
  transition: background .35s var(--e-out), color .35s var(--e-out), border-color .35s, box-shadow .35s, transform .35s var(--e-out);
}
.chip:hover { border-color: #bdbdbd; transform: translateY(calc(-1 * var(--w))); }
.chip.is-on {
  background: #0a0a0a; color: #fff; border-color: #0a0a0a;
  box-shadow: 0 0 0 calc(2 * var(--w)) var(--lime), 0 0 calc(14 * var(--w)) rgba(152, 240, 20, .55);
}
/* the categories beyond the row wait in a small panel under "More" */
.chips__wrap { position: relative; flex: none; }
.chips__panel {
  position: absolute; right: 0; top: calc(100% + 8 * var(--w));
  display: none; flex-direction: column; gap: calc(8 * var(--w));
  padding: calc(10 * var(--w));
  background: #fff; border: 1px solid var(--line); border-radius: calc(16 * var(--w));
  box-shadow: 0 calc(14 * var(--w)) calc(36 * var(--w)) rgba(0, 0, 0, .12);
  z-index: 5;
}
.work__filters.is-open .chips__panel { display: flex; }
.chips__toggle {
  display: inline-flex; align-items: center; gap: calc(6 * var(--w));
  height: calc(40 * var(--w)); padding: 0 calc(4 * var(--w));
  border: 0; background: none;
  font: 600 calc(13.5 * var(--w)) / 1 var(--sans); color: #111; cursor: pointer; white-space: nowrap;
}
.chips__toggle svg { width: calc(10 * var(--w)); height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--e-out); }
.work__filters.is-open .chips__toggle svg { transform: rotate(180deg); }

/* ── the industries: cards ────────────────────────────────────────────── */
.work__grid {
  position: absolute;
  left: calc(40 * var(--w)); right: calc(39 * var(--w)); top: calc(248 * var(--w));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(12 * var(--w)) calc(10 * var(--w));
  margin: 0; padding: 0; list-style: none;
}
.wcard {
  position: relative;
  height: calc(195 * var(--w));
  border-radius: calc(14 * var(--w));
  overflow: hidden;                       /* the frame: the picture arrives inside it */
  background: #111;
  color: #fff;
}
.wcard[hidden] { display: none; }
.wcard.is-out { opacity: 0; transform: scale(.97); transition: opacity .3s var(--e-out), transform .3s var(--e-out); }
.wcard__frame { position: absolute; inset: 0; overflow: hidden; }
.wcard__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the artwork's own shade at the foot of each picture is in the picture; this only keeps the type safe */
.wcard__frame::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .35)); pointer-events: none; }
.wcard__icon {
  position: absolute; left: calc(17 * var(--w)); top: calc(62 * var(--w));
  width: calc(52 * var(--w)); height: calc(52 * var(--w));
  border-radius: 50%; background: #fff; color: #0a0a0a;
  display: grid; place-items: center;
}
.wcard__icon svg { width: calc(26 * var(--w)); height: auto; fill: currentColor; }
.wcard__body { position: absolute; left: calc(18 * var(--w)); right: calc(56 * var(--w)); top: calc(121 * var(--w)); }
.wcard__body b { display: block; font-size: calc(18 * var(--w)); font-weight: 700; letter-spacing: -.02em; line-height: calc(22 * var(--w)); white-space: nowrap; }
.wcard__body span { display: block; margin-top: calc(4 * var(--w)); font-size: calc(14.5 * var(--w)); font-weight: 400; line-height: calc(20 * var(--w)); letter-spacing: -.012em; color: #dedede; white-space: nowrap; }
.wcard__go {
  position: absolute; left: calc(210 * var(--w)); top: calc(144 * var(--w));
  width: calc(34 * var(--w)); height: calc(34 * var(--w));
  border-radius: 50%; border: calc(1.5 * var(--w)) solid #fff;
  display: grid; place-items: center; color: #fff;
  transition: transform .45s var(--e-out), background .45s, color .45s;
}
.wcard__go svg { width: calc(14 * var(--w)); height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wcard__go:hover, .wcard__go:focus-visible { background: #fff; color: #0a0a0a; transform: translateX(calc(2 * var(--w))); }

/* ── our impact ───────────────────────────────────────────────────────── */
.work__impact {
  position: absolute;
  left: 0; right: 0; top: calc(664 * var(--w));
  height: calc(189 * var(--w));
  background: #0c0d0c url("../img/work/band.jpg") center / cover no-repeat;
  color: #fff;
}
.impact__copy { position: absolute; left: calc(78 * var(--w)); top: calc(35 * var(--w)); }
.work__kicker--dark { color: #e0e0e0; }
.work__kicker--dark i { width: calc(52 * var(--w)); }
.impact__title {
  margin: calc(12 * var(--w)) 0 0;
  font-size: calc(42 * var(--w)); font-weight: 900; line-height: calc(39 * var(--w)); letter-spacing: -.03em; text-transform: uppercase;
  color: #fff;
}
.impact__title span { display: block; white-space: nowrap; }
.impact__title em { font-style: normal; color: var(--lime); }
.impact__stats {
  position: absolute; left: calc(408 * var(--w)); top: calc(58 * var(--w));
  display: flex; margin: 0; padding: 0; list-style: none;
}
.impact__stats li {
  position: relative;
  display: flex; align-items: flex-start; gap: calc(18 * var(--w));
  padding-left: calc(44 * var(--w));
  border-left: 1px solid rgba(255, 255, 255, .28);
  height: calc(72 * var(--w));
}
.impact__stats li:nth-child(1) { width: calc(204 * var(--w)); }
.impact__stats li:nth-child(2) { width: calc(174 * var(--w)); }
.impact__stats li:nth-child(3) { width: calc(166 * var(--w)); }
.impact__stats li:nth-child(4) { width: calc(208 * var(--w)); padding-right: 0; }
.impact__stats li:nth-child(1) { padding-left: calc(44 * var(--w)); }
.impact__stats li:nth-child(2) { padding-left: calc(28 * var(--w)); }
.impact__stats li:nth-child(3) { padding-left: calc(33 * var(--w)); }
.impact__stats li:nth-child(4) { padding-left: calc(33 * var(--w)); }
.impact__stats svg { flex: none; width: calc(44 * var(--w)); height: auto; fill: #fff; color: #fff; margin-top: calc(2 * var(--w)); }
.impact__stats li:nth-child(2) svg, .impact__stats li:nth-child(3) svg { width: calc(36 * var(--w)); }
.impact__stats b { display: block; font-size: calc(26 * var(--w)); font-weight: 700; letter-spacing: -.02em; line-height: calc(28 * var(--w)); color: #fff; white-space: nowrap; }
.impact__stats em { display: block; margin-top: calc(8 * var(--w)); font-size: max(calc(14 * var(--w)), 10px); font-style: normal; font-weight: 400; line-height: calc(18 * var(--w)); letter-spacing: -.01em; color: #d4d4d4; white-space: nowrap; }
.impact__cta { position: absolute; left: calc(1170 * var(--w)); top: calc(48 * var(--w)); height: calc(95 * var(--w)); padding-left: calc(115 * var(--w)); border-left: 1px solid var(--lime); }
.impact__cta .impact__quote { margin-top: calc(-14 * var(--w)); }
.impact__quote {
  position: relative; margin: 0 0 0 calc(30 * var(--w));
  font-size: calc(20 * var(--w)); font-weight: 500; line-height: calc(26 * var(--w)); letter-spacing: -.015em; white-space: nowrap;
}
.impact__quote i { position: absolute; font-style: normal; font-weight: 900; color: var(--lime); font-size: calc(22 * var(--w)); line-height: 1; }
.impact__quote i:first-child { left: calc(-30 * var(--w)); top: calc(-4 * var(--w)); }
.impact__quote i:last-child { position: static; margin-left: calc(10 * var(--w)); vertical-align: -.35em; }
.pill--work {
  margin-top: calc(14 * var(--w));
  height: calc(45 * var(--w)); padding: 0 calc(20 * var(--w));
  font-size: calc(14.5 * var(--w)); font-weight: 700; letter-spacing: -.01em; text-decoration: none;
}
.pill--work svg { width: calc(20 * var(--w)); }

/* ── entrances: work.js plays them once, on entry ─────────────────────── */
.work.is-live [data-in], .work.is-live [data-side], .work.is-live [data-slide],
.work.is-live [data-body], .work.is-live [data-stat], .work.is-live .chip { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .work [data-in], .work [data-side], .work [data-slide], .work [data-body], .work [data-stat], .work .chip { transform: none !important; opacity: 1 !important; }
}

/* ══ narrow screens: re-laid, not shrunk ═══════════════════════════════ */
@media (max-width: 1080px) {
  .work { --pad: clamp(20px, 4vw, 48px); height: auto; }
  .work.is-solo { padding-top: 0; height: auto; }
  .work.is-solo > * { transform: none; }
  .work__bracket { display: none; }
  .work__top { position: static; height: auto; display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2.4vh, 24px); padding: clamp(30px, 6vh, 64px) var(--pad) 0; }
  .work__lede { position: static; }
  .work__kicker { font-size: clamp(10px, 1.3vw, 12px); }
  .work__title { margin-top: 14px; font-size: clamp(36px, 7.4vw, 76px); line-height: .98; }
  .work__title span { white-space: normal; }
  .work__para { position: static; font-size: clamp(15px, 2.1vw, 19px); line-height: 1.34; white-space: normal; max-width: 52ch; }
  .work__para br { display: none; }
  .work__ink { position: static; width: clamp(200px, 30vw, 316px); }
  .work__para--right { max-width: 36ch; }

  .work__filters { position: static; margin: clamp(22px, 4vh, 36px) var(--pad) 0; flex-wrap: wrap; }
  .chips { flex-wrap: wrap; gap: 8px; }
  .chip { height: 38px; padding: 0 16px; font-size: clamp(12.5px, 1.6vw, 14px); }
  .chip.is-on { box-shadow: 0 0 0 2px var(--lime), 0 0 12px rgba(152, 240, 20, .5); }
  .chips__wrap { display: contents; }
  .chips__panel { position: static; display: contents; }
  .chips__toggle { display: none; }

  .work__grid { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(20px, 3.5vh, 32px) var(--pad) 0; }
  .wcard { height: auto; aspect-ratio: 258 / 195; border-radius: 14px; }
  .wcard__icon { left: 7%; top: 30%; width: clamp(40px, 6vw, 52px); height: clamp(40px, 6vw, 52px); }
  .wcard__icon svg { width: 50%; }
  .wcard__body { left: 7%; right: 22%; top: 60%; }
  .wcard__body b { font-size: clamp(14px, 2vw, 18px); line-height: 1.2; white-space: normal; }
  .wcard__body span { margin-top: 3px; font-size: clamp(11.5px, 1.6vw, 14.5px); line-height: 1.3; white-space: normal; }
  .wcard__body span br { display: none; }
  .wcard__go { left: auto; right: 6%; top: auto; bottom: 9%; width: 32px; height: 32px; border-width: 1.5px; }
  .wcard__go svg { width: 13px; }

  .work__impact { position: static; height: auto; margin-top: clamp(30px, 5vh, 52px); padding: clamp(28px, 5vh, 48px) var(--pad) clamp(32px, 6vh, 56px); }
  .impact__copy { position: static; }
  .work__kicker--dark i { width: 52px; }
  .impact__title { margin-top: 14px; font-size: clamp(28px, 4.8vw, 40px); line-height: 1.05; }
  .impact__stats { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; margin-top: clamp(24px, 4vh, 36px); }
  .impact__stats li { width: auto !important; height: auto; padding: 0 0 0 16px !important; gap: 12px; }
  .impact__stats svg { width: clamp(30px, 4.4vw, 44px); }
  .impact__stats li:nth-child(2) svg, .impact__stats li:nth-child(3) svg { width: clamp(24px, 3.6vw, 36px); }
  .impact__stats b { font-size: clamp(20px, 3vw, 26px); line-height: 1.1; }
  .impact__stats em { margin-top: 6px; font-size: clamp(12px, 1.6vw, 14px); line-height: 1.3; }
  .impact__cta { position: static; height: auto; margin-top: clamp(24px, 4vh, 36px); padding: 0 0 0 20px; border-left: 1px solid var(--lime); }
  .impact__quote { margin-left: 26px; font-size: clamp(16px, 2.4vw, 20px); line-height: 1.3; white-space: normal; }
  .impact__quote i { font-size: 20px; }
  .impact__quote i:first-child { left: -26px; top: -2px; }
  .impact__quote i:last-child { right: auto; bottom: auto; margin-left: 6px; position: static; }
  .pill--work { margin-top: 16px; height: clamp(44px, 5.4vw, 48px); padding: 0 clamp(22px, 3vw, 26px); gap: clamp(9px, 1.2vw, 13px); font-size: clamp(14px, 1.8vw, 16.5px); }
  .pill--work svg { width: clamp(16px, 2vw, 20px); }
}
@media (max-width: 720px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* two across: the frame grows a little taller so title, copy and arrow all fit */
  .wcard { aspect-ratio: 258 / 236; }
  .wcard__icon { top: 22%; width: 40px; height: 40px; }
  .wcard__body { top: 50%; right: 24%; }
  .wcard__body b { font-size: 14px; }
  .wcard__body span { font-size: 11.5px; line-height: 1.28; }
  .wcard__go { width: 28px; height: 28px; bottom: 8%; }
  .wcard__go svg { width: 12px; }
  .impact__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .wcard { aspect-ratio: 258 / 250; }
  .wcard__body b { font-size: 13.5px; }
  .wcard__body span { font-size: 11px; }
}