.royal-case-study {
  --case-rule: rgba(255, 255, 255, 0.16);
  --case-muted: #a6a6a6;
}

.royal-case-study .project-hero {
  min-height: min(92vh, 980px);
}

.royal-case-study .project-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.35rem, 7vw, 7rem);
}

.royal-case-study .project-layout {
  display: block;
  padding: 0;
}

.case-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--case-rule);
  background: rgba(5, 5, 5, 0.9);
  padding: 0 clamp(1rem, 4vw, 4rem);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}

.case-nav::-webkit-scrollbar {
  display: none;
}

.case-nav a {
  flex: 0 0 auto;
  border-right: 1px solid var(--case-rule);
  color: #bcbcbc;
  padding: 1rem clamp(0.8rem, 2vw, 1.5rem);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.case-nav a:first-child {
  border-left: 1px solid var(--case-rule);
}

.case-nav a:hover,
.case-nav a:focus-visible {
  background: #fff;
  color: #000;
}

.royal-case-study .project-summary,
.case-section,
.royal-case-study > .project-layout > .project-gallery {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem);
}

.royal-case-study .project-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  column-gap: clamp(2rem, 8vw, 9rem);
  border-bottom: 1px solid var(--case-rule);
}

.royal-case-study .project-summary .project-summary__eyebrow,
.royal-case-study .project-summary h2 {
  grid-column: 1;
}

.royal-case-study .project-summary h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 3.25rem);
  line-height: 1.05;
}

.royal-case-study .project-summary > p:not(.project-summary__eyebrow),
.royal-case-study .project-summary > ul {
  grid-column: 2;
}

.royal-case-study .project-summary > p:first-of-type:not(.project-summary__eyebrow) {
  margin-top: 0;
}

.case-anchor {
  position: relative;
  top: -5rem;
}

.case-section {
  border-bottom: 1px solid var(--case-rule);
}

.case-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem clamp(2rem, 8vw, 9rem);
  margin-bottom: clamp(2rem, 5vw, 5rem);
}

.case-section__intro > p:first-child {
  grid-column: 1;
  margin: 0;
  color: var(--case-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.case-section__intro h2,
.case-section__intro > p:last-child {
  grid-column: 2;
  margin: 0;
}

.case-section__intro h2 {
  font-family: "Syncopate", sans-serif;
  font-size: clamp(1.7rem, 4vw, 4.4rem);
  line-height: 0.98;
  text-transform: uppercase;
}

.case-section__intro > p:last-child {
  max-width: 52rem;
  color: #d7d7d7;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

.royal-case-study .project-featured-video {
  width: 100%;
  margin: 0;
}

.royal-case-study .project-video-stack > :first-child {
  grid-column: auto;
}

.production-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--case-rule);
  background: var(--case-rule);
}

.production-grid article {
  min-height: 19rem;
  background: #080808;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.production-grid span {
  color: #777;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.production-grid h3 {
  margin: 4rem 0 1rem;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(1rem, 2vw, 1.6rem);
  line-height: 1.2;
  text-transform: uppercase;
}

.production-grid p {
  margin: 0;
  color: #c9c9c9;
  line-height: 1.65;
}

.royal-case-study > .project-layout > .project-gallery {
  columns: 3 280px;
  column-gap: 1rem;
  border-bottom: 1px solid var(--case-rule);
}

.case-gallery {
  width: 100%;
  columns: 3 280px;
}

.case-library-video {
  margin-top: clamp(2rem, 5vw, 5rem);
}

.case-section--closing {
  display: grid;
  gap: 1rem;
}

.case-section--closing .case-section__intro {
  margin-bottom: 1rem;
}

.case-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 3.5rem;
  border: 1px solid #fff;
  background: #fff;
  color: #000;
  padding: 0 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.case-cta:hover,
.case-cta:focus-visible {
  background: #000;
  color: #fff;
}

@media (max-width: 760px) {
  .royal-case-study .project-hero {
    min-height: 78svh;
  }

  .royal-case-study .project-summary,
  .case-section__intro {
    grid-template-columns: 1fr;
  }

  .royal-case-study .project-summary > *,
  .case-section__intro > * {
    grid-column: 1 !important;
  }

  .royal-case-study .project-summary h2 {
    margin-bottom: 1rem;
  }

  .production-grid {
    grid-template-columns: 1fr;
  }

  .production-grid article {
    min-height: 15rem;
  }

  .case-nav {
    padding: 0;
  }
}