/* ============================================
   Case Study Template
   Shared styles for individual project pages.
   Each page sets a unique accent via [data-case].
   ============================================ */

:root {
  --case-accent: var(--color-primary-text);
  --case-accent-soft: var(--nav-indicator-bg);
  --case-shadow: var(--icon-shadow);
  --case-shadow-soft: var(--icon-shadow);
  --case-shadow-strong: var(--icon-shadow);
  --case-tint: var(--nav-indicator-bg);
}

/* Elevance Health - accessible blue derived from brand #45B8F3 */
[data-case="elevance-health"] {
  --case-accent: #0a6fa8;
  --case-accent-soft: rgba(69, 184, 243, 0.12);
  --case-shadow: rgba(69, 184, 243, 0.28);
  --case-shadow-soft: rgba(69, 184, 243, 0.14);
  --case-shadow-strong: rgba(69, 184, 243, 0.42);
  --case-tint: rgba(69, 184, 243, 0.05);
}

[data-theme="dark"][data-case="elevance-health"],
[data-theme="dark"] [data-case="elevance-health"] {
  --case-accent: #59c2f7;
  --case-accent-soft: rgba(89, 194, 247, 0.16);
  --case-shadow: rgba(89, 194, 247, 0.3);
  --case-shadow-soft: rgba(89, 194, 247, 0.15);
  --case-shadow-strong: rgba(89, 194, 247, 0.44);
  --case-tint: rgba(89, 194, 247, 0.07);
}

/* UI & Prototyping - violet, distinct from Elevance's blue */
[data-case="ui-prototyping"] {
  --case-accent: #6d28d9;
  --case-accent-soft: rgba(124, 58, 237, 0.12);
  --case-shadow: rgba(124, 58, 237, 0.28);
  --case-shadow-soft: rgba(124, 58, 237, 0.14);
  --case-shadow-strong: rgba(124, 58, 237, 0.42);
  --case-tint: rgba(124, 58, 237, 0.05);
}

[data-theme="dark"][data-case="ui-prototyping"],
[data-theme="dark"] [data-case="ui-prototyping"] {
  --case-accent: #b09bfb;
  --case-accent-soft: rgba(176, 155, 251, 0.16);
  --case-shadow: rgba(176, 155, 251, 0.3);
  --case-shadow-soft: rgba(176, 155, 251, 0.15);
  --case-shadow-strong: rgba(176, 155, 251, 0.44);
  --case-tint: rgba(176, 155, 251, 0.07);
}

/* Sodexo Graphic Design - navy/indigo derived from brand #283897 */
[data-case="sodexo"],
[data-case="sodexo-presentations"],
[data-case="sodexo-marketing"] {
  --case-accent: #2c3ba0;
  --case-accent-soft: rgba(44, 59, 160, 0.12);
  --case-shadow: rgba(44, 59, 160, 0.28);
  --case-shadow-soft: rgba(44, 59, 160, 0.14);
  --case-shadow-strong: rgba(44, 59, 160, 0.42);
  --case-tint: rgba(44, 59, 160, 0.05);
}

[data-theme="dark"][data-case="sodexo"],
[data-theme="dark"] [data-case="sodexo"],
[data-theme="dark"][data-case="sodexo-presentations"],
[data-theme="dark"] [data-case="sodexo-presentations"],
[data-theme="dark"][data-case="sodexo-marketing"],
[data-theme="dark"] [data-case="sodexo-marketing"] {
  --case-accent: #97a3f7;
  --case-accent-soft: rgba(151, 163, 247, 0.16);
  --case-shadow: rgba(151, 163, 247, 0.3);
  --case-shadow-soft: rgba(151, 163, 247, 0.15);
  --case-shadow-strong: rgba(151, 163, 247, 0.44);
  --case-tint: rgba(151, 163, 247, 0.07);
}

/* Good Sh*t - accessible green derived from brand #70C37F */
[data-case="good-sh-t"] {
  --case-accent: #0f7a3d;
  --case-accent-soft: rgba(112, 195, 127, 0.14);
  --case-shadow: rgba(112, 195, 127, 0.3);
  --case-shadow-soft: rgba(112, 195, 127, 0.16);
  --case-shadow-strong: rgba(112, 195, 127, 0.44);
  --case-tint: rgba(112, 195, 127, 0.06);
}

[data-theme="dark"][data-case="good-sh-t"],
[data-theme="dark"] [data-case="good-sh-t"] {
  --case-accent: #5ecb75;
  --case-accent-soft: rgba(94, 203, 117, 0.16);
  --case-shadow: rgba(94, 203, 117, 0.3);
  --case-shadow-soft: rgba(94, 203, 117, 0.15);
  --case-shadow-strong: rgba(94, 203, 117, 0.44);
  --case-tint: rgba(94, 203, 117, 0.07);
}

/* GloMirror - accessible teal derived from brand #42DBD2 */
[data-case="glo-mirror"] {
  --case-accent: #067b76;
  --case-accent-soft: rgba(66, 219, 210, 0.14);
  --case-shadow: rgba(66, 219, 210, 0.3);
  --case-shadow-soft: rgba(66, 219, 210, 0.16);
  --case-shadow-strong: rgba(66, 219, 210, 0.44);
  --case-tint: rgba(66, 219, 210, 0.06);
}

[data-theme="dark"][data-case="glo-mirror"],
[data-theme="dark"] [data-case="glo-mirror"] {
  --case-accent: #3fc9c0;
  --case-accent-soft: rgba(63, 201, 192, 0.16);
  --case-shadow: rgba(63, 201, 192, 0.3);
  --case-shadow-soft: rgba(63, 201, 192, 0.15);
  --case-shadow-strong: rgba(63, 201, 192, 0.44);
  --case-tint: rgba(63, 201, 192, 0.07);
}

/* HOFT Brand Identity - accessible orange derived from brand #E5912B */
[data-case="hoft"] {
  --case-accent: #a05c08;
  --case-accent-soft: rgba(229, 145, 43, 0.14);
  --case-shadow: rgba(229, 145, 43, 0.3);
  --case-shadow-soft: rgba(229, 145, 43, 0.16);
  --case-shadow-strong: rgba(229, 145, 43, 0.44);
  --case-tint: rgba(229, 145, 43, 0.06);
}

[data-theme="dark"][data-case="hoft"],
[data-theme="dark"] [data-case="hoft"] {
  --case-accent: #f0a445;
  --case-accent-soft: rgba(240, 164, 69, 0.16);
  --case-shadow: rgba(240, 164, 69, 0.3);
  --case-shadow-soft: rgba(240, 164, 69, 0.15);
  --case-shadow-strong: rgba(240, 164, 69, 0.44);
  --case-tint: rgba(240, 164, 69, 0.07);
}

/* Carry the per-project accent into the shared navbar (logo, active link,
   hover states, focus ring) whenever a case page's <html> carries [data-case]. */
html[data-case] {
  --color-primary-text: var(--case-accent);
  --nav-indicator-bg: var(--case-accent-soft);
  --nav-shadow: var(--case-shadow);
  --focus-ring: var(--case-accent);
}

/* ---------- Layout ---------- */
.case-main {
  flex: 1;
  width: 100%;
}

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 150;
  background: transparent;
  pointer-events: none;
}

.page-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--case-accent);
}

.case-shell {
  width: min(94%, 1240px);
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 2.25rem;
  align-items: start;
}

/* ---------- Hero ---------- */
.case-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 3rem;
  padding: 10.5rem 1.5rem 2.75rem;
  background: radial-gradient(ellipse 100% 95% at 50% 100%, var(--case-accent-soft), var(--case-tint) 55%, var(--bg) 100%);
  overflow: hidden;
}

.case-hero-inner {
  position: relative;
  z-index: 1;
  width: min(94%, 1240px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.case-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

.case-hero-art {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 28px var(--case-shadow-soft);
  transition: box-shadow 0.25s ease;
}

.case-hero-art:hover {
  box-shadow: 0 14px 34px var(--case-shadow-strong);
}

.case-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

.case-hero-text .case-hero-sub {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .case-hero .case-back {
    display: none;
  }
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  transition: color 0.2s ease, gap 0.2s ease;
}

.case-back svg {
  width: 16px;
  height: 16px;
}

.case-back:hover {
  color: var(--case-accent);
  gap: 0.6rem;
}

.case-sidenav .case-back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  border: 1px solid var(--case-accent);
  color: var(--case-accent);
  background: transparent;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem 0.5rem 0.9rem;
  margin-left: 0;
  border-radius: 999px;
  transition: background 0.2s ease, gap 0.2s ease;
}

.case-sidenav .case-back-button svg {
  width: 15px;
  height: 15px;
}

.case-sidenav .case-back-button:hover {
  background: var(--case-accent-soft);
  gap: 0.6rem;
}

.case-eyebrow {
  width: fit-content;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--case-accent);
}

.case-hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.12;
  max-width: 20ch;
}

.case-hero-sub {
  margin: 0 0 2rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 58ch;
}

.case-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}

.case-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--case-accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px var(--case-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.case-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--case-shadow);
}

.case-cta svg {
  width: 15px;
  height: 15px;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--card-border);
}

.case-meta-item h3 {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.case-meta-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.case-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.case-tag {
  background: var(--case-accent-soft);
  color: var(--case-accent);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

/* ---------- Side nav (desktop) ---------- */
.case-sidenav {
  position: sticky;
  top: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.case-sidenav-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.case-sidenav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 2px solid var(--card-border);
}

.case-sidenav a {
  display: block;
  padding: 0.45rem 0 0.45rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.case-sidenav a:hover {
  color: var(--text);
}

.case-sidenav a.is-active {
  color: var(--case-accent);
  border-left-color: transparent;
  box-shadow: inset 3px 0 0 var(--case-accent);
  font-weight: 700;
}

/* ---------- Floating nav (tablet / mobile) ---------- */
.case-mobile-nav {
  display: none;
}

/* ---------- Content ---------- */
.case-content {
  min-width: 0;
}

.case-section {
  scroll-margin-top: 6.5rem;
  margin-bottom: 4.5rem;
  border-radius: 1.5rem;
  padding: 2.5rem clamp(1.25rem, 3.5vw, 2.75rem);
}

.case-section:first-of-type {
  padding-top: 0;
}

.case-section:last-of-type {
  margin-bottom: 2.5rem;
}

.case-section:nth-of-type(even) {
  background: var(--case-tint);
}

.case-section h2 {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  margin: 0 0 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--case-accent);
}

.case-section h3 {
  font-size: 1.05rem;
  margin: 2rem 0 0.75rem;
}

.case-section p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 1.1rem;
}

.case-section p strong {
  color: var(--text);
}

.case-section a.text-link {
  color: var(--case-accent);
}

.case-section ol,
.case-section ul:not(.case-takeaways) {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 1.1rem;
  padding-left: 1.35rem;
}

.case-section ol li,
.case-section ul:not(.case-takeaways) li {
  margin-bottom: 0.65rem;
}

.case-section ol li:last-child,
.case-section ul:not(.case-takeaways) li:last-child {
  margin-bottom: 0;
}

.case-callout {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--case-accent);
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0 2rem;
}

.case-callout-label {
  font-weight: 700;
  color: var(--case-accent);
  font-size: 0.95rem;
}

.case-callout p {
  margin: 0;
  color: var(--text);
}

/* ---------- Figures / galleries ---------- */
.case-figure {
  margin: 1.75rem 0;
}

.case-figure img,
.case-figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.85rem;
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 24px var(--case-shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-figure img {
  cursor: zoom-in;
}

.case-figure img:hover,
.case-figure video:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px var(--case-shadow-strong);
}

.case-figure figcaption {
  margin-top: 0.65rem;
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-secondary);
}

.case-feature {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.85rem;
  padding: 1.75rem;
  margin: 1.75rem 0;
}

.case-feature-text p {
  margin: 0.65rem 0 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.case-feature img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  border-radius: 0.65rem;
  border: 1px solid var(--card-border);
  cursor: zoom-in;
}

@media (max-width: 700px) {
  .case-feature {
    grid-template-columns: 1fr;
  }

  .case-feature img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

.case-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 2.25rem 0;
  align-items: start;
}

.case-gallery.case-gallery--team {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.case-gallery.case-gallery--team-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.case-gallery--team .case-figure,
.case-gallery--team-5 .case-figure {
  margin: 0;
}

.case-gallery--team .case-figure img,
.case-gallery--team-5 .case-figure img {
  width: 100%;
  height: auto;
}

.case-team-name {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--text);
}

.case-team-role {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  color: var(--text-secondary);
}

@media (max-width: 1023px) {
  .case-gallery.case-gallery--team {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-gallery.case-gallery--team-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .case-gallery.case-gallery--team,
  .case-gallery.case-gallery--team-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.case-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.85rem;
  border: 1px solid var(--card-border);
  box-shadow: 0 6px 18px var(--case-shadow-soft);
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-gallery img:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px var(--case-shadow-strong);
}

.case-gallery.single {
  grid-template-columns: 1fr;
}

/* ---------- Takeaways ---------- */
.case-takeaways {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.case-takeaways li {
  display: flex;
  gap: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.case-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--case-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-check svg {
  width: 11px;
  height: 11px;
  color: var(--case-accent);
}

/* ---------- Footer nav ---------- */
.case-footer-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--card-border);
}

.case-footer-nav .case-back {
  margin-bottom: 0;
}

/* ---------- Gallery format (graphic design pages) ----------
   Image-forward layout: no sidebar, tighter spacing, no alternating
   section tint, so the work itself stays the focus. */
[data-case-format="gallery"] .case-shell {
  grid-template-columns: 1fr;
  width: min(94%, 1240px);
  padding: 0 1.5rem 3rem;
}

[data-case-format="gallery"] .case-sidenav {
  display: none;
}

[data-case-format="gallery"] .case-section {
  margin-bottom: 1.25rem;
  padding: 1rem 0;
  border-radius: 0;
}

[data-case-format="gallery"] .case-section:first-of-type {
  padding-top: 0;
}

[data-case-format="gallery"] .case-section:last-of-type {
  margin-bottom: 1.5rem;
}

[data-case-format="gallery"] .case-section:nth-of-type(even) {
  background: none;
}

[data-case-format="gallery"] .case-section h2 {
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
}

[data-case-format="gallery"] .case-section p,
[data-case-format="gallery"] .case-section ul:not(.case-takeaways),
[data-case-format="gallery"] .case-section ol {
  margin-bottom: 0.75rem;
}

[data-case-format="gallery"] .case-figure {
  margin: 0.5rem 0;
}

[data-case-format="gallery"] .case-gallery {
  margin: 1.1rem 0;
  gap: 0.75rem;
}

[data-case-format="gallery"] .case-figure img:hover,
[data-case-format="gallery"] .case-figure video:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--case-shadow-soft);
}

[data-case-format="gallery"] .case-gallery img:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 22px var(--case-shadow-strong);
}

[data-case-format="gallery"] .case-gallery img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

[data-case-format="gallery"] .case-photo-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--case-shadow-soft);
}

/* Sodexo Marketing Design: flyer composites are wide (2.5:1) and get cut off
   by the 4:3 crop above, so this page shows every image at its natural
   aspect ratio instead, and gives the wider flyer image more of the row. */
[data-case="sodexo-marketing"][data-case-format="gallery"] .case-gallery img {
  aspect-ratio: auto;
  object-fit: initial;
}

/* Stretch the realistic mockup photo to match the flyer's full height so no
   white gap shows underneath it (the mockup's own aspect ratio is taller
   than the wide flyer composite, so it would otherwise fall short). */
[data-case="sodexo-marketing"] .case-gallery.gallery-70-30,
[data-case="sodexo-marketing"] .case-gallery.gallery-30-70 {
  align-items: stretch;
}

[data-case="sodexo-marketing"] .case-gallery.gallery-70-30 img:nth-child(2),
[data-case="sodexo-marketing"] .case-gallery.gallery-30-70 img:nth-child(1) {
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  [data-case="sodexo-marketing"] .case-gallery.gallery-70-30 {
    grid-template-columns: 7fr 3fr;
  }

  [data-case="sodexo-marketing"] .case-gallery.gallery-30-70 {
    grid-template-columns: 3fr 7fr;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .case-shell {
    grid-template-columns: 1fr;
  }

  .case-sidenav {
    display: none;
  }

  .case-mobile-nav {
    display: block;
    position: fixed;
    top: 6.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(94%, 640px);
    z-index: 90;
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    border-radius: 999px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 8px 28px var(--nav-shadow);
    padding: 0.4rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

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

  .case-mobile-nav ul {
    list-style: none;
    display: inline-flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
  }

  .case-mobile-nav a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
  }

  .case-mobile-nav a.is-active {
    color: var(--case-accent);
    background: var(--case-accent-soft);
    font-weight: 700;
  }

  .case-hero {
    padding-top: 13.5rem;
  }

  .case-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .case-hero-art {
    order: -1;
    max-width: 22rem;
  }

  .case-section {
    scroll-margin-top: 10.5rem;
  }

  .case-callout {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .case-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .case-hero {
    padding: 10.5rem 1.25rem 2.75rem;
  }

  .case-hero-inner {
    padding: 0 1.25rem;
  }

  .case-shell {
    padding: 0 1.25rem 6rem;
  }

  .case-meta {
    grid-template-columns: 1fr 1fr;
  }

  .page-progress {
    top: auto;
    bottom: 0;
  }

  /* The section-jump pill (Overview, Brand Applications, etc.) moves from
     floating under the navbar to floating above the bottom edge, out of the
     way of the hamburger dropdown and closer to the content it navigates. */
  .case-mobile-nav {
    top: auto;
    bottom: 1.25rem;
  }

  /* With the pill no longer at the top, jumped-to sections only need to
     clear the navbar itself, not the extra space the pill used to take. */
  .case-section {
    scroll-margin-top: 6.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-back,
  .case-cta,
  .case-gallery img,
  .case-figure img,
  .case-figure video {
    transition: none;
  }
}