/* Our Impact — the case study overlay.

   A near-full-screen white panel that opens over the list rather than
   navigating away, so closing it returns the reader to exactly the row and
   scroll position they left. Editorial split: the words on the left, the
   photography, the quote and the outcomes on the right. */

.case-overlay {
  --ct-paper: #fff;
  --ct-purple: #563584;
  --ct-ink: #211d26;
  --ct-quiet: #6a6470;
  --ct-line: rgba(33, 29, 38, .14);
  --ct-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  z-index: 80;                 /* above the site nav, which sits at 60 */
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(0rem, 1.6vw, 1.75rem);
  font-family: var(--font-ui, "Inter", Arial, sans-serif);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ct-ease);
}
.case-overlay[hidden] { display: none; }
.case-overlay.is-open { opacity: 1; pointer-events: auto; }
.case-overlay__scrim { position: absolute; inset: 0; background: rgba(22, 16, 30, .45); }

.case-overlay__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 92rem);
  height: 100%;
  overflow: hidden auto;
  background: var(--ct-paper);
  color: var(--ct-ink);
  box-shadow: 0 2rem 5rem rgba(20, 13, 28, .28);
  transform: translate3d(0, 2.5rem, 0) scale(.985);
  transition: transform .6s var(--ct-ease);
}
.case-overlay.is-open .case-overlay__panel { transform: none; }

/* ——— The bar ——— */
.case-overlay__bar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 2.4vw, 2.75rem);
  background: var(--ct-paper);
  border-bottom: 1px solid var(--ct-line);
}
.case-overlay__close,
.case-overlay__prev,
.case-overlay__next {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  border: 0;
  background: none;
  color: var(--ct-ink);
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--ct-ease);
}
.case-overlay__close:hover,
.case-overlay__prev:hover,
.case-overlay__next:hover { color: var(--ct-purple); }
.case-overlay__close::after { content: ""; width: 2.1rem; height: 1px; background: currentColor; }
.case-overlay__nav { display: flex; justify-self: end; gap: clamp(1rem, 2.2vw, 2.25rem); }
.case-overlay__mark { justify-self: center; width: 1.35rem; height: 2.4rem; background: currentColor; -webkit-mask: url("assets/brand/tlh-monogram-mask.svg") center / contain no-repeat; mask: url("assets/brand/tlh-monogram-mask.svg") center / contain no-repeat; }

/* ——— The body ——— */
.case-overlay__body {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.75rem, 3.4vw, 3.5rem) clamp(1rem, 2.4vw, 2.75rem) clamp(3rem, 5vw, 5rem);
}
@media (min-width: 1000px) {
  .case-overlay__body { grid-template-columns: minmax(0, .82fr) minmax(0, 1.35fr); align-items: start; }
}

.case-overlay__label { margin: 0 0 clamp(1.25rem, 2vw, 2rem); color: var(--ct-quiet); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.case-overlay__title {
  margin: 0;
  font-family: var(--font-display, "Inter", Arial, sans-serif);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
}
.case-overlay__subtitle { margin: 1rem 0 0; font-size: clamp(1rem, 1.25vw, 1.15rem); font-weight: 400; }
.case-overlay__intro { max-width: 30rem; margin: clamp(1.5rem, 2.4vw, 2.25rem) 0 0; color: #453e4b; font-size: clamp(.94rem, 1.05vw, 1rem); line-height: 1.6; }

.case-overlay__facts { margin: clamp(2rem, 3.2vw, 3rem) 0 0; padding: clamp(1.5rem, 2.2vw, 2rem) 0 0; border-top: 1px solid var(--ct-line); }
.case-overlay__facts dl { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .85rem 1.25rem; margin: 0; }
.case-overlay__facts dt { color: var(--ct-quiet); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.case-overlay__facts dd { margin: 0; font-size: .92rem; line-height: 1.4; }

.case-overlay__stats { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 3.4vw, 3.25rem); margin: clamp(2rem, 3.2vw, 3rem) 0 0; padding: clamp(1.5rem, 2.2vw, 2rem) 0 0; border-top: 1px solid var(--ct-line); }
.case-overlay__stat b { display: block; color: var(--ct-purple); font-family: var(--font-display, "Inter", Arial, sans-serif); font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 400; line-height: 1; }
.case-overlay__stat span { display: block; margin-top: .55rem; color: var(--ct-quiet); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.case-overlay__cta { display: inline-flex; align-items: center; gap: 1rem; margin-top: clamp(2rem, 3.4vw, 3rem); color: inherit; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.case-overlay__cta i { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 50%; background: var(--ct-purple); color: #fff; font-style: normal; transition: transform .45s var(--ct-ease); }
.case-overlay__cta:hover i { transform: translateX(4px); }

/* ——— Right: photography, quote, outcomes ——— */
.case-overlay__media { display: grid; gap: clamp(1.5rem, 2.4vw, 2.25rem); }
.case-overlay__hero { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(33, 29, 38, .05); }
.case-overlay__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-overlay__aside { display: grid; gap: clamp(1.5rem, 2.4vw, 2.25rem); align-items: center; }
@media (min-width: 760px) { .case-overlay__aside { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.case-overlay__quote { margin: 0; padding-left: clamp(1rem, 1.6vw, 1.5rem); border-left: 2px solid var(--ct-purple); }
.case-overlay__quote p { margin: 0; font-family: var(--font-display, "Inter", Arial, sans-serif); font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-style: italic; font-weight: 400; line-height: 1.32; }
.case-overlay__quote figcaption { margin-top: 1rem; color: var(--ct-purple); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.case-overlay__still { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(33, 29, 38, .05); }
.case-overlay__still img { display: block; width: 100%; height: 100%; object-fit: cover; }

.case-overlay__impact { padding-top: clamp(1.5rem, 2.2vw, 2rem); border-top: 1px solid var(--ct-line); }
.case-overlay__impact h3 { margin: 0 0 clamp(1.25rem, 2vw, 1.75rem); color: var(--ct-quiet); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.case-overlay__outcomes { display: grid; gap: clamp(1.25rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .case-overlay__outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case-overlay__outcomes li { padding-left: clamp(1rem, 1.6vw, 1.5rem); border-left: 1px solid var(--ct-line); }
.case-overlay__outcomes li:first-child { padding-left: 0; border-left: 0; }
.case-overlay__outcomes b { display: block; margin-bottom: .6rem; color: var(--ct-quiet); font-size: .62rem; font-weight: 600; letter-spacing: .14em; }
.case-overlay__outcomes span { font-size: .94rem; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .case-overlay,
  .case-overlay__panel { transition: none; }
  .case-overlay__panel { transform: none; }
}

/* The bar buttons size to their own text; a stretched button takes a focus
   ring the full width of the column. */
.case-overlay__close { justify-self: start; }
.case-overlay__close,
.case-overlay__prev,
.case-overlay__next { outline-offset: 3px; }
.case-overlay__close:focus:not(:focus-visible),
.case-overlay__prev:focus:not(:focus-visible),
.case-overlay__next:focus:not(:focus-visible) { outline: none; }

/* Use the shared heading family throughout the case study preview. */
.case-overlay__title { font-family: var(--font-display, "Inter", Arial, sans-serif) !important; }
.case-overlay__impact h3 { font-family: var(--font-ui, "Inter", Arial, sans-serif) !important; }

/* ——— The hero gallery ——— */
.case-overlay__hero { position: relative; cursor: pointer; }
.case-overlay__hero img { transition: opacity .3s ease; }
.case-overlay__shot-prev,
.case-overlay__shot-next {
  position: absolute;
  top: 50%;
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ct-ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .3s ease, background .3s ease;
}
.case-overlay__hero:hover .case-overlay__shot-prev,
.case-overlay__hero:hover .case-overlay__shot-next,
.case-overlay__shot-prev:focus-visible,
.case-overlay__shot-next:focus-visible { opacity: 1; }
.case-overlay__shot-prev { left: .85rem; }
.case-overlay__shot-next { right: .85rem; }
.case-overlay__shot-prev:hover,
.case-overlay__shot-next:hover { background: #fff; }
.case-overlay__count {
  position: absolute;
  right: .85rem;
  bottom: .85rem;
  padding: .3rem .6rem;
  background: rgba(22, 16, 30, .62);
  color: #fff;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.case-overlay__shot-prev[hidden],
.case-overlay__shot-next[hidden],
.case-overlay__count[hidden] { display: none; }

/* ——— Fit ———
   The panel is a scroll container in its own right, so a case study that needs
   more room than the screen scrolls inside the overlay rather than being cut
   off. The bar stays put at the top while it does. Everything below is trimmed
   so most case studies fit a laptop screen without scrolling at all. */
.case-overlay { padding: clamp(0rem, 1.2vw, 1.25rem); }
.case-overlay__panel { overscroll-behavior: contain; }
.case-overlay__body { padding-block: clamp(1.4rem, 2.4vw, 2.4rem) clamp(2rem, 3vw, 3rem); gap: clamp(1.75rem, 3vw, 3rem); }
.case-overlay__title { font-size: clamp(2.1rem, 3.2vw, 3rem); }
.case-overlay__label { margin-bottom: clamp(.9rem, 1.4vw, 1.4rem); }
.case-overlay__intro { margin-top: clamp(1.1rem, 1.8vw, 1.6rem); }
.case-overlay__facts { margin-top: clamp(1.4rem, 2.2vw, 2rem); padding-top: clamp(1.1rem, 1.6vw, 1.4rem); }
.case-overlay__facts dl { gap: .6rem 1.25rem; }
.case-overlay__stats { margin-top: clamp(1.4rem, 2.2vw, 2rem); padding-top: clamp(1.1rem, 1.6vw, 1.4rem); }
.case-overlay__cta { margin-top: clamp(1.4rem, 2.2vw, 2rem); }
.case-overlay__media { gap: clamp(1.1rem, 1.8vw, 1.75rem); }
.case-overlay__hero { aspect-ratio: 16 / 9.4; }
.case-overlay__impact { padding-top: clamp(1.1rem, 1.6vw, 1.4rem); }
.case-overlay__impact h3 { margin-bottom: clamp(.9rem, 1.4vw, 1.25rem); }
.case-overlay__panel:focus { outline: none; }

/* "Read the full case study" (Hodge, 8 Oct): the panel is the preview, the
   project's own page is the article. The link sits straight under the opening
   paragraph in the left column, so it is on screen without scrolling at any
   laptop height; Get in touch stays at the foot of the column. */
.case-overlay__read {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: clamp(1.1rem, 1.8vw, 1.5rem);
  padding: .85rem 1.25rem .85rem 1.4rem;
  border-radius: 999px;
  background: var(--ct-purple);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s ease;
}
.case-overlay__read[hidden] { display: none; }
.case-overlay__read i { font-style: normal; transition: transform .45s var(--ct-ease); }
.case-overlay__read:hover { background: #4c3074; }
.case-overlay__read:hover i { transform: translateX(4px); }
.case-overlay__read:focus-visible { outline: 2px solid var(--ct-purple); outline-offset: 3px; }