/* ============================================================
   case-study.css — Layout for standalone project case-study pages
   Built on top of tokens.css / layout.css / components.css.
   ============================================================ */


/* ── Light theme override — case study pages read better on a
   warm off-white background than the homepage's dark theme.
   Skipped when .theme-dark is toggled on, so the page falls back to
   the :root dark tokens (aligned with the homepage), refined below. ── */

body.case-study-page:not(.theme-dark) {
  --color-bg:             #F6F5F1;
  --color-surface:        #FFFFFF;
  --color-text-primary:   #1C1C1A;
  --color-text-secondary: #6F6D66;
  --color-text-body:      #3F3D38;
  --color-text-muted:     #A39F95;
  --color-border:         #E4E1D9;
  --color-link:           #1C1C1A;
  --color-link-hover:     #6F6D66;
}

/* ── Dark theme override — opt-in via the theme toggle, layered on
   top of the homepage's dark palette with slightly warmer tones ── */

body.case-study-page.theme-dark {
  --color-bg:             #080A09;
  --color-surface:        #121412;
  --color-text-primary:   #FCFCFC;
  --color-text-secondary: #a0a0a0;
  --color-text-body:      #D8D8D8;
  --color-text-muted:     #555555;
  --color-border:         #1f2220;
  --color-link:           #FCFCFC;
  --color-link-hover:     #a0a0a0;
}

/* Buttons were designed for dark surroundings — flip their glassy
   borders/fills so they stay visible on the light background.
   Skipped in dark mode so the original dark-friendly styling applies. */
body.case-study-page:not(.theme-dark) .hero__cta-button {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
              0 4px 10px rgba(0, 0, 0, 0.05),
              0 10px 20px rgba(0, 0, 0, 0.05);
}

body.case-study-page:not(.theme-dark) .hero__cta-button--secondary {
  border-color: rgba(0, 0, 0, 0.18);
}

body.case-study-page:not(.theme-dark) .hero__cta-button--secondary svg {
  background-color: rgba(0, 0, 0, 0.06);
}

body.case-study-page:not(.theme-dark) .hero__cta-button--secondary:hover svg {
  background-color: rgba(0, 0, 0, 0.12);
}

/* ── Theme toggle button ───────────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--color-text-secondary);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.theme-toggle__icon {
  display: none;
}

/* Light mode shows the sun (click to switch to dark) */
body.case-study-page:not(.theme-dark) .theme-toggle__icon--sun {
  display: block;
}

/* Dark mode shows the moon (click to switch to light) */
body.case-study-page.theme-dark .theme-toggle__icon--moon {
  display: block;
}

/* ── Theme-swapped images — light/dark variants of the same diagram ── */

.cs-theme-img--dark {
  display: none;
}

body.case-study-page.theme-dark .cs-theme-img--light {
  display: none;
}

body.case-study-page.theme-dark .cs-theme-img--dark {
  display: block;
}


/* ── Header (name + nav, space-between) ────────────────────── */

.site-header.cs-header .container {
  justify-content: space-between;
}

.cs-header__name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.cs-header__name:hover {
  opacity: 0.7;
}


/* ── Back link ──────────────────────────────────────────────── */

.cs-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin-top: calc(-1 * var(--space-8));
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.cs-back-link:hover,
.cs-back-link:focus-visible {
  color: var(--color-text-primary);
}

.cs-back-link svg {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.cs-back-link:hover svg,
.cs-back-link:focus-visible svg {
  transform: translateX(-3px);
}


/* ── Hero ───────────────────────────────────────────────────── */

.cs-hero {
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.cs-hero__grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--space-12);
  align-items: center;
}

.cs-hero__text {
  max-width: 640px;
}

.cs-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.cs-hero__media img {
  width: auto;
  height: auto;
  max-height: 900px;
  max-width: 100%;
}

.cs-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.cs-tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
}

.cs-hero__title {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.cs-hero__intro {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.cs-hero__role {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-top: var(--space-2);
  margin-bottom: var(--space-8);
}

.cs-hero__role strong {
  font-weight: 500;
  color: var(--color-text-primary);
}

.cs-hero__glance {
  margin-bottom: var(--space-8);
}

.cs-hero__glance-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #888888;
  margin-bottom: var(--space-3);
}

.cs-glance {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

.cs-glance__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #888888;
  margin-bottom: var(--space-3);
}

.cs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-hairline);
  margin-bottom: var(--space-6);
}

.cs-hero__meta-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #888888;
  margin-bottom: var(--space-1);
}

.cs-hero__meta-value {
  display: block;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-text-primary);
}


/* ── Contents sidebar + section layout ─────────────────────── */

.cs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--space-16);
}

.cs-sidebar {
  position: sticky;
  top: 110px;
  align-self: start;
}

.cs-sidebar__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #888888;
  margin-bottom: var(--space-3);
}

.cs-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-sidebar__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border);
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.cs-sidebar__link:hover,
.cs-sidebar__link.is-active {
  color: var(--color-text-primary);
  border-left-color: var(--color-accent);
}

.cs-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 1100px;
  min-width: 0;
}

.cs-section__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.cs-section {
  scroll-margin-top: 110px;
}

.cs-section + .cs-section {
  margin-top: 93px;
}

.cs-section__title {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.cs-section__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 30px;
  font-weight: 300;
  color: var(--color-text-body);
  max-width: 68ch;
  text-wrap: pretty;
}

.cs-section__body strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-section__body + .cs-section__body {
  margin-top: var(--space-3);
}

.cs-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-list li {
  position: relative;
  padding-left: var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-text-body);
  max-width: 68ch;
}

.cs-list li strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-green);
}

.cs-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.cs-card-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.cs-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.cs-card__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 64px;
}

.cs-card__logo + .cs-card__title {
  margin-top: calc(-1 * var(--space-3));
}

.cs-card__title + .cs-list {
  margin-top: calc(var(--space-2) - var(--space-3));
}

.cs-card__logo img {
  height: 100%;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.cs-card__logo img[alt="Nike"] {
  transform: scale(1.35);
  transform-origin: left center;
}

.cs-card__number {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
}

.cs-card__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-card__description {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-text-secondary);
}

.cs-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.cs-image-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.cs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}

.cs-split .cs-section__body {
  max-width: none;
}

.cs-split img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.pdp-scroll-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.pdp-scroll-item > img {
  border: 1px solid rgba(28, 28, 26, 0.08);
  box-shadow: 0 16px 44px rgba(23, 23, 27, 0.1);
}

.cs-callout-heading {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: inline-block;
  margin: 0 0 var(--space-4) 0;
  padding-bottom: 8px;
  border-bottom: 3px solid;
}

.cs-callout-heading--pain {
  border-color: #d2232a;
}

.cs-callout-heading--solution {
  border-color: #55c5ce;
}

.pdp-scroll-item__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.cs-next {
  border-top: var(--border-hairline);
  padding-block: var(--space-12);
}

.cs-next__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #888888;
  margin-bottom: var(--space-2);
}

.cs-next__link {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
  transition: border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.cs-next__link:hover {
  border-color: var(--color-accent-green);
  opacity: 0.85;
}

.cs-reference {
  padding: var(--space-8) 0;
  border-top: var(--border-hairline);
  margin-top: 93px;
}

.cs-reference__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #888888;
  margin-bottom: var(--space-2);
}

.cs-reference__link {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
  transition: border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.cs-reference__link:hover {
  border-color: var(--color-accent-green);
  opacity: 0.85;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .cs-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .cs-hero__text {
    max-width: 100%;
  }

  .cs-hero__media img {
    max-width: 320px;
  }

  .cs-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .cs-sidebar {
    position: static;
    border-bottom: var(--border-hairline);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .cs-sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .cs-sidebar__link {
    border-left: none;
    border-bottom: 2px solid var(--color-border);
    padding-left: 0;
    padding-bottom: 4px;
    white-space: nowrap;
  }
}

.pdp-scroll {
  display: flex;
  justify-content: center;
}

.pdp-scroll__frame {
  position: relative;
  width: 340px;
  height: 736px;
  animation: pdp-scroll-fade-in 0.6s ease-out;
}

@keyframes pdp-scroll-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.pdp-scroll__ground-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 70%);
  filter: blur(4px);
}

.pdp-scroll__bezel {
  position: absolute;
  inset: -14px;
  border-radius: 62px;
  background: #0a0a0a;
  box-shadow:
    0 50px 100px rgba(0, 0, 0, 0.35),
    0 15px 35px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pdp-scroll__button {
  position: absolute;
  background: #1c1c1e;
}

.pdp-scroll__button--mute {
  left: -16px;
  top: 118px;
  width: 3px;
  height: 44px;
  border-radius: 2px 0 0 2px;
}

.pdp-scroll__button--vol-up {
  left: -16px;
  top: 180px;
  width: 3px;
  height: 60px;
  border-radius: 2px 0 0 2px;
}

.pdp-scroll__button--vol-down {
  left: -16px;
  top: 250px;
  width: 3px;
  height: 60px;
  border-radius: 2px 0 0 2px;
}

.pdp-scroll__button--power {
  right: -16px;
  top: 190px;
  width: 3px;
  height: 90px;
  border-radius: 0 2px 2px 0;
}

.pdp-scroll__screen {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6);
}

.pdp-scroll__glass {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  border-radius: 48px;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0) 18%,
    rgba(255, 255, 255, 0) 82%,
    rgba(255, 255, 255, 0.06) 100%
  );
}

.pdp-scroll__island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  border-radius: 24px;
  background: #000;
  z-index: 50;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 9px;
}

.pdp-scroll__camera {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a3a55, #050508);
}

.pdp-scroll__scroll-area {
  position: absolute;
  inset: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  cursor: default;
}

.pdp-scroll__scroll-area.is-hovering {
  overflow-y: auto;
  cursor: ns-resize;
}

.pdp-scroll__img {
  width: 100%;
  display: block;
  animation: pdp-scroll-loop 36s ease-in-out infinite alternate;
}

.pdp-scroll__img.is-paused {
  animation-play-state: paused;
}

.pdp-scroll__clamp {
  position: relative;
  overflow: hidden;
}

.pdp-scroll__clamp .pdp-scroll__img {
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes pdp-scroll-loop {
  0% { transform: translateY(0); }
  12% { transform: translateY(0); }
  88% { transform: translateY(var(--endY)); }
  100% { transform: translateY(var(--endY)); }
}

.pdp-scroll__cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 55;
  padding: 16px 16px 24px;
  background: #fff;
}

.pdp-scroll__cta-button {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.pdp-scroll__home-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  pointer-events: none;
}

.pdp-scroll__home-indicator::after {
  content: "";
  width: 139px;
  height: 5px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .pdp-scroll__frame {
    animation: none;
  }
}

/* ── Soft media card — floats an image on a gradient surface with a
   diffuse shadow, matching a soft "elevated card" treatment ── */

.cs-media-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  border: 1px solid rgba(28, 28, 26, 0.06);
  border-radius: 24px;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 16px 44px rgba(23, 23, 27, 0.1);
  max-width: 720px;
  margin: var(--space-6) 0 0;
}

body.case-study-page.theme-dark .cs-media-card {
  background: linear-gradient(180deg, #15170F 0%, #0A0B09 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

/* Diagrams/charts with dark text baked into the image stay on a
   white card in both themes so the text stays legible */
body.case-study-page.theme-dark .cs-media-card--always-light {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  border-color: rgba(28, 28, 26, 0.06);
  box-shadow: 0 16px 44px rgba(23, 23, 27, 0.1);
}

.cs-media-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  margin: 0;
}

.cs-media-caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 720px;
  margin-top: var(--space-1);
}

/* ── Zoomable images / lightbox ────────────────────────────── */

.cs-zoomable {
  cursor: zoom-in;
}

.cs-zoomable:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1vh, 12px) clamp(12px, 4vw, 72px);
  background: linear-gradient(180deg, rgba(246, 245, 241, 0.97) 0%, rgba(244, 246, 251, 0.97) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out);
}

body.case-study-page.theme-dark .cs-lightbox {
  background: linear-gradient(180deg, rgba(8, 10, 9, 0.97) 0%, rgba(10, 11, 9, 0.97) 100%);
}

/* Diagrams/charts with dark text baked into the image open in a
   light-styled lightbox in both themes so the text stays legible */
body.case-study-page.theme-dark .cs-lightbox--light {
  background: linear-gradient(180deg, rgba(246, 245, 241, 0.97) 0%, rgba(244, 246, 251, 0.97) 100%);
}

.cs-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cs-lightbox__img {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  padding: clamp(8px, 1.5vw, 16px);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(23, 23, 27, 0.16);
  transform: scale(0.96);
  transition: transform var(--duration-slow) var(--ease-out);
  cursor: zoom-out;
}

body.case-study-page.theme-dark .cs-lightbox__img {
  background: #121412;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

body.case-study-page.theme-dark .cs-lightbox--light .cs-lightbox__img {
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(23, 23, 27, 0.16);
}

.cs-lightbox.is-open .cs-lightbox__img {
  transform: scale(1);
}

.cs-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(28, 28, 26, 0.12);
  border-radius: 50%;
  background: rgba(28, 28, 26, 0.06);
  color: #1c1c1a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.cs-lightbox__close:hover,
.cs-lightbox__close:focus-visible {
  background: rgba(28, 28, 26, 0.12);
}

.cs-lightbox__close:focus-visible {
  outline: 2px solid #1c1c1a;
  outline-offset: 2px;
}

body.case-study-page.theme-dark .cs-lightbox__close {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #FCFCFC;
}

body.case-study-page.theme-dark .cs-lightbox__close:hover,
body.case-study-page.theme-dark .cs-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

body.case-study-page.theme-dark .cs-lightbox__close:focus-visible {
  outline-color: #FCFCFC;
}

body.case-study-page.theme-dark .cs-lightbox--light .cs-lightbox__close {
  border-color: rgba(28, 28, 26, 0.12);
  background: rgba(28, 28, 26, 0.06);
  color: #1c1c1a;
}

body.case-study-page.theme-dark .cs-lightbox--light .cs-lightbox__close:hover,
body.case-study-page.theme-dark .cs-lightbox--light .cs-lightbox__close:focus-visible {
  background: rgba(28, 28, 26, 0.12);
}

body.case-study-page.theme-dark .cs-lightbox--light .cs-lightbox__close:focus-visible {
  outline-color: #1c1c1a;
}

@media (prefers-reduced-motion: reduce) {
  .cs-lightbox,
  .cs-lightbox__img {
    transition: none;
  }
}

@media (max-width: 767px) {
  .cs-hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-4);
  }

  .cs-hero__meta {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-3);
  }

  .cs-image-grid {
    grid-template-columns: 1fr;
  }

  .cs-split {
    grid-template-columns: 1fr;
  }

  .cs-card-grid,
  .cs-card-grid--2col {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }

  .pdp-scroll {
    transform: scale(0.85);
    transform-origin: top center;
    margin-bottom: -110px;
  }

  .pdp-scroll__frame {
    margin-inline: auto;
  }

  .cs-layout {
    padding-block: var(--space-8);
  }

  .cs-content {
    gap: var(--space-8);
  }
}

/* ── Related projects — "More work you might like" ─────────── */

.related-projects {
  padding-block: var(--space-10) var(--space-8);
}

/* Line up with the .cs-content column (sidebar 240px + cs-layout gap) */
@media (min-width: 1024px) {
  .related-projects {
    margin-left: calc(240px + var(--space-12));
    max-width: 1100px;
  }
}

.related-projects__title {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.related-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.related-project {
  position: relative;
  display: block;
  aspect-ratio: 3 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: #0a0a0a;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.related-project:hover,
.related-project:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.related-project__media {
  position: absolute;
  inset: 0;
  /* Set per tile to the image's edge colour so the uncropped image blends in */
  background: var(--tile-bg, #0a0a0a);
}

.related-project__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
}

/* Show the whole image, never cropped */
.related-project__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Portrait images sit at the top, keeping them clear of the footer panel */
.related-project__media--top img {
  object-position: center top;
}

/* Images made at the tile's own 3:5 shape fill it edge to edge; on the
   shorter mobile tile only the bottom (behind the panel) is trimmed */
.related-project__media--fill img {
  object-fit: cover;
  object-position: center top;
}

.related-project__footer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: 20px;
  background: rgba(20, 20, 18, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.related-project__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.related-project__name {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
}

.related-project__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: #a0a0a0;
  margin-top: 2px;
}

.related-project__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-accent-green);
  color: #0a0a0a;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.related-project:hover .related-project__arrow,
.related-project:focus-visible .related-project__arrow {
  background: #d5ff91;
  transform: rotate(45deg);
}

.related-project__tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  /* Reserve two rows of pills so every tile's panel is the same height */
  min-height: 42px;
}

.related-project__tag {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #cfcfcf;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 3px 8px;
}

.related-project__tag--accent {
  color: #0a0a0a;
  background: var(--color-accent-green);
}

@media (max-width: 767px) {
  .related-projects__grid {
    grid-template-columns: 1fr;
  }

  /* Single column: the tall 3:5 tile would fill more than a screen */
  .related-project {
    aspect-ratio: 4 / 5;
  }
}

/* ─── TOPS: quotes, flows ─────────────────────────── */
.cs-subheading {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: var(--space-10) 0 var(--space-4);
}

.cs-quote {
  margin: var(--space-6) 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-accent-green);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  max-width: 60ch;
}

.cs-flow {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cs-flow li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.cs-flow li:not(:last-child)::after {
  content: "→";
  color: var(--color-text-muted);
}