/*
  THE JUNK DRAWER — CASE STUDY
  Isolated stylesheet for the experiential-design case study.
  In the live site, load this AFTER projects.css so we do not have to disturb
  Sophia's large existing stylesheet.
*/

:root {
  --jd-paper: #ffffff;
  --jd-ink: #171717;
  --jd-blue: #2466b4;
  --jd-red: #d74328;
  --jd-green: #4c9a3d;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.junkdrawer-case-study-page {
  background: var(--jd-paper);
  color: var(--jd-ink);
}

/* The final list's margin would collapse outside the footer background. */
.junkdrawer-case-study-page #footer .copyright {
  margin-bottom: 0;
}

/* Keep the shared menu's compact proportions on wide screens too. */
.junkdrawer-case-study-page #menuToggle > ul {
  font-size: 16px;
}

/* Accessibility-only heading: the visual title already exists inside the artwork. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- CASE STUDY HERO ---------- */

.jd-case-hero {
  background: #fff;
  min-height: clamp(620px, 52vw, 980px);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.jd-case-hero__inner {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(300px, 34%) minmax(0, 66%);
  margin: 0 auto;
  max-width: 1920px;
  min-height: inherit;
  position: relative;
  width: 100%;
  transform: translateY(-90px);
}

/*
  Left side intentionally has breathing room like the finished 1920px composition.
  The logo PNG already contains the faded R/R/R mark and "From Brand to Place",
  so those effects remain artwork rather than being rebuilt in CSS.
*/
.jd-case-hero__copy {
  align-self: center;
  padding: clamp(4.5rem, 8vw, 9rem) 0 clamp(5rem, 8vw, 9rem) clamp(2rem, 4.1vw, 5rem);
  position: relative;
  z-index: 2;
}

.jd-case-hero__logo {
  display: block;
  height: auto;
  margin: 0 0 0.15rem;
  max-width: 100%;
  width: min(100%, 610px);
}

.jd-case-hero__focus {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-family: 'Junkyard Jamboree', 'JunkDrawer Solid', Arial, Helvetica, sans-serif;
  font-size: clamp(0.62rem, 0.72vw, 0.88rem);
  font-weight: 700;
  gap: 0.32rem;
  letter-spacing: 0.025em;
  line-height: 1.2;
  margin: 0.15rem 0 clamp(0.75rem, 1.1vw, 1.15rem);
  text-transform: uppercase;
}

.focus-blue {
  color: var(--jd-blue);
}

.focus-red {
  color: var(--jd-red);
}

.focus-green {
  color: var(--jd-green);
}

.focus-dot {
  font-size: 0.65em;
}

em,
i {
  font-style: normal;
  color: black;
}

strong,
b {
  color: black;
}

.jd-case-hero__description {
  color: #191919;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1.03vw, 1.18rem);
  line-height: 1.23;
  max-width: 35rem;
}

.jd-case-hero__description p {
  margin: 0;
}

.jd-case-hero__description p+p {
  margin-top: 0.15em;
}

/*
  The right artwork is deliberately allowed to overlap toward the copy.
  Its transparent PNG already includes the cream backing shape and lower
  white junk silhouette, preserving the clipping from Sophia's layout.
*/
.jd-case-hero__store {
  align-self: end;
  margin-left: clamp(-7rem, -6vw, -2rem);
  position: relative;
  z-index: 1;
}

.jd-case-hero__store img {
  display: block;
  height: auto;
  max-width: none;
  transform: translateX(-57px)translateY(-20px);
  width: clamp(860px, 76vw, 1380px);
}

/* Gives us a clean handoff point for Project Overview later. */
.jd-next-section {
  background: #fff;
  min-height: 6rem;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {
  .jd-case-hero {
    min-height: auto;
  }

  .jd-case-hero__inner {
    grid-template-columns: 40% 60%;
  }

  .jd-case-hero__copy {
    padding-left: 2rem;
  }

  .jd-case-hero__store {
    margin-left: -4rem;
  }

  .jd-case-hero__store img {
    width: max(760px, 72vw);
  }
}

@media (max-width: 800px) {
  .jd-case-hero__inner {
    display: flex;
    flex-direction: column;
  }

  .jd-case-hero__copy {
    order: 1;
    padding: 5.5rem 1.5rem 0.5rem;
    width: min(100%, 620px);
  }

  .jd-case-hero__logo {
    width: min(92%, 480px);
  }

  .jd-case-hero__description {
    font-size: 1rem;
    line-height: 1.35;
  }

  .jd-case-hero__store {
    align-self: center;
    margin: -1rem 0 0;
    order: 2;
    width: 100%;
  }

  .jd-case-hero__store img {
    margin: 0 auto;
    max-width: 115%;
    width: 115%;
  }
}

@media (max-width: 480px) {
  .jd-case-hero__copy {
    padding: 4.75rem 1.1rem 0;
  }

  .jd-case-hero__focus {
    font-size: 0.58rem;
    gap: 0.24rem;
  }

  .jd-case-hero__store {
    margin-top: 0;
  }

  .jd-case-hero__store img {
    max-width: 132%;
    width: 132%;
  }
}

/* THE JUNK DRAWER CASE STUDY — PROJECT OVERVIEW */
.jd-overview {
  background: #fff;
  color: #171717;
  overflow: visible;
  padding: 0 0 clamp(2rem, 3vw, 4rem);
  position: relative;

  transform: translateY(-100px);
}

.jd-overview__inner {
  align-items: center;
  display: grid;
  transform: translateY(50px);
  grid-template-columns: minmax(0, 74%) minmax(220px, 26%);
  margin: 0 auto;
  max-width: 1920px;
  min-height: clamp(650px, 52vw, 1000px);
  width: 100%;
}

.jd-overview__visual {
  aspect-ratio: 1312/1215;
  position: relative;
  width: 100%;
}

.jd-overview__background {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  position: absolute;
  user-select: none;
  width: 100%;
  transform: translateY(-12%);
}

/* ==========================================
   WALKTHROUGH SHORTCUT
========================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

#junkdrawer-walkthrough {
  scroll-margin-top: 60px;
}

.jd-walkthrough-shortcut {
  display: block;
  border: 0;
  width: 400px;
  max-width: 85%;
  margin-top: 48px;
  transition: transform 0.2s ease;
}

.jd-walkthrough-shortcut img {
  display: block;
  width: 100%;
  height: auto;
}

.jd-walkthrough-shortcut:hover {
  transform: translateY(-4px);
}

.jd-walkthrough-shortcut:focus-visible {
  outline: 3px solid var(--jd-blue);
  outline-offset: 6px;
}

/* Separate decorative branch */
.jd-overview__branch {
  position: absolute;
  top: -15%;
  right: 0%;
  width: clamp(507px, 48vw, 828px);
  height: auto;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.jd-overview__cards {
  inset: 0;
  position: absolute;
  z-index: 2;
}

.jd-overview__card {
  margin: 0;
  position: absolute;
  transform-origin: center;
  transition: transform .24s ease, filter .24s ease;
  will-change: transform, filter;
}

.jd-overview__card img {
  display: block;
  height: auto;
  width: 100%;
}

.jd-overview__card--concept {
  left: 2.1%;
  top: 30.5%;
  width: 27%;
}

.jd-overview__card--spatial {
  left: 24.5%;
  top: 28.2%;
  width: 38.5%;
  z-index: 3;
}

.jd-overview__card--environment {
  left: 60%;
  top: 31.3%;
  width: 34%;
}

/* ============================================================
   THE JUNK DRAWER CASE STUDY — THE JUNK JOURNEY
   ============================================================ */

.jd-journey {
  background: #fff;
  color: #171717;
  overflow: hidden;
  padding: 0 0 clamp(4rem, 6vw, 7rem);
  position: relative;
  transform: translateY(-150px);
}

.jd-journey__inner {
  align-items: center;
  display: grid;
  grid-template-columns:
    minmax(250px, 29%) minmax(330px, 36%) minmax(280px, 35%);
  margin: 0 auto;
  max-width: 1920px;
  min-height: clamp(650px, 48vw, 900px);
  width: 100%;
}


/* -------------------------
   LEFT / INTRO
   ------------------------- */

.jd-journey__intro {
  align-self: center;
  padding-left: clamp(2rem, 4vw, 5rem);
  position: relative;
  z-index: 2;
}

.jd-journey__title {
  display: block;
  height: auto;
  margin-bottom: 0.8rem;
  max-width: 100%;
  width: min(100%, 500px);
}

.jd-journey__intro-copy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1.12rem);
  line-height: 1.18;
  max-width: 32rem;
}

.jd-journey__intro-copy p {
  margin: 0 0 0.25em;
}


/* Imagination sign intentionally escapes toward the left edge */

.jd-journey__imagination {
  display: block;
  height: auto;
  margin-left: clamp(-5rem, -4vw, -2rem);
  margin-top: clamp(2rem, 3vw, 3.5rem);
  max-width: none;
  width: clamp(360px, 32vw, 610px);
}


/* -------------------------
   CENTER / SIX STATIONS
   ------------------------- */

.jd-journey__stations {
  align-self: center;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.jd-journey__stations img {
  display: block;
  height: auto;
  max-height: 800px;
  max-width: 100%;
  object-fit: contain;
  width: min(88%, 525px);
  transform: translateX(2%);
}


/* -------------------------
   RIGHT / FLOW
   ------------------------- */

.jd-journey__flow {
  align-self: center;
  padding: 0 clamp(2rem, 4vw, 5rem) 0 clamp(1rem, 2vw, 2.5rem);
  position: relative;
  z-index: 2;
}

.jd-journey__flow-title {
  display: block;
  height: auto;
  margin-bottom: 0.7rem;
  max-width: 100%;
  width: min(100%, 330px);
}

.jd-journey__flow-copy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1.12rem);
  line-height: 1.2;
  max-width: 31rem;
}

.jd-journey__flow-copy p {
  margin: 0 0 1em;
}

.jd-journey__principles {
  display: block;
  height: auto;
  margin-top: clamp(1.25rem, 2vw, 2rem);
  max-width: 100%;
  width: min(100%, 570px);
}

/* ============================================================
   THE JUNK DRAWER CASE STUDY — REGISTRATION STATION
   ============================================================ */

.jd-registration {
  background: #fff;
  color: #171717;
  overflow: hidden;
  padding: clamp(3rem, 5vw, 6rem) 0 clamp(4rem, 7vw, 8rem);
  transform: translateY(-150px);
}

.jd-registration__inner {
  margin: 0 auto;
  max-width: 1920px;
  padding: 0 clamp(2rem, 4vw, 5rem);
  width: 100%;
}


/* ============================================================
   TOP
   ============================================================ */

.jd-registration__top {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(240px, 27%) minmax(0, 73%);
  gap: clamp(1.5rem, 3vw, 4rem);
}


/* Intro */

.jd-registration__intro {
  align-self: center;
}

.jd-registration__label {
  display: block;
  height: auto;
  margin-bottom: 1rem;
  max-width: 100%;
  width: min(100%, 560px);
}

.jd-registration__intro-copy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1.12rem);
  line-height: 1.2;
  max-width: 31rem;
}

.jd-registration__intro-copy p {
  margin: 0;
}


/* Large environmental hero */

.jd-registration__environment {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.jd-registration__environment img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}


/* ============================================================
   BOTTOM
   ============================================================ */

.jd-registration__bottom {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(240px, 27%) minmax(0, 73%);
  gap: clamp(1.5rem, 3vw, 4rem);
  margin-top: -30px;
}


/* ============================================================
   REGISTRATION GUIDE
   ============================================================ */

.jd-registration__guide {
  margin: 0;
  transform: translateY(-140px);
}

.jd-registration__guide>img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: min(100%, 520px);
}


/* ============================================================
   SETTING THE JOURNEY
   ============================================================ */

.jd-registration__journey {
  min-width: 0;
}

.jd-registration__sublabel {
  display: block;
  height: auto;
  margin: 0 0 1rem;
  max-width: 100%;
  width: min(38%, 350px);
}

.jd-registration__journey-grid {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}


/* Junk Pass */

.jd-registration__pass {
  margin: 0;
}

.jd-registration__pass>img {
  display: block;
  height: auto;
  width: 100%;
}


/* Kiosk + materials */

.jd-registration__details {
  margin: 0;
}

.jd-registration__detail-images {
  align-items: stretch;
  display: grid;

  /*
       Kiosk is naturally much wider than the narrow material image.
       This keeps approximately the same proportion as your original.
    */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);

  gap: clamp(0.5rem, 1vw, 1rem);
}

.jd-registration__detail-images img {
  display: block;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  width: 100%;
}

.jd-registration__kiosk {
  object-position: center;
}

.jd-registration__materials {
  object-position: center;
}


/* ============================================================
   CAPTIONS
   ============================================================ */

.jd-registration figcaption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.88rem, 0.95vw, 1.05rem);
  line-height: 1.25;
  margin-top: 0.9rem;
}

/* ============================================================
   THE JUNK DRAWER CASE STUDY — DESTRUCTION STATION
   ============================================================ */

.jd-destruction {
  background: #fff;
  color: #171717;
  overflow: hidden;
  padding: clamp(3rem, 5vw, 6rem) 0 clamp(4rem, 7vw, 8rem);
  margin-top: -240px;
}

.jd-destruction__inner {
  margin: 0 auto;
  max-width: 1920px;
  padding: 0 clamp(2rem, 4vw, 5rem);
  width: 100%;
}


/* ============================================================
   TOP — INTRO + ENVIRONMENT
   ============================================================ */

.jd-destruction__top {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(250px, 29%) minmax(0, 71%);
  gap: clamp(1.5rem, 3vw, 4rem);
}


/* Intro */

.jd-destruction__intro {
  align-self: center;
}

.jd-destruction__label {
  display: block;
  height: auto;
  margin-bottom: 1rem;
  max-width: 100%;
  width: min(100%, 570px);
}

.jd-destruction__intro-copy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1.12rem);
  line-height: 1.2;
  max-width: 31rem;
}

.jd-destruction__intro-copy p {
  margin: 0;
}


/* Environment hero */

.jd-destruction__environment {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.jd-destruction__environment img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}


/* ============================================================
   BOTTOM
   ============================================================ */

.jd-destruction__bottom {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(250px, 29%) minmax(0, 71%);
  gap: clamp(1.5rem, 3vw, 4rem);
  margin-top: clamp(2rem, 3vw, 3.5rem);
}


/* ============================================================
   INSTRUCTIONAL POSTER
   ============================================================ */

.jd-destruction__poster {
  margin: 0;
  transform: translateY(-140px);
}

.jd-destruction__poster>img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: min(100%, 560px);
}


/* ============================================================
   SAFE DISMANTLING
   ============================================================ */

.jd-destruction__safe {
  min-width: 0;
  margin-top: -40px;
}

.jd-destruction__sublabel {
  display: block;
  height: auto;
  margin: 0 0 1rem;
  max-width: 100%;
  width: min(32%, 330px);
}


/*
   Cubicle receives most of the horizontal space.
   Tools and Return stay narrow like the original case-study layout.
*/

.jd-destruction__safe-grid {
  align-items: start;
  display: grid;
  grid-template-columns:
    minmax(0, 1.75fr) minmax(130px, 0.7fr) minmax(130px, 0.7fr);
  gap: clamp(0.75rem, 1.3vw, 1.5rem);
}


/* All figures */

.jd-destruction__safe-grid figure {
  margin: 0;
}

.jd-destruction__safe-grid img {
  display: block;
  max-width: 100%;
}


/* Cubicle */

.jd-destruction__cubicle>img {
  height: auto;
  width: 100%;
}


/*
   The two narrow photos are given matching visual heights
   to recreate the original spread.
*/

.jd-destruction__tools>img,
.jd-destruction__return>img {
  aspect-ratio: 0.67 / 1;
  height: auto;
  object-fit: cover;
  width: 100%;
}


/* ============================================================
   CAPTIONS
   ============================================================ */

.jd-destruction figcaption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.88rem, 0.95vw, 1.05rem);
  line-height: 1.25;
  margin-top: 0.9rem;
}


/* ============================================================
   TABLET
   ============================================================ */

@media screen and (max-width: 1100px) {

  .jd-destruction__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .jd-destruction__top,
  .jd-destruction__bottom {
    grid-template-columns: 30% 70%;
    gap: 1.5rem;
  }

  .jd-destruction__intro-copy,
  .jd-destruction figcaption {
    font-size: 0.9rem;
  }

  .jd-destruction__safe-grid {
    gap: 0.8rem;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 800px) {

  .jd-destruction {
    padding: 3.5rem 0 5rem;
  }

  .jd-destruction__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .jd-destruction__top,
  .jd-destruction__bottom {
    display: block;
  }

  .jd-destruction__label {
    width: min(90%, 520px);
  }

  .jd-destruction__intro-copy {
    font-size: 1rem;
    line-height: 1.4;
    max-width: 38rem;
  }

  .jd-destruction__environment {
    margin-top: 2rem;
  }

  .jd-destruction__bottom {
    margin-top: 3rem;
  }

  .jd-destruction__poster {
    margin: 0 auto;
    max-width: 520px;
  }

  .jd-destruction figcaption {
    font-size: 1rem;
    line-height: 1.4;
  }

  .jd-destruction__safe {
    margin-top: 3.5rem;
  }

  .jd-destruction__sublabel {
    width: min(60%, 330px);
  }

  /*
       Cubicle gets its own row.
       Tools + Return sit beside each other beneath it.
    */

  .jd-destruction__safe-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .jd-destruction__cubicle {
    grid-column: 1 / -1;
    margin: 0 auto !important;
    max-width: 600px;
  }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media screen and (max-width: 480px) {

  .jd-destruction__inner {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .jd-destruction__safe-grid {
    display: block;
  }

  .jd-destruction__tools,
  .jd-destruction__return {
    margin-top: 2.5rem !important;
  }

  .jd-destruction__tools>img,
  .jd-destruction__return>img {
    aspect-ratio: auto;
    height: auto;
    margin: 0 auto;
    max-width: 350px;
  }

}

/* ============================================================
   THE JUNK DRAWER CASE STUDY — EXCAVATION STATION
   ============================================================ */

.jd-excavation {
  background: #fff;
  color: #171717;
  overflow: hidden;
  padding: clamp(3rem, 5vw, 6rem) 0 clamp(4rem, 7vw, 8rem);
  margin-top: -150px;
}

.jd-excavation__inner {
  margin: 0 auto;
  max-width: 1920px;
  padding: 0 clamp(2rem, 4vw, 5rem);
  width: 100%;
}


/* ============================================================
   TOP — INTRO + ENVIRONMENT
   ============================================================ */

.jd-excavation__top {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(260px, 29%) minmax(0, 71%);
  gap: clamp(1.5rem, 3vw, 4rem);
}


/* ============================================================
   INTRO
   ============================================================ */

.jd-excavation__intro {
  min-width: 0;
}

.jd-excavation__label {
  display: block;
  height: auto;
  margin-bottom: 1rem;
  max-width: 100%;
  width: min(100%, 570px);
}

.jd-excavation__intro-copy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1.12rem);
  line-height: 1.2;
  max-width: 31rem;
}

.jd-excavation__intro-copy p {
  margin: 0 0 0.7rem;
}

.jd-excavation__intro-copy p:last-child {
  margin-bottom: 0;
}


/* Binny environmental sign */

.jd-excavation__binny-sign {
  display: block;
  height: auto;
  margin-top: clamp(1rem, 2vw, 2rem);
  max-width: 100%;
  width: min(100%, 560px);
}


/* ============================================================
   LARGE ENVIRONMENT
   ============================================================ */

.jd-excavation__environment {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.jd-excavation__environment img {
  display: block;
  width: 108%;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translate(-12px, -40px);
}


/* ============================================================
   DESIGNED FOR DISCOVERY
   ============================================================ */

/*
   This section begins underneath the environment rather than
   underneath the whole page, matching the original composition.
*/

.jd-excavation__discovery {
  margin-left: calc(29% + clamp(1.5rem, 3vw, 4rem));
  margin-top: clamp(-18rem, -18vw, -14rem);
}

.jd-excavation__discovery-label {
  display: block;
  height: auto;
  margin-bottom: 0.8rem;
  max-width: 100%;
  width: min(31%, 340px);

}

.jd-excavation__discovery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
}

.jd-excavation__discovery-grid figure {
  margin: 0;
}

.jd-excavation__discovery-grid figure>img {
  aspect-ratio: 1.36 / 1;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}


/* ============================================================
   SHARED USE
   ============================================================ */

.jd-excavation__shared {
  margin-top: 0px;
}

.jd-excavation__bins {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.jd-excavation__shared-label {
  display: block;
  height: auto;
  margin: -20px 0 0.65rem;
  max-width: 100%;
  width: min(25%, 330px);
}

.jd-excavation__shared-copy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1.12rem);
  line-height: 1.25;
  margin: 0;
  max-width: 72rem;
}


/* =========================================================
   TEMPTATION STATION
========================================================= */

.jd-temptation-section {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 70px 4% 85px;
  box-sizing: border-box;
}

.jd-temptation-section p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}


/* ---------- TOP ---------- */

.jd-temptation-section .jd-station-top {
  display: grid;
  grid-template-columns: 29% 71%;
  align-items: start;
  gap: 0;
}

.jd-temptation-section .jd-station-intro {
  position: relative;
  z-index: 2;
  padding-top: 50px;
  padding-right: 20px;
}

.jd-temptation-section .jd-station-label {
  display: block;
  width: 100%;
  max-width: 510px;
  height: auto;
  margin: 0 0 18px;
}

.jd-temptation-section .jd-station-intro p {
  max-width: 440px;
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.18;
  color: #111;
}

.jd-temptation-sublabel {
  width: 78%;
  max-width: 250px;
  margin-top: 25px;
}


/* ---------- HERO ENVIRONMENT ---------- */

.jd-temptation-hero img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.jd-temptation-hero {
  position: relative;
  z-index: 1;
  margin-left: -20px;
  transform: translateY(20px);
}

/* ---------- BOTTOM DETAIL ROW ---------- */

.jd-temptation-details {
  display: grid;
  grid-template-columns: 2.15fr 0.8fr 1.15fr;
  gap: 22px;
  align-items: start;

  /*
       Matches the original case-study composition:
       detail row begins underneath the environment rather
       than underneath the intro column.
    */
  margin-left: 2%;
  margin-top: 28px;
}

.jd-temptation-details .jd-detail-card {
  min-width: 0;
}

.jd-temptation-details .jd-detail-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.jd-temptation-details .jd-detail-card p {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.2;
  color: #111;
}


/* Slightly preserve the narrow signage composition */

.jd-temptation-signage img {
  aspect-ratio: 0.83 / 1;
  object-fit: cover;
}

.jd-temptation-capsules img {
  aspect-ratio: 1.15 / 1;
  object-fit: cover;
}

/* =========================================================
   CREATION STATION
========================================================= */

.jd-creation-section {
  position: relative;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 65px 4% 85px;
  box-sizing: border-box;
  overflow: visible;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: -30px;
}


/* ---------- DECORATIVE TREE ---------- */

.jd-creation-tree {
  position: absolute;
  left: 0;
  top: 28em;

  width: 17%;
  max-width: 315px;
  height: auto;

  z-index: 0;
  pointer-events: none;
}


/* ---------- TOP ---------- */

.jd-creation-top {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 27% 73%;
  align-items: start;
  gap: 0;
}


/* ---------- INTRO ---------- */

.jd-creation-intro {
  padding-top: 90px;
  padding-right: 25px;
  position: relative;
  z-index: 2;

}

.jd-creation-label {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  margin: 0 0 18px;
}

.jd-creation-intro p {
  max-width: 410px;
  margin: 0 0 5px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.18;
  color: #111;
}


/* ---------- HERO ---------- */

.jd-creation-hero {
  position: relative;
  z-index: 1;
  margin-left: -35px;
  margin-top: -25px;
}

.jd-creation-hero img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   LOWER DETAIL AREA
========================================================= */

.jd-creation-details {
  position: relative;
  z-index: 2;

  /*
       Leaves the tree visible down the left side, matching
       the original case-study composition.
    */
  width: 78%;
  margin-left: 18%;
  margin-top: -5px;

  display: grid;
  grid-template-columns: 2.15fr 1fr;
  gap: 25px;
  align-items: start;
}

.jd-creation-detail {
  min-width: 0;
}


/* ---------- SUBLABELS ---------- */

.jd-creation-sublabel {
  display: block;
  width: auto;
  max-width: 100%;
  height: 48px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 10px;
}

.jd-creation-workstation .jd-creation-sublabel {
  margin-left: 0;
}


/* ---------- DETAIL IMAGES ---------- */

.jd-creation-detail-image {
  display: block;
  width: 100%;
  height: auto;
}

.jd-creation-hub .jd-creation-detail-image {
  aspect-ratio: 1.55 / 1;
  object-fit: cover;
}

.jd-creation-workstation .jd-creation-detail-image {
  aspect-ratio: 0.75 / 1;
  object-fit: cover;
}


/* ---------- DETAIL COPY ---------- */

.jd-creation-detail p {
  margin: 14px 0 0;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: #111;
}

/* =========================================================
   ALONG THE WAY — DESKTOP REFINEMENT
========================================================= */

.jd-alongtheway-section {
  position: relative;
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding: 45px 3.5% 80px;
  box-sizing: border-box;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
}

.jd-alongtheway-section p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: #111;
}


/* =========================================================
   INTRO
========================================================= */

.jd-alongtheway-intro {
  width: 27%;
  max-width: 390px;
  margin-bottom: -105px;
  position: relative;
  z-index: 2;
}

.jd-alongtheway-label {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
  margin-bottom: 14px;
}

.jd-alongtheway-intro p {
  margin: 0;
  font-size: 18px;
  line-height: 1.18;
}


/* =========================================================
   UPPER — BUCKET + IMAGINATION
========================================================= */

.jd-alongtheway-upper {
  display: grid;
  grid-template-columns: 28% 64%;
  gap: 3.5%;
  align-items: start;
}


/* BUCKET RETURN */

.jd-alongtheway-bucket {
  padding-top: 275px;
  transform: translateY(-110px);
}

.jd-alongtheway-bucket img {
  display: block;
  width: 94%;
  height: auto;
  margin: 0 auto;
}

.jd-alongtheway-bucket p {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.18;
}


/* IMAGINATION */

.jd-alongtheway-imagination {
  margin-left: 0;
  padding-top: 30px;
  transform: translateY(-260px);
}

.jd-alongtheway-imagination img {
  display: block;

  /* smaller than previous version */
  width: 90%;
  height: auto;

  margin: 0 auto;
}

.jd-alongtheway-imagination p {
  width: 94%;
  margin: 7px auto 0;

  font-size: 17px;
  line-height: 1.18;
}


/* =========================================================
   BINNY CARTS
========================================================= */

.jd-alongtheway-binny-row {
  display: grid;

  /* much larger image / smaller copy relationship */
  grid-template-columns: 72% 24%;
  gap: 4%;

  width: 72%;

  /* pull this entire section upward */
  margin-top: -210px;
  margin-left: 0;


  align-items: center;
}

.jd-alongtheway-binny-image img {
  display: block;
  width: 140%;
  height: auto;

  transform: translateX(-30px);
}

.jd-alongtheway-binny-copy {
  transform: translateX(160px);
}

.jd-alongtheway-sublabel {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-bottom: 10px;
}

.jd-alongtheway-binny-copy p {
  margin: 0;
  font-size: 17px;
  line-height: 1.18;
}


/* =========================================================
   WASHING STATION
========================================================= */

.jd-alongtheway-washing-row {
  display: grid;

  /*
       Give the station most of the page, but leave a healthy
       information column rather than the narrow one before.
    */
  grid-template-columns: 67% 27%;
  gap: 5%;

  /* narrower than full page = centered composition */
  width: 88%;

  /* THIS moves the entire composition away from left edge */
  margin: 35px auto 0;

  align-items: start;
}

.jd-alongtheway-washing-image img {
  width: 120%;
  max-width: none;
  height: auto;
  transform: translateX(-90px)translateY(7px);
}


/* WASHING COPY */

.jd-alongtheway-washing-copy {
  transform: translateX(-55px);
}

.jd-washing-label {
  width: 100%;
  max-width: 220px;
  margin-bottom: 14px;
}

.jd-alongtheway-washing-copy p {
  width: 100%;
  max-width: 330px;

  margin: 0;

  font-size: 17px;
  line-height: 1.18;
}


/* WASHING INSTRUCTION ICONS */

.jd-washing-instructions {
  display: block;

  /* noticeably larger than before */
  width: 42%;
  max-width: 145px;

  transform: translateX(-20px)translateY(16px);

  height: auto;

}

.jd-alongtheway-washing-copy,
.jd-alongtheway-washing-icons {
  transform: translateX(32px);
}

.jd-alongtheway-washing-icons {
  margin-top: -20px;
}

/* =========================================
   ADOPTION STATION
========================================= */

.adoption-section {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 90px 4% 110px;
  box-sizing: border-box;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;

}

.adoption-section p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.22;
  margin: 10px 0 0;
}


/* ---------- INTRO ---------- */

.adoption-intro {
  display: grid;
  grid-template-columns: 27% 73%;
  align-items: start;
  gap: 20px;
}

.adoption-intro-copy {
  padding-top: 35px;
}

.adoption-label {
  width: 100%;
  max-width: 370px;
  display: block;
  margin-bottom: 16px;
}

.adoption-carrier {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin-top: 10px;
}


/* ---------- FRIENDSHIP ---------- */
.adoption-certificates {
  display: block;
  width: 100%;
  margin-top: 20px;
  transform: translateY(-60px)translateX(-5px) scale(1.055);
}

.adoption-friendship-row {
  display: grid;
  grid-template-columns: 32% 68%;
  gap: 35px;
  align-items: start;
  margin-top: 20px;

}

.adoption-friendship {
  transform: translateY(-100px);
}

@media screen and (max-width: 1400px) {
  .adoption-friendship {
    transform: none;
  }
}

.adoption-sublabel {
  display: block;
  width: auto;
  max-width: 290px;
  max-height: 65px;
  object-fit: contain;
  object-position: left center;
}

.adoption-hearts {
  display: block;
  width: 100%;
  max-width: 430px;
  margin-top: 22px;
}

.adoption-store-photo {
  transform: translateY(-50px);
}

.adoption-store-photo img {
  display: block;
  width: 100%;
}


/* ---------- STRIKE A POSE ---------- */

.adoption-photo-section {
  margin-top: 45px;
  transform: translateY(-110px);
}

.adoption-photo-intro {
  max-width: 760px;
}

.adoption-photos-row {
  display: grid;
  grid-template-columns: 66% 34%;
  gap: 30px;
  align-items: start;
  margin-top: 25px;
}

.adoption-photo-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.adoption-section .adoption-photo-3d-caption {
  margin-top: -14px;
}

.adoption-photosets-main img,
.adoption-photo-details img {
  display: block;
  width: 100%;
}



/* ---------- PHOTO BOOTH ---------- */

.adoption-imagination-row {
  display: grid;
  grid-template-columns: 78% 22%;
  gap: 30px;
  align-items: center;
}

.adoption-photobooth {
  display: block;
  width: 100%;
}

.adoption-imagination-copy {
  align-self: center;
  transform: translateY(-50px);
}


/* ---------- READY FOR HOME ---------- */

.adoption-home-row {
  display: grid;
  grid-template-columns: 34% 66%;
  gap: 35px;
  align-items: end;
}

.adoption-ready-home {
  align-self: start;
}


.adoption-exit img {
  display: block;
  width: 86%;
  height: auto;
  margin: 0 auto;
  transform: translateY(-15px);
}

.adoption-exit p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -5px;
}

/* ============================================
   CLOSING — FROM BRAND TO PLACE
============================================= */

.jd-closing {
  background: #fff;
  width: 100%;
  padding: 80px 4% 90px;
  box-sizing: border-box;
  margin-top: -100px;
}

/* A consistent 120px transition from Adoption into the closing section. */
.jd-section.adoption-section {
  padding-bottom: 60px;
}

.adoption-section + .jd-closing {
  margin-top: 0;
  padding-top: 60px;
}

.jd-closing-inner {
  width: 100%;
  max-width: 1750px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 32% 68%;
  align-items: center;
}


/* ---------- LEFT COLUMN ---------- */

.jd-closing-copy {
  position: relative;
  z-index: 2;
  padding-left: 20px;
}

.jd-closing-logo {
  display: block;
  width: 100%;
  max-width: 570px;
  height: auto;
  margin: 0 0 20px;
}

.jd-closing-text {
  max-width: 460px;

  /* force our normal case-study sans serif */
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
}

.jd-closing-text p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 24px;
}

.jd-closing-text strong {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}


/* ---------- RIGHT ART ---------- */

.jd-closing-art {
  display: flex;
  align-items: center;
  justify-content: center;

  /*
       Slight overlap toward the copy recreates
       the tighter composition of the reference.
    */
  margin-left: -20px;
}

.jd-closing-art img {
  display: block;
  width: 90%;
  max-width: 1100px;
  height: auto;
  transform: translateY(40px);
}

/* ==========================================
   EXPERIENCE THE JUNK DRAWER — VIDEO
========================================== */

.jd-experience {
  width: 100%;
  margin: 10px auto 30px;
  padding: 0 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50px);
}

/* Decorative CTA arch */
.jd-experience-arch {
  display: block;
  width: 68%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 20px;
}

.jd-back-to-top {
  border: 0;
}

.jd-experience > .jd-back-to-top {
  margin-top: 20px;
}

.jd-back-to-top img {
  display: block;
  width: 100%;
  height: auto;
}

.jd-back-to-top:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 6px;
}

/* YouTube video */
.jd-experience-video {
  width: 100%;
  max-width: 1250px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

.jd-experience-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================
   RESPONSIVE
============================================= */
/* ============================================================
   INTERMEDIATE RESPONSIVE PASS
   Keeps the full desktop composition intact, but prevents
   narrow laptop / partial-window layouts from becoming cramped.
   ============================================================ */


/* ------------------------------------------------------------
   1. MEDIUM DESKTOP / NARROW LAPTOP
   ------------------------------------------------------------ */

@media screen and (max-width: 1250px) and (min-width: 1001px) {

    /* ---------- GENERAL TYPE ---------- */

    .jd-overview__copy,
    .jd-registration__intro-copy,
    .jd-registration figcaption,
    .jd-journey__intro-copy,
    .jd-journey__flow-copy,
    .jd-excavation figcaption,
    .jd-excavation__shared-copy,
    .jd-station-intro p,
    .jd-detail-card p,
    .jd-creation-intro p,
    .jd-creation-detail p,
    .jd-alongtheway-section p,
    .adoption-section p {
        font-size: 16px;
        line-height: 1.28;
    }


    /* ---------- PROJECT OVERVIEW ---------- */

    .jd-overview__inner {
        grid-template-columns: minmax(0, 68%) minmax(260px, 32%);
    }

    .jd-overview__copy {
        padding-left: 1.25rem;
        padding-right: 2rem;
    }


    /* ---------- REGISTRATION ---------- */

    .jd-registration__top {
        grid-template-columns: minmax(260px, 32%) minmax(0, 68%);
        gap: 1.25rem;
        align-items: start;
    }

    .jd-registration__intro {
        padding-top: 1.5rem;
    }

    .jd-registration__intro-copy {
        max-width: 27rem;
    }

    .jd-registration__bottom {
        grid-template-columns: 31% 69%;
        gap: 1.5rem;
    }


    /* ---------- TEMPTATION ---------- */

    .jd-temptation-section .jd-station-top {
        grid-template-columns: 32% 68%;
    }

    .jd-temptation-section .jd-station-intro {
        padding-right: 1.25rem;
    }


    /* ---------- CREATION ---------- */

    .jd-creation-top {
        grid-template-columns: 32% 68%;
    }

    .jd-creation-intro {
        padding-top: 35px;
        padding-right: 20px;
    }

    .jd-creation-intro p {
        max-width: 100%;
    }

    .jd-creation-hero {
        margin-left: 0;
    }

    /*
       Pull the decorative tree farther away from the copy.
       It can remain decorative without sitting on top of text.
    */
    .jd-creation-tree {
        width: 14%;
        top: 430px;
    }

    .jd-creation-details {
        width: 82%;
        margin-left: 16%;
    }


    /* ---------- ALONG THE WAY ---------- */

    .jd-alongtheway-intro {
        width: 31%;
        max-width: 360px;

        /*
           The desktop negative margin is useful at 1920,
           but becomes dangerous once the page narrows.
        */
        margin-bottom: -40px;
    }

    .jd-alongtheway-upper {
        grid-template-columns: 31% 65%;
        gap: 4%;
    }

    .jd-alongtheway-bucket {
        padding-top: 180px;
    }

    .jd-alongtheway-binny-row {
        width: 82%;
        grid-template-columns: 68% 28%;
        gap: 4%;
    }

    .jd-alongtheway-washing-row {
        width: 94%;
        grid-template-columns: 65% 30%;
        gap: 5%;
    }


    /* ---------- ADOPTION ---------- */

    .adoption-intro {
        grid-template-columns: 32% 68%;
        align-items: start;
    }

    .adoption-intro-copy {
        padding-top: 1.5rem;
        padding-right: 1rem;
        position: relative;
        z-index: 2;
    }

    .adoption-certificates {
        position: relative;
        z-index: 1;
        max-width: 100%;
    }

    /*
       Prevent the second Adoption row from climbing into
       the introductory paragraph as the viewport narrows.
    */
    .adoption-friendship-row {
        margin-top: 35px;
    }

}



/* ------------------------------------------------------------
   2. TABLET / HALF-WINDOW RANGE
   Complex hero compositions stop trying to imitate 1920px.
   ------------------------------------------------------------ */

@media screen and (max-width: 1000px) and (min-width: 801px) {

    /* ---------- GENERAL TYPE ---------- */

    .jd-overview__copy,
    .jd-registration__intro-copy,
    .jd-registration figcaption,
    .jd-journey__intro-copy,
    .jd-journey__flow-copy,
    .jd-excavation figcaption,
    .jd-excavation__shared-copy,
    .jd-station-intro p,
    .jd-detail-card p,
    .jd-creation-intro p,
    .jd-creation-detail p,
    .jd-alongtheway-section p,
    .adoption-section p {
        font-size: 15px;
        line-height: 1.32;
    }


    /* ---------- PROJECT OVERVIEW ---------- */

    .jd-overview__inner {
        grid-template-columns: 64% 36%;
    }

    .jd-overview__copy {
        padding-left: 1rem;
        padding-right: 1.5rem;
    }


    /* ---------- REGISTRATION ---------- */

    .jd-registration__top {
        grid-template-columns: 34% 66%;
        gap: 1rem;
        align-items: start;
    }

    .jd-registration__intro {
        padding-top: 0;
    }

    .jd-registration__environment {
        margin-left: 0;
    }

    .jd-registration__bottom {
        grid-template-columns: 34% 66%;
        gap: 1rem;
    }


    /* ---------- CREATION ---------- */

    .jd-creation-section {
        padding-left: 4%;
        padding-right: 4%;
        overflow: hidden;
    }

    .jd-creation-top {
        display: block;
    }

    .jd-creation-intro {
        width: 55%;
        max-width: 500px;
        padding: 0;
        margin-bottom: 25px;
    }

    .jd-creation-intro p {
        max-width: none;
    }

    .jd-creation-label {
        max-width: 400px;
    }

    .jd-creation-hero {
        width: 88%;
        margin: 0 0 0 auto;
    }

    .jd-creation-tree {
        display: none;
    }

    .jd-creation-details {
        width: 88%;
        margin: 35px 0 0 auto;
    }


    /* ---------- ALONG THE WAY ---------- */

    .jd-alongtheway-intro {
        width: 45%;
        max-width: 430px;
        margin-bottom: 30px;
    }

    .jd-alongtheway-upper {
        grid-template-columns: 34% 62%;
        gap: 4%;
    }

    .jd-alongtheway-bucket {
        padding-top: 80px;
    }

    .jd-alongtheway-imagination {
        padding-top: 0;
    }

    .jd-alongtheway-binny-row {
        width: 92%;
        grid-template-columns: 66% 30%;
        gap: 4%;
        margin-top: 40px;
    }

    .jd-alongtheway-washing-row {
        width: 94%;
        grid-template-columns: 63% 32%;
        gap: 5%;
    }


    /* ---------- ADOPTION ---------- */

    /*
       This is the important one.
       At this width the giant station no longer shares a row
       with a tiny crushed text column.
    */

    .adoption-intro {
        display: block;
    }

    .adoption-intro-copy {
        width: 52%;
        max-width: 520px;
        padding-top: 0;
        position: relative;
        z-index: 2;
    }

    .adoption-label {
        max-width: 400px;
    }

    .adoption-certificates {
        display: block;
        width: 82%;
        max-width: none;
        margin: 25px 0 0 auto;
        position: relative;
        z-index: 1;
    }

    .adoption-friendship-row {
        margin-top: 45px;
        clear: both;
    }

}

@media screen and (max-width: 1100px) {

  .jd-closing {
    padding: 60px 6%;
  }

  .jd-closing-inner {
    grid-template-columns: 38% 62%;
  }

  .jd-closing-text p {
    font-size: 17px;
  }
}


@media screen and (max-width: 760px) {

  .jd-closing {
    padding: 50px 7% 60px;
  }

  .jd-closing-inner {
    display: flex;
    flex-direction: column;
  }

  .jd-closing-copy {
    width: 100%;
    padding-left: 0;
  }

  .jd-closing-logo {
    width: 82%;
    max-width: 500px;
    margin: 0 auto 25px;
  }

  .jd-closing-text {
    max-width: 100%;
  }

  .jd-closing-text p {
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 20px;
  }

  .jd-closing-art {
    width: 100%;
    margin: 25px 0 0;
  }

  .jd-closing-art img {
    width: 100%;
    max-width: 750px;
  }
}

/* ---------- RESPONSIVE ---------- */

@media screen and (max-width: 900px) {

  .adoption-section {
    padding: 60px 6%;
  }

  .adoption-intro,
  .adoption-friendship-row,
  .adoption-photos-row,
  .adoption-imagination-row,
  .adoption-home-row {
    grid-template-columns: 1fr;
  }

  .adoption-intro-copy {
    padding-top: 0;
  }

  .adoption-label {
    max-width: 330px;
  }

  .adoption-imagination-row {
    gap: 20px;
  }

  .adoption-home-row {
    gap: 50px;
  }
}

@media screen and (max-width: 600px) {

  .adoption-section p {
    font-size: 16px;
  }

  .adoption-section {
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width: 1100px) {

  .jd-creation-top {
    grid-template-columns: 31% 69%;
  }

  .jd-creation-intro {
    padding-top: 60px;
  }

  .jd-creation-intro p,
  .jd-creation-detail p {
    font-size: 16px;
  }

  .jd-creation-tree {
    width: 18%;
    top: 390px;
  }

  .jd-creation-details {
    width: 80%;
    margin-left: 17%;
  }
}


@media screen and (max-width: 800px) {

  .jd-creation-section {
    padding: 45px 6%;
    overflow: hidden;
  }

  .jd-creation-top {
    display: block;
  }

  .jd-creation-intro {
    padding: 0;
  }

  .jd-creation-intro p {
    max-width: none;
  }

  .jd-creation-hero {
    margin: 35px 0 0;
  }

  /*
       On mobile the decorative tree becomes part of the
       normal flow instead of sitting beside the content.
    */
  .jd-creation-tree {
    position: relative;
    display: block;

    left: auto;
    top: auto;

    width: 45%;
    max-width: 260px;

    margin: 20px 0 -20px -6%;
  }

  .jd-creation-details {
    width: 100%;
    margin: 35px 0 0;

    grid-template-columns: 1fr;
    gap: 40px;
  }

  .jd-creation-hub .jd-creation-detail-image,
  .jd-creation-workstation .jd-creation-detail-image {
    aspect-ratio: auto;
  }

  .jd-creation-sublabel {
    height: auto;
    max-height: 48px;
  }
}

/* ---------- RESPONSIVE ---------- */

@media screen and (max-width: 1100px) {

  .jd-temptation-section .jd-station-top {
    grid-template-columns: 34% 66%;
  }

  .jd-temptation-section .jd-station-intro p {
    font-size: 17px;
  }

  .jd-temptation-details .jd-detail-card p {
    font-size: 16px;
  }
}


@media screen and (max-width: 800px) {

  .jd-temptation-section {
    padding: 45px 6%;
  }

  .jd-temptation-section .jd-station-top {
    display: block;
  }

  .jd-temptation-section .jd-station-intro {
    padding: 0;
  }

  .jd-temptation-section .jd-station-intro p {
    max-width: none;
  }

  .jd-temptation-sublabel {
    margin-top: 30px;
    max-width: 300px;
  }

  .jd-temptation-hero {
    margin: 35px 0 0;
  }

  .jd-temptation-details {
    grid-template-columns: 1fr;
    margin: 35px 0 0;
    gap: 35px;
  }

  .jd-temptation-signage img,
  .jd-temptation-capsules img {
    aspect-ratio: auto;
  }
}

/* ============================================================
   CAPTIONS
   ============================================================ */

.jd-excavation figcaption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.88rem, 0.95vw, 1.05rem);
  line-height: 1.25;
  margin-top: 0.85rem;
}


/* ============================================================
   TABLET
   ============================================================ */

@media screen and (max-width: 1100px) {

  .jd-excavation__inner {
    padding-left: 2rem;
    padding: 0;
  }

  .jd-excavation__top {
    grid-template-columns: 30% 70%;
    gap: 1.5rem;
  }

  .jd-excavation__discovery {
    margin-left: calc(30% + 1.5rem);
  }

  .jd-excavation__intro-copy,
  .jd-excavation__shared-copy,
  .jd-excavation figcaption {
    font-size: 0.9rem;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 800px) {

  .jd-excavation {
    padding: 3.5rem 0 5rem;
  }

  .jd-excavation__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .jd-excavation__top {
    display: block;
  }

  .jd-excavation__label {
    width: min(90%, 520px);
  }

  .jd-excavation__intro-copy {
    font-size: 1rem;
    line-height: 1.4;
    max-width: 38rem;
  }

  .jd-excavation__binny-sign {
    margin: 2rem auto 0;
    max-width: 430px;
  }

  .jd-excavation__environment {
    margin-top: 3rem;
  }


  /* Discovery returns to full page width */

  .jd-excavation__discovery {
    margin-left: 0;
    margin-top: 2.5rem;
  }

  .jd-excavation__discovery-label {
    width: min(55%, 340px);
  }

  .jd-excavation__discovery-grid {
    gap: 1.5rem;
  }

  .jd-excavation figcaption,
  .jd-excavation__shared-copy {
    font-size: 1rem;
    line-height: 1.4;
  }


  /* Shared bins */

  .jd-excavation__shared {
    margin-top: 4rem;
  }

  .jd-excavation__shared-label {
    width: min(55%, 330px);
  }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media screen and (max-width: 520px) {

  .jd-excavation__inner {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .jd-excavation__discovery-grid {
    display: block;
  }

  .jd-excavation__discovery-grid figure+figure {
    margin-top: 2.5rem;
  }

  .jd-excavation__discovery-grid figure>img {
    aspect-ratio: auto;
    height: auto;
  }

  .jd-excavation__shared-label,
  .jd-excavation__discovery-label {
    width: min(75%, 330px);
  }

}

/* ============================================================
   TABLET
   ============================================================ */

@media screen and (max-width: 1100px) {

  .jd-registration__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .jd-registration__top,
  .jd-registration__bottom {
    grid-template-columns: 30% 70%;
    gap: 1.5rem;
  }

  .jd-registration__intro-copy,
  .jd-registration figcaption {
    font-size: 0.9rem;
  }

  .jd-registration__journey-grid {
    gap: 1rem;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 800px) {

  .jd-registration {
    padding: 3.5rem 0 5rem;
  }

  .jd-registration__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .jd-registration__top,
  .jd-registration__bottom {
    display: block;
  }

  .jd-registration__label {
    width: min(90%, 500px);
  }

  .jd-registration__intro-copy {
    font-size: 1rem;
    line-height: 1.4;
    max-width: 38rem;
  }

  .jd-registration__environment {
    margin-top: 2rem;
  }

  .jd-registration__bottom {
    margin-top: 2.5rem;
  }

  .jd-registration__guide {
    margin: 0 auto;
    max-width: 550px;
  }

  .jd-registration figcaption {
    font-size: 1rem;
    line-height: 1.4;
  }

  .jd-registration__journey {
    margin-top: 3.5rem;
  }

  .jd-registration__sublabel {
    width: min(65%, 350px);
  }

  .jd-registration__journey-grid {
    display: block;
  }

  .jd-registration__pass {
    margin-bottom: 3rem;
  }

  .jd-registration__detail-images {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media screen and (max-width: 480px) {

  .jd-registration__inner {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .jd-registration__detail-images {
    gap: 0.5rem;
  }

}

/* ============================================================
   TABLET
   ============================================================ */

@media screen and (max-width: 1100px) {

  .jd-journey__inner {
    grid-template-columns: 31% 35% 34%;
  }

  .jd-journey__intro {
    padding-left: 2rem;
  }

  .jd-journey__flow {
    padding-left: 1rem;
    padding-right: 2rem;
  }

  .jd-journey__intro-copy,
  .jd-journey__flow-copy {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .jd-journey__imagination {
    margin-left: -2rem;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 800px) {

  .jd-journey {
    padding: 4rem 0;
  }

  .jd-journey__inner {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .jd-journey__intro,
  .jd-journey__flow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
  }

  .jd-journey__title {
    width: min(85%, 430px);
  }

  .jd-journey__intro-copy,
  .jd-journey__flow-copy {
    font-size: 1rem;
    line-height: 1.4;
    max-width: 38rem;
  }

  /* Put the journey diagram directly after its explanation */
  .jd-journey__stations {
    margin: 2rem auto;
    padding: 0 1.25rem;
    width: 100%;
  }

  .jd-journey__stations img {
    max-height: none;
    width: min(100%, 520px);
  }

  .jd-journey__imagination {
    margin: 1.5rem 0 1rem -1.5rem;
    width: min(105%, 560px);
  }

  .jd-journey__flow {
    margin-top: 2rem;
  }

  .jd-journey__flow-title {
    width: min(70%, 330px);
  }

  .jd-journey__principles {
    margin: 1.5rem auto 0;
    width: min(100%, 580px);
  }
}


/* Small phones */

@media screen and (max-width: 480px) {

  .jd-journey__intro,
  .jd-journey__flow {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .jd-journey__imagination {
    margin-left: -1.15rem;
    width: 110%;
  }

}

@media (hover:hover) and (pointer:fine) {
  .jd-overview__card:hover {
    filter: drop-shadow(0 18px 16px rgba(45, 27, 16, .22));
    transform: translateY(-10px) scale(1.035);
    z-index: 6;
  }
}

.jd-overview__copy {
  align-self: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.95rem, 1.02vw, 1.15rem);
  line-height: 1.2;
  margin-left: clamp(-1rem, -.8vw, 0rem);
  max-width: 25rem;
  padding: 2rem clamp(2rem, 4vw, 5rem) 2rem 0;
  position: relative;
  z-index: 5;
}

.jd-overview__copy p {
  margin: 0 0 1.05em;
}

.jd-overview__copy p:last-child {
  margin-bottom: 0;
}

.jd-overview__copy strong {
  font-weight: 700;
}

@media screen and (max-width:1100px) {
  .jd-overview__inner {
    grid-template-columns: minmax(0, 68%) minmax(240px, 32%);
    min-height: auto;
  }

  .jd-overview__copy {
    font-size: .95rem;
    line-height: 1.3;
    margin-left: -.5rem;
    padding-right: 1.5rem;
  }
}

@media screen and (max-width:800px) {
  .jd-overview {
    padding-top: 1rem;
  }

  .jd-overview__inner {
    display: block;
  }

  .jd-overview__visual {
    margin-left: -5%;
    width: 110%;
  }

  .jd-overview__copy {
    font-size: 1rem;
    line-height: 1.4;
    margin: -3vw auto 0;
    max-width: 38rem;
    padding: 0 1.5rem;
  }
}

@media screen and (max-width:480px) {
  .jd-overview__visual {
    margin-left: -10%;
    width: 120%;
  }

  .jd-overview__copy {
    margin-top: -1rem;
    padding: 0 1.15rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .jd-overview__card {
    transition: none;
  }

  .jd-overview__card:hover {
    transform: none;
  }

}

/* ============================================================
   READABILITY PASS — DESKTOP/TABLET PROSE ONLY
   Added without changing layout, spacing, imagery, or display fonts.
   ============================================================ */
@media screen and (min-width: 801px) {

  .jd-case-hero__description,
  .jd-overview__copy,
  .jd-journey__intro-copy,
  .jd-journey__flow-copy,
  .jd-registration__intro-copy,
  .jd-destruction__intro-copy,
  .jd-excavation__intro-copy,
  .jd-excavation__shared-copy,
  .jd-temptation-section .jd-station-intro p,
  .jd-creation-intro p,
  .jd-alongtheway-intro p,
  .adoption-section p,
  .jd-closing-text p {
    font-size: 19px;
  }

  .jd-registration figcaption,
  .jd-destruction figcaption,
  .jd-excavation figcaption,
  .jd-temptation-details .jd-detail-card p,
  .jd-creation-detail p,
  .jd-alongtheway-bucket p,
  .jd-alongtheway-imagination p,
  .jd-alongtheway-binny-copy p,
  .jd-alongtheway-washing-copy p {
    font-size: 18px;
  }
}

@media screen and (max-width: 801px) {

  .jd-experience {
    margin: 50px auto 80px;
    padding: 0 6%;
  }

  .jd-experience-arch {
    width: 90%;
    margin-bottom: 15px;
  }

  .jd-experience > .jd-back-to-top {
    margin-top: 15px;
  }

  .jd-experience-video {
    width: 100%;
  }
}

/* ============================================================
   RESPONSIVE STABILITY PASS — 2026-10-07
   Keep the approved wide desktop composition untouched.
   At narrower widths, remove desktop-only offsets and let
   each piece of artwork occupy its own space in document flow.
   ============================================================ */
@media screen and (max-width: 1250px) {
  body.junkdrawer-case-study-page { overflow-x: clip; }
  .jd-case-hero__inner { transform: none; }
  .jd-overview, .jd-journey, .jd-registration { transform: none; }
  .jd-overview__inner { transform: none; }
  .jd-registration__guide, .jd-destruction__poster { transform: none; }
  .jd-destruction, .jd-excavation { margin-top: 0; }
  .jd-creation-tree { display: none; }
}

@media screen and (max-width: 1250px) {
  /* Use one comfortable reading column before the side columns get cramped. */
  .jd-overview__inner, .jd-journey__inner,
  .jd-registration__top, .jd-registration__bottom,
  .jd-destruction__top, .jd-destruction__bottom,
  .jd-excavation__top,
  .jd-temptation-section .jd-station-top,
  .jd-creation-top, .adoption-intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 1.5rem;
  }
  .jd-overview__inner { gap: 0; }
  .jd-overview__visual {
    width: min(100%, 900px);
    margin: 0 auto;
    flex: none;
  }
  .jd-overview__branch {
    width: min(44%, 380px);
    right: 0;
    top: -6%;
  }
  .jd-overview__copy {
    width: min(100%, 780px);
    max-width: none;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
  }
  .jd-journey__inner { padding: 0 clamp(1.25rem, 4vw, 3rem); }
  .jd-journey__intro, .jd-journey__flow {
    width: 100%; padding: 0; align-self: stretch;
  }
  .jd-journey__stations { width: 100%; margin: 0 auto; }
  .jd-journey__stations img { width: min(80%, 480px); transform: none; }
  .jd-journey__imagination { width: min(90%, 470px); margin: 1.5rem 0 0; }
  .jd-registration__bottom, .jd-destruction__bottom { margin-top: 2.5rem; }
  .jd-registration__guide, .jd-destruction__poster { width: min(100%, 650px); margin: 0 auto; }
  .jd-registration__journey, .jd-destruction__safe { width: 100%; margin-top: 1.5rem; }
  .jd-excavation__binny-sign { max-width: min(100%, 420px); }
  .jd-temptation-section .jd-station-intro,
  .jd-creation-intro, .adoption-intro-copy {
    width: 100%; max-width: 780px; padding: 0; margin: 0;
  }
  .jd-temptation-hero, .jd-creation-hero {
    width: 100%; max-width: 1050px; margin: 0 auto;
  }
  .jd-temptation-hero img, .jd-creation-hero img {
    display: block; max-width: 100%; width: 100%; height: auto;
    transform: none;
  }
  .jd-creation-details { width: 100%; margin: 2rem auto 0; }
  .adoption-certificates {
    width: min(100%, 950px); max-width: 100%;
    margin: 1rem auto 0; transform: none;
  }
  .adoption-friendship-row { margin-top: 2rem; }
  .adoption-friendship, .adoption-store-photo,
  .adoption-photo-section { transform: none; }
  .jd-overview__copy, .jd-journey__intro-copy, .jd-journey__flow-copy,
  .jd-registration__intro-copy, .jd-destruction__intro-copy,
  .jd-excavation__intro-copy, .jd-excavation__shared-copy,
  .jd-temptation-section .jd-station-intro p,
  .jd-creation-intro p, .jd-alongtheway-intro p,
  .adoption-section p { font-size: 18px; line-height: 1.4; }
}

@media screen and (max-width: 1250px) {
  /* Along the Way was the largest source of narrow text and overflow. */
  .jd-alongtheway-section { padding: 3rem clamp(1.25rem, 4vw, 3rem); }
  .jd-alongtheway-intro {
    width: min(100%, 780px); max-width: none;
    margin: 0 0 2rem; position: relative;
  }
  .jd-alongtheway-upper,
  .jd-alongtheway-binny-row,
  .jd-alongtheway-washing-row {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem; width: 100%; margin: 2rem auto 0;
  }
  .jd-alongtheway-bucket, .jd-alongtheway-imagination {
    width: 100%; padding: 0; margin: 0; transform: none;
  }
  .jd-alongtheway-bucket img, .jd-alongtheway-imagination img {
    width: min(100%, 650px); margin: 0 auto;
  }
  .jd-alongtheway-bucket p, .jd-alongtheway-imagination p {
    width: min(100%, 780px); margin: .75rem auto 0;
  }
  .jd-alongtheway-binny-image img,
  .jd-alongtheway-washing-image img {
    display: block; width: min(100%, 900px); max-width: 100%;
    height: auto; margin: 0 auto; transform: none;
  }
  .jd-alongtheway-binny-copy, .jd-alongtheway-washing-copy,
  .jd-alongtheway-washing-icons { transform: none; width: 100%; }
  .jd-alongtheway-binny-copy p, .jd-alongtheway-washing-copy p {
    width: 100%; max-width: 780px;
  }
  .jd-alongtheway-binny-copy p, .jd-alongtheway-washing-copy p,
  .jd-alongtheway-bucket p, .jd-alongtheway-imagination p {
    font-size: 18px; line-height: 1.4;
  }
}

@media screen and (max-width: 800px) {
  .jd-case-hero { min-height: 0; }
  .jd-case-hero__inner { display: flex; flex-direction: column; transform: none; }
  .jd-case-hero__copy { width: 100%; padding: 4.75rem 1.25rem 1rem; }
  .jd-case-hero__store { align-self: center; width: 100%; margin: 0; overflow: hidden; }
  .jd-case-hero__store img {
    display: block; width: 100%; max-width: 100%;
    height: auto; margin: 0 auto; transform: none;
  }
  .jd-next-section { min-height: 0; }
  .jd-overview { padding-top: 1rem; transform: none; }
  .jd-overview__inner { transform: none; }
  .jd-overview__visual { width: 100%; margin: 0 auto; }
  .jd-overview__branch { width: 38%; right: 0; top: -2%; }
  .jd-overview__copy { margin: 0 auto; padding: 1rem 1.25rem 2rem; }
  .jd-journey, .jd-registration { transform: none; }
  .jd-registration__guide, .jd-destruction__poster { transform: none; }
  .jd-destruction, .jd-excavation { margin-top: 0; }
  .jd-creation-tree { display: none; }
  .jd-creation-intro { width: 100%; }
  .jd-creation-hero { width: 100%; margin: 1.5rem auto 0; }
  .jd-creation-details { width: 100%; margin: 2rem auto 0; }
  .adoption-intro { display: flex; flex-direction: column; }
  .adoption-intro-copy { width: 100%; max-width: none; }
  .adoption-certificates { margin: 1rem auto 0; transform: none; }
  .adoption-friendship-row, .adoption-photos-row,
  .adoption-imagination-row, .adoption-home-row {
    display: grid; grid-template-columns: minmax(0, 1fr);
  }
  .adoption-friendship, .adoption-store-photo,
  .adoption-photo-section { transform: none; }
  .jd-registration__safe-grid, .jd-destruction__safe-grid {
    min-width: 0;
  }
  .jd-overview__copy, .jd-journey__intro-copy, .jd-journey__flow-copy,
  .jd-registration__intro-copy, .jd-destruction__intro-copy,
  .jd-excavation__intro-copy, .jd-excavation__shared-copy,
  .jd-temptation-section .jd-station-intro p,
  .jd-creation-intro p, .jd-alongtheway-intro p,
  .adoption-section p { font-size: 18px; line-height: 1.42; }
}

@media screen and (max-width: 520px) {
  .jd-overview__branch { width: 33%; }
  .jd-registration__journey-grid,
  .jd-destruction__safe-grid,
  .jd-excavation__discovery-grid,
  .jd-temptation-details,
  .jd-creation-details { display: grid; grid-template-columns: minmax(0, 1fr); }
  .jd-registration__journey-grid > *,
  .jd-destruction__safe-grid > *,
  .jd-excavation__discovery-grid > *,
  .jd-temptation-details > *,
  .jd-creation-details > * { min-width: 0; }
  .jd-registration__detail-images { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .jd-journey__stations img { width: min(100%, 430px); }
  .jd-walkthrough-shortcut { width: min(100%, 400px); }
}

/* ============================================================
   PHONE-SIZE REFINEMENTS — preserves desktop and tablet layouts
   Applies only at 600px and below. Keep at end of stylesheet.
   ============================================================ */
@media screen and (max-width: 600px) {
  /* Overview: decorative branch slightly larger. */
  .jd-overview__branch {
    width: 42%;
  }

  /* Journey arrow artwork reaches the left edge of the viewport. */
  .jd-journey__imagination {
    width: min(470px, calc(100vw - 1rem));
    max-width: none;
    margin-left: calc(-1 * clamp(1.25rem, 4vw, 3rem));
  }

  /* Station intros: label -> environment -> explanation.
     display:contents lets the existing HTML remain unchanged. */
  .jd-registration__top,
  .jd-destruction__top,
  .jd-excavation__top,
  .jd-temptation-section .jd-station-top,
  .jd-creation-top,
  .adoption-intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .jd-registration__intro,
  .jd-destruction__intro,
  .jd-excavation__intro,
  .jd-temptation-section .jd-station-intro,
  .jd-creation-intro,
  .adoption-intro-copy {
    display: contents;
  }

  .jd-registration__label, .jd-destruction__label,
  .jd-excavation__label, .jd-temptation-section .jd-station-label,
  .jd-creation-label, .adoption-label { order: 1; }

  .jd-registration__environment, .jd-destruction__environment,
  .jd-excavation__environment, .jd-temptation-hero,
  .jd-creation-hero, .adoption-carrier {
    order: 2;
    margin: 0.5rem 0 1rem;
    width: 100%;
    transform: none;
  }

  .jd-registration__intro-copy, .jd-destruction__intro-copy,
  .jd-excavation__intro-copy,
  .jd-temptation-section .jd-station-intro p,
  .jd-creation-intro p, .adoption-intro-copy p { order: 3; }

  /* Excavation: remove translated artwork and negative spacing
     that can leave blank areas when the columns stack. */
  .jd-excavation__environment img {
    width: 100%; max-width: 100%; transform: none;
  }
  .jd-excavation__discovery {
    margin: 1.5rem 0 0;
    transform: none;
  }
  .jd-excavation__shared { margin-top: 2rem; }
  .jd-excavation__bins { margin: 0 auto; }

  /* Temptation: keep optional-design label with the intro, no width cap. */
  .jd-temptation-sublabel {
    order: 4;
    width: 50%;
    max-width: none;
    height: auto;
    margin: 0.75rem 0 1rem;
  }

  /* Tree is decorative and too tall for phone compositions. */
  .jd-creation-tree { display: none; }

  /* Washing instruction artwork is nonessential on narrow phones. */
  .jd-washing-instructions { display: none; }

  /* Adoption: translated rows overlap because transforms do not
     reserve layout space. Restore natural document flow. */
  .adoption-imagination-row,
  .adoption-home-row {
    transform: none;
    gap: 1.25rem;
  }
  .adoption-imagination-copy { transform: none; }
  .adoption-photo-section { transform: none; }
  .adoption-photobooth {
     max-width: 100%;
      height: auto;
    margin: 35px auto 0; }
}

/* Walkthrough shortcut: after storefront on phones, unchanged on desktop. */
.jd-walkthrough-shortcut--mobile { display: none; }
@media screen and (max-width: 600px) {
  .jd-case-hero__copy > .jd-walkthrough-shortcut { display: none; }
  .jd-case-hero__inner > .jd-walkthrough-shortcut--mobile {
    display: block;
    order: 3;
    width: min(400px, calc(100% - 2.5rem));
    max-width: none;
    margin: 0.75rem auto 2rem;
  }
}


/* ============================================================
   PHONE SCREENSHOT REFINEMENTS — October 2026
   Targeted spacing/alignment only; full desktop remains intact.
   ============================================================ */
@media screen and (max-width: 600px) {
  /* Destruction: visually center the environment artwork. */
  .jd-destruction__environment {
    justify-content: center;
  }
  .jd-destruction__environment img {
    width: 96%;
    max-width: 96%;
    margin-inline: auto;
    transform: translateX(8px);
  }

  /* Excavation: avoid clipping the artwork at the right edge. */
  .jd-excavation__environment img {
    width: 92%;
    max-width: 92%;
    margin-inline: auto;
    transform: none;
  }

  /* Binny's sign: close about half the excess vertical gap,
     without moving it as far as the screenshot's full arrow. */
  .jd-excavation__binny-sign {
    margin-bottom: 1.25rem;
  }

  /* Shared-use: keep the label, bins, then explanation together. */
  .jd-excavation__shared {
    margin-top: 1rem;
  }
  .jd-excavation__shared-label {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  .jd-excavation__bins {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Creation: tighten the gap between the heading and hero. */
  .jd-creation-hero {
    margin-top: -16px;
  }

  /* Adoption: remove the extra gap above the photo-set image. */
  .adoption-photos-row {
    margin-top: 0;
  }
}

/* Phone correction: the EXCAVATION ENVIRONMENT artwork (not Binny's sign)
   should span from the actual left edge of the viewport. */
@media screen and (max-width: 600px) {
  .jd-excavation__environment {
    width: 100%;
    min-width: 0;
  }
  .jd-excavation__environment img {
    display: block;
    width: 100vw;
    max-width: none;
    height: auto;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    transform: none;
  }
}

/* ============================================================
   PHONE FIX — EXCAVATION ARTWORK ANCHORED TO RIGHT VIEWPORT EDGE
   Keep the complete image visible and eliminate the right inset.
   ============================================================ */
@media screen and (max-width: 600px) {
  .jd-excavation__environment {
    --jd-excavation-edge: 1.5rem;
    width: 100%;
    min-width: 0;
  }
  .jd-excavation__environment img {
    display: block;
    width: calc(100vw - var(--jd-excavation-edge));
    max-width: none;
    height: auto;
    margin-left: auto;
    margin-right: calc(-1 * var(--jd-excavation-edge));
    transform: none;
  }
}

/* Excavation: remove right inset at intermediate sizes */
@media screen and (min-width: 601px) and (max-width: 900px) {
  .jd-excavation__inner {
    padding-right: 0;
  }

  .jd-excavation__environment {
    width: 100%;
    margin-right: 0;
  }
}

@media screen and (max-width: 520px) {
  .jd-excavation__environment {
    --jd-excavation-edge: 1.15rem;
  }
}


/* Excavation artwork: flush with right screen edge */
@media screen and (min-width: 601px) and (max-width: 900px) {
  .jd-excavation__environment {
    width: calc(100% + 5vw);
    max-width: none;
    margin-left: 0;
    margin-right: -5vw;
    transform: none;
  }

  .jd-excavation__environment img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    transform: none;
  }
}

/* ============================================================
   COMPACT TABLET / NARROW WINDOW REFINEMENTS — OCTOBER 2026
   601–900px only. Do not alter the finished phone or desktop.
   ============================================================ */
@media screen and (min-width: 601px) and (max-width: 900px) {
  /* Hero logo stays centered; connect Overview more closely to Journey. */
  .jd-overview { padding-bottom: 0; }
  .jd-overview__copy { padding-bottom: .5rem; }
  .jd-journey { padding-top: 1rem; }

  /* Let the Imagination sign bleed all the way to the viewport's left edge.
     The intro can have different padding at different window widths. */
  .jd-journey__imagination {
    margin-left: calc(-1 * (100vw - 100%) / 2);
    max-width: none;
  }

  /* Station storytelling: label, environment hero, description.
     display:contents exposes the label and copy to the flex parent
     without modifying HTML or affecting the desktop arrangement. */
  .jd-registration__top,
  .jd-destruction__top,
  .jd-excavation__top,
  .jd-temptation-section .jd-station-top,
  .jd-creation-top,
  .adoption-intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .jd-registration__intro,
  .jd-destruction__intro,
  .jd-excavation__intro,
  .jd-temptation-section .jd-station-intro,
  .jd-creation-intro,
  .adoption-intro-copy { display: contents; }

  .jd-registration__label,
  .jd-destruction__label,
  .jd-excavation__label,
  .jd-temptation-section .jd-station-label,
  .jd-creation-label,
  .adoption-label { order: 1; margin-bottom: 0; }

  .jd-registration__environment,
  .jd-destruction__environment,
  .jd-excavation__environment,
  .jd-temptation-hero,
  .jd-creation-hero,
  .adoption-certificates {
    order: 2;
    width: 100%;
    margin: .25rem 0 .5rem;
    transform: none;
  }
  .jd-registration__intro-copy,
  .jd-destruction__intro-copy,
  .jd-excavation__intro-copy,
  .jd-temptation-section .jd-station-intro > p,
  .jd-creation-intro > p,
  .adoption-intro-copy > p { order: 3; margin-top: 0; }

  /* Secondary sign follows the excavation explanation. */
  .jd-excavation__binny-sign { order: 4; margin-top: 1rem; }
  .jd-temptation-sublabel { order: 4; margin-top: .5rem; }

  /* Restore normal layout flow to the Adoption photo sequences. */
  .adoption-photo-section,
  .adoption-imagination-row,
  .adoption-imagination-copy,
  .adoption-home-row,
  .adoption-exit img { transform: none; }
  .adoption-photo-section { margin-top: 2.5rem; }
  .adoption-photos-row,
  .adoption-imagination-row,
  .adoption-home-row {
    margin-top: 1.5rem;
    gap: 1.25rem;
  }
  .adoption-photo-details { gap: 1.5rem; }
  .adoption-section .adoption-photo-3d-caption { margin-top: 0; }

  /* Washing instruction strip only belongs in the full desktop layout. */
  .jd-washing-instructions { display: none; }
  .jd-alongtheway-washing-icons { display: none; }
}

/* ============================================================
   COMPACT WIDTH POLISH — OVERVIEW GAP + HERO LOGO CENTERING
   Only 601–900px; does not alter finished phone/desktop views.
   ============================================================ */
@media screen and (min-width: 601px) and (max-width: 900px) {
  /* Center the standalone hero logo, independent of desktop left alignment. */
  .jd-case-hero__copy {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
  .jd-case-hero__logo {
    display: block;
    width: min(92%, 540px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  /* The overview collage uses a tall aspect-ratio box for its layered cards.
     Recover part of the empty space under the visible cards, without
     moving the artwork or disturbing the text below. */
  .jd-overview__copy {
    margin-top: clamp(-145px, -15vw, -90px);
    position: relative;
    z-index: 5;
  }
}


/* ============================================================
   EXCAVATION / BINNY COMPACT-WIDTH FIX — 601–900px
   Keep phone and desktop layouts unchanged.
   ============================================================ */
@media screen and (min-width: 601px) and (max-width: 900px) {
  /* The old desktop image sizing/translation can visually collide
     with the label when the station becomes a single column. */
  .jd-excavation__top {
    gap: 0.75rem;
  }
  .jd-excavation__label {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
  }
  .jd-excavation__environment {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    margin: 0 0 0.5rem;
    transform: none;
  }
  .jd-excavation__environment img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    transform: none;
  }
  .jd-excavation__intro-copy {
    margin: 0;
  }
  .jd-excavation__binny-sign {
    display: block;
    width: min(72%, 420px);
    max-width: 100%;
    height: auto;
    margin: 0.5rem auto 0;
    transform: none;
  }
  /* Avoid carrying the desktop offsets into the discovery/shared panels. */
  .jd-excavation__discovery {
    margin: 1.75rem 0 0;
    transform: none;
  }
  .jd-excavation__shared {
    margin-top: 1.75rem;
    transform: none;
  }
  .jd-excavation__bins {
    margin: 0 auto;
    transform: none;
  }
  .jd-excavation__shared-label {
    margin-top: 0;
  }
}

/* Intermediate desktop / 70% window typography */
@media screen and (min-width: 901px) and (max-width: 1400px) {
  .jd-overview p,
  .jd-registration p,
  .jd-destruction p,
  .jd-excavation p,
  .jd-temptation p,
  .jd-creation p,
  .jd-adoption p,
  .jd-alongtheway p {
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.45;
  }
}

@media screen and (min-width: 901px) and (max-width: 1400px) {
  /* Remove decorative tree where it crowds the text */
  .jd-creation-tree {
    display: none;
  }

  /* Keep Adoption's introductory text from crowding the next label */
  .adoption-intro {
    margin-bottom: 2rem;
  }
}


/* 70% WINDOW: scoped to intermediate desktop only; leave full desktop/mobile intact */
@media screen and (min-width:1251px) and (max-width:1400px) {
  .jd-overview__copy, .jd-journey__intro-copy, .jd-journey__flow-copy,
  .jd-registration__intro-copy, .jd-destruction__intro-copy,
  .jd-excavation__intro-copy, .jd-excavation__shared-copy,
  .jd-temptation-section .jd-station-intro p, .jd-creation-intro p,
  .jd-alongtheway-intro p, .adoption-section p {
    font-size:17px; line-height:1.32;
  }
  .jd-overview__inner { grid-template-columns:minmax(0,67%) minmax(0,33%); }
  .jd-overview__copy { max-width:none; margin-left:0; padding:0 2rem 0 .5rem; }
  .jd-overview__branch { width:clamp(410px,35vw,490px); top:-11%; }
  .jd-registration__top, .jd-registration__bottom,
  .jd-destruction__top, .jd-destruction__bottom {
    grid-template-columns:minmax(0,32%) minmax(0,68%); gap:1.25rem;
  }
  .jd-registration__top, .jd-destruction__top { align-items:start; }
  .jd-registration__intro, .jd-destruction__intro { padding-top:1rem; }
  .jd-registration__bottom, .jd-destruction__bottom { margin-top:1.25rem; }
  .jd-registration__guide, .jd-destruction__poster { transform:none; }
  .jd-destruction__safe { margin-top:0; }
  .jd-temptation-section .jd-station-top {
    grid-template-columns:minmax(0,33%) minmax(0,67%); gap:1rem;
  }
  .jd-temptation-section .jd-station-intro { padding:1rem 0 0; }
  .jd-temptation-hero { margin-left:0; transform:none; min-width:0; }
  .jd-temptation-hero img { width:100%; max-width:100%; }
  .jd-alongtheway-intro { width:32%; max-width:420px; margin-bottom:0; }
  .jd-alongtheway-upper { grid-template-columns:minmax(0,32%) minmax(0,64%); gap:4%; }
  .jd-alongtheway-bucket { padding-top:1rem; transform:none; }
  .jd-alongtheway-imagination { padding-top:0; transform:none; }
  .jd-alongtheway-binny-row { margin-top:2rem; }
  .adoption-intro { grid-template-columns:minmax(0,32%) minmax(0,68%); gap:1rem; margin-bottom:2rem; }
  .adoption-intro-copy { padding-top:1rem; }
  .adoption-certificates { transform:none; margin-top:1rem; }
  .adoption-friendship-row {
    grid-template-columns:minmax(0,34%) minmax(0,66%); gap:1.5rem; margin-top:1.5rem;
  }
  .adoption-friendship, .adoption-store-photo, .adoption-photo-section { transform:none; }
  .adoption-photo-section { margin-top:2.5rem; }
}
@media screen and (min-width:901px) and (max-width:1250px) {
  .jd-registration__guide, .jd-destruction__poster,
  .adoption-friendship, .adoption-store-photo, .adoption-photo-section { transform:none; }
  .jd-alongtheway-intro { margin-bottom:1.5rem; }
  .jd-temptation-hero { margin-left:auto; }
  .adoption-friendship-row, .adoption-intro { margin-bottom:2rem; }
}

/* Final intermediate-width art and section spacing refinements */
@media screen and (min-width: 1251px) and (max-width: 1400px) {
  /* Restore the overview branch's decorative presence without covering copy. */
  .jd-overview__branch {
    width: clamp(540px, 44vw, 650px);
    right: -30%;
    top: -17%;
  }

  /* Give the Destruction detail captions a clearer break before Excavation. */
  .jd-destruction { padding-bottom: 115px; }
  .jd-excavation { margin-top: -60px; }

  /* Smaller tree at intermediate desktop widths, clear of the intro copy. */
  .jd-creation-tree {
    display: block;
    width: 10%;
    max-width: 150px;
    top: 520px;
    left: 0;
  }
}

/* Keep the tree off compact windows and phones where it crowds the copy. */
@media screen and (max-width: 1250px) {
  .jd-creation-tree { display: none; }
}

/* INTERMEDIATE DESKTOP — 1251px to 1400px */
@media screen and (min-width: 1251px) and (max-width: 1400px) {

  /* OVERVIEW: Position branch relative to entire section */
  .jd-overview {
    position: relative;
  }

  .jd-overview__branch {
    position: absolute;
    width: clamp(450px, 38vw, 550px);
    top: -12%;
    right: 0;
    z-index: 4;
    pointer-events: none;
  }

  /* ALONG THE WAY: Restore normal grid positioning */
  .jd-alongtheway-upper {
    margin-top: 0;
    grid-template-columns: minmax(0, 32%) minmax(0, 64%);
    gap: 4%;
  }

  /* Avoid forcing extra vertical space inside bucket column */
  .jd-alongtheway-bucket {
    padding-top: 0;
  }

  /* Keep imagination station in normal document flow */
  .jd-alongtheway-imagination {
    transform: none;
    padding-top: 0;
  }

  /* Keep the lower section from overlapping */
  .jd-alongtheway-binny-row {
    margin-top: 0;
  }

  /* ADOPTION: Maintain the smaller gap */
  .adoption-imagination-row {
  }
}

/* Project Overview — medium browser widths only */
@media (min-width: 801px) and (max-width: 1250px) {

  .jd-overview__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .jd-overview__visual {
    width: 100%;
    max-width: 850px;
    flex: none;
  }

  .jd-overview__copy {
    display: block;
    position: relative;
    width: min(100%, 780px);
    max-width: 100%;
    flex: none;
    margin: 0 auto;
    padding: 0 1.5rem;
    transform: none;
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }
}
/* ============================================================
   FINAL COMPACT LAYOUT ORDER — 900px AND BELOW
   Keep wide-screen/two-column compositions unchanged.
   Each station reads: label -> main environment -> description.
   ============================================================ */
@media screen and (max-width: 900px) {
  .jd-registration__top,
  .jd-destruction__top,
  .jd-excavation__top,
  .jd-temptation-section .jd-station-top,
  .jd-creation-top,
  .adoption-intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .jd-registration__intro,
  .jd-destruction__intro,
  .jd-excavation__intro,
  .jd-temptation-section .jd-station-intro,
  .jd-creation-intro,
  .adoption-intro-copy {
    display: contents;
  }

  .jd-registration__label,
  .jd-destruction__label,
  .jd-excavation__label,
  .jd-temptation-section .jd-station-label,
  .jd-creation-label,
  .adoption-label {
    order: 1;
    margin-bottom: 0;
  }

  .jd-registration__environment,
  .jd-destruction__environment,
  .jd-excavation__environment,
  .jd-temptation-hero,
  .jd-creation-hero,
  .adoption-certificates {
    order: 2;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: .5rem 0 1rem;
    transform: none;
  }

  .jd-registration__intro-copy,
  .jd-destruction__intro-copy,
  .jd-excavation__intro-copy,
  .jd-temptation-section .jd-station-intro > p,
  .jd-creation-intro > p,
  .adoption-intro-copy > p {
    order: 3;
    position: relative;
    margin-top: 0;
  }

  .jd-excavation__binny-sign,
  .jd-temptation-sublabel,
  .adoption-carrier {
    order: 4;
  }

  .jd-excavation__environment img,
  .jd-temptation-hero img,
  .jd-creation-hero img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    transform: none;
  }

  .adoption-certificates {
    height: auto;
  }
}

/* ============================================================
   EXCAVATION READING ORDER — consolidated targeted correction
   1440px+ desktop art direction is intentionally untouched.
   ============================================================ */
@media screen and (max-width: 1250px) {
  /* At intermediate widths, the two-column Excavation layout made
     Binny's sign dominate the left column and separated the story. */
  .jd-excavation__top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .jd-excavation__intro { display: contents; }
  .jd-excavation__label {
    order: 1;
    display: block;
    width: min(75%, 470px);
    max-width: 100%;
    margin: 0 0 1rem;
    position: relative;
    transform: none;
  }
  .jd-excavation__environment {
    order: 2;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 1.25rem;
    transform: none;
  }
  .jd-excavation__environment img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    transform: none;
  }
  .jd-excavation__intro-copy {
    order: 3;
    width: 100%;
    max-width: 45rem;
    margin: 0;
    padding: 0;
    transform: none;
  }
  .jd-excavation__binny-sign {
    order: 4;
    display: block;
    width: min(76%, 440px);
    max-width: 100%;
    height: auto;
    margin: 2.5rem auto 3rem;
    transform: none;
    position: relative;
  }
  /* Discovery follows the completed introduction, not an offset
     derived from the old two-column desktop environment. */
  .jd-excavation__discovery {
    margin: 1.5rem 0 0;
    transform: none;
  }
}
@media screen and (max-width: 600px) {
  .jd-excavation__label { width: min(90%, 470px); }
  .jd-excavation__environment { margin: 0 0 1rem; }
  .jd-excavation__environment img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .jd-excavation__binny-sign {
    width: min(88%, 390px);
    margin-top: 2.75rem;
    margin-bottom: 3rem;
  }
}


/* MOBILE ONLY — overview gallery and Excavation right-edge bleed.
   Append after all existing case-study CSS rules. */
@media screen and (max-width: 600px) {
  /* Replace the miniature absolute-positioned desktop collage with
     three full-width, readable figures in the existing HTML order. */
  .jd-overview__visual {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    width: 100%;
    position: relative;
  }
  .jd-overview__cards {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem 1.25rem 1.75rem;
    z-index: 2;
  }
  .jd-overview__card,
  .jd-overview__card--concept,
  .jd-overview__card--spatial,
  .jd-overview__card--environment {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
    rotate: none;
  }
  .jd-overview__card img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .jd-overview__background {
    object-position: center top;
    transform: none;
    height: 100%;
  }
  .jd-overview__copy {
    position: relative;
    transform: none;
  }

  /* The section's inner wrapper has horizontal padding. Let ONLY the
     junkyard image break out of the right padding; keep label and text inset. */
  .jd-excavation__top {
    align-items: stretch;
  }
  .jd-excavation__environment {
    box-sizing: border-box;
    position: relative;
    align-self: stretch;
    width: calc(100% + 1.5rem);
    max-width: none;
    min-width: 0;
    margin: 0 -1.5rem 1rem 0;
    padding: 0;
    transform: none;
    overflow: visible;
  }
  .jd-excavation__environment img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
  }
}


/* FINAL MOBILE CORRECTION — append after previous responsive patches.
   Desktop/tablet unaffected. */
@media screen and (max-width: 600px) {
  /* Genuine document-flow gallery: no absolute collage layers. */
  .jd-overview__visual {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .jd-overview__cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 1rem 1.15rem;
    margin: 0;
    gap: 2rem;
  }
  .jd-overview__cards > .jd-overview__card {
    display: block;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    transform: none;
    rotate: none;
    float: none;
    flex: 0 0 auto;
  }
  .jd-overview__cards > .jd-overview__card > img {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    transform: none;
  }
  /* Old decorative collage background includes graphic elements that
     show through awkwardly once the figures are stacked. */
  .jd-overview__background { display: none; }
  .jd-overview__copy {
    position: static;
    margin: 0 auto;
    transform: none;
  }

  /* TRUE full-viewport bleed. Instead of guessing the right padding,
     make the image itself viewport-wide and pull it out of the 24px
     mobile inner padding. Its right edge now lands on the viewport edge. */
  .jd-excavation__environment {
    position: relative;
    display: block;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 100vw;
    max-width: none;
    min-width: 0;
    margin: 0 0 1.25rem -1.5rem;
    padding: 0;
    left: auto;
    right: auto;
    transform: none;
    overflow: visible;
  }
  .jd-excavation__environment > img {
    display: block;
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    object-fit: contain;
  }
}
/* MOBILE V3 — Overview breathing room and Excavation edge without horizontal scroll.
   Append after the previous mobile patches. */
@media screen and (max-width: 600px) {
  /* Leave a clear pause after the hero/walkthrough; keep the branch
     as the visual transition into Project Overview. */
  .jd-overview {
    margin-top: 3rem;
  }
  .jd-overview__cards {
    padding-top: 2.75rem;
  }

  /* Structural edge-to-edge layout: remove padding from the actual
     parent instead of making a child wider than its parent/viewport. */
  .jd-excavation__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1920px;
    padding-left: 0;
    padding-right: 0;
  }
  .jd-excavation__top {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
  }
  .jd-excavation__label,
  .jd-excavation__intro-copy,
  .jd-excavation__binny-sign {
    box-sizing: border-box;
    max-width: calc(100% - 2.5rem);
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .jd-excavation__label {
    width: min(90%, 470px);
  }
  .jd-excavation__intro-copy {
    width: auto;
  }
  .jd-excavation__binny-sign {
    width: min(88%, 390px);
    margin-top: 2.75rem;
    margin-bottom: 3rem;
  }
  .jd-excavation__environment {
    box-sizing: border-box;
    position: relative;
    order: 2;
    display: block;
    flex: 0 0 auto;
    align-self: stretch;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 1.25rem;
    padding: 0;
    transform: none;
    overflow: hidden;
  }
  .jd-excavation__environment > img {
    box-sizing: border-box;
    display: block;
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    transform: translateX(10px);
    object-fit: contain;
  }
  /* Restore standard reading gutters to the content below the artwork. */
  .jd-excavation__discovery,
  .jd-excavation__shared {
    box-sizing: border-box;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
/* LAPTOP / MEDIUM DESKTOP REFINEMENT — 901–1250px
   Keep <=900px mobile/tablet treatment unchanged. */
@media screen and (min-width: 901px) and (max-width: 1250px) {
  /* Overview: return the collage and copy to one horizontal composition. */
  .jd-overview__inner {
    display: grid;
    grid-template-columns: minmax(0, 67%) minmax(0, 33%);
    align-items: center;
    gap: 0;
    min-height: 0;
  }
  .jd-overview__visual { width: 100%; max-width: none; margin: 0; }
  .jd-overview__copy {
    display: block;
    width: 100%; max-width: none;
    padding: 1rem clamp(1rem, 2vw, 2rem) 1rem .5rem;
    margin: 0;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.35;
  }
  .jd-overview__branch { width: min(38%, 380px); }

  /* Preserve compact side-by-side station introductions. */
  .jd-registration__top, .jd-destruction__top,
  .jd-excavation__top, .jd-temptation-section .jd-station-top,
  .jd-creation-top, .adoption-intro {
    display: grid;
    grid-template-columns: minmax(0, 32%) minmax(0, 68%);
    align-items: start;
    gap: 0;
  }
  .jd-registration__intro, .jd-destruction__intro,
  .jd-excavation__intro { display: block; min-width: 0; }
  .jd-registration__environment, .jd-destruction__environment,
  .jd-excavation__environment { width: 100%; max-width: none; min-width: 0; margin: 0; }
  .jd-excavation__environment img { width: 100%; max-width: 100%; margin: 0; }
  .jd-excavation__label { width: 100%; margin: 0 0 1rem; }
  .jd-excavation__intro-copy { width: 100%; max-width: none; margin: 0; }
  .jd-excavation__binny-sign {
    width: min(100%, 370px);
    max-width: 100%;
    margin: 1.5rem 0 0;
  }
  .jd-excavation__discovery { margin-top: 2rem; }
  .jd-registration__bottom, .jd-destruction__bottom {
    display: grid;
    grid-template-columns: minmax(0, 32%) minmax(0, 68%);
    gap: 0;
    align-items: start;
    margin-top: 2rem;
  }
  .jd-registration__guide, .jd-destruction__poster { width: 100%; margin: 0; }
  .jd-registration__journey, .jd-destruction__safe { width: 100%; margin-top: 0; }
  .jd-temptation-section .jd-station-intro,
  .jd-creation-intro, .adoption-intro-copy {
    width: 100%; max-width: none; min-width: 0;
    padding: 1rem 1.25rem 0 0;
    margin: 0;
  }
  .jd-temptation-hero, .jd-creation-hero,
  .adoption-certificates { width: 100%; max-width: none; margin: 0; }

  /* Along the Way: maintain a two-column visual rhythm on laptops. */
  .jd-alongtheway-upper {
    display: grid;
    grid-template-columns: minmax(0, 32%) minmax(0, 64%);
    gap: 4%;
    align-items: start;
    margin-top: 1.5rem;
  }
  .jd-alongtheway-bucket, .jd-alongtheway-imagination {
    padding-top: 0; transform: none;
  }
  .jd-alongtheway-binny-row, .jd-alongtheway-washing-row {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 48%);
    gap: 4%;
    align-items: center;
  }
  .jd-alongtheway-binny-image img,
  .jd-alongtheway-washing-image img { width: 100%; }

  /* Text stays readable without inflating the entire section. */
  .jd-registration__intro-copy, .jd-destruction__intro-copy,
  .jd-excavation__intro-copy, .jd-excavation__shared-copy,
  .jd-temptation-section .jd-station-intro p,
  .jd-creation-intro p, .adoption-section p {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.35;
  }
}
/* Laptop layout containment pass: affects only 901–1250px. */
@media screen and (min-width:901px) and (max-width:1250px) {
  /* Keep columns within their parents instead of spilling sideways. */
  .jd-overview__inner, .jd-registration__top, .jd-registration__bottom,
  .jd-destruction__top, .jd-destruction__bottom, .jd-excavation__top,
  .jd-alongtheway-upper, .jd-closing-inner { box-sizing:border-box; width:100%; max-width:100%; }
  .jd-overview__inner > *, .jd-registration__top > *, .jd-registration__bottom > *,
  .jd-destruction__top > *, .jd-destruction__bottom > *,
  .jd-excavation__top > *, .jd-alongtheway-upper > *,
  .jd-closing-inner > * { min-width:0; box-sizing:border-box; }

  /* The branch is a decorative corner piece, not a text overlay. */
  .jd-overview__branch { top:-23%; }
  .jd-overview__inner { grid-template-columns:minmax(0,65%) minmax(0,35%); }
  .jd-overview__copy { position:relative; z-index:5; padding:1.5rem 1.5rem 1.5rem .75rem; }

  /* Station grids: allocate space for their gaps rather than 32% + 68% + gap. */
  .jd-registration__top, .jd-registration__bottom,
  .jd-destruction__top, .jd-destruction__bottom {
    grid-template-columns:minmax(0,30fr) minmax(0,70fr);
    gap:clamp(12px,1.5vw,22px);
  }
  .jd-registration__journey-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(12px,1.5vw,20px); }
  .jd-registration__journey-grid > *, .jd-registration__journey-grid img { min-width:0; max-width:100%; }

  /* Excavation: preserve the broad junkyard, with a real bounded grid. */
  .jd-excavation__top { grid-template-columns:minmax(0,32fr) minmax(0,68fr); gap:0; }
  .jd-excavation__environment { min-width:0; overflow:visible; }
  .jd-excavation__environment > img { display:block; width:100%; max-width:100%; height:auto;
        transform: translatey(-50px); }

  /* Photo booth needs a readable companion column. */
  .jd-alongtheway-upper { grid-template-columns:minmax(0,58fr) minmax(0,42fr); gap:clamp(16px,2vw,28px); }
  .jd-alongtheway-upper img { display:block; max-width:100%; height:auto; }
  .jd-alongtheway-upper p { max-width:100%; }
  .jd-washing-instructions {
    
    max-width: 75px;
  }
  .adoption-imagination-row {
        display: inline;
  }
  .adoption-imagination-copy {
    
    transform: translateY(-30px);
  }

  /* Wider closing copy; less vertical wrapping. */
  .jd-closing { padding-left:clamp(24px,4vw,55px); padding-right:clamp(24px,4vw,55px); }
  .jd-closing-inner { grid-template-columns:minmax(0,43fr) minmax(0,57fr); gap:0; }
  .jd-closing-copy { padding-left:0; padding-right:clamp(12px,2vw,24px); }
  .jd-closing-text { max-width:none; }
  .jd-closing-art { margin-left:0; min-width:0; }
  .jd-closing-art img { width:100%; max-width:100%; height:auto; }
}


/* =============================================================
   LAPTOP FINISHING PASS — 901–1250px
   Based on user's latest edited stylesheet (including photo booth).
   No changes to full desktop or <=900px layouts.
   ============================================================= */
@media screen and (min-width:901px) and (max-width:1250px) {
  /* Journey: two concise chapters instead of three tall columns. */
  .jd-journey { padding: 20px 0 55px; }
  .jd-journey__inner {
    display:grid;
    grid-template-columns:minmax(0, 45fr) minmax(0, 55fr);
    grid-template-areas: "intro stations" "flow flow";
    align-items:center;
    gap:24px 20px;
    min-height:0;
    padding:0 clamp(28px,4vw,56px);
    box-sizing:border-box;
  }
  .jd-journey__intro { grid-area:intro; padding:0; align-self:center; min-width:0; }
  .jd-journey__intro-copy { max-width:36rem; font-size:18px; line-height:1.35; }
  .jd-journey__intro-copy p { margin-bottom:.6em; }
  .jd-journey__title { width:min(100%,430px); margin-bottom:18px; }
  .jd-journey__imagination {
    width:min(100%,430px); max-width:100%;
    margin:24px 0 0 -16px;
    transform:translatex(-28px);
  }
  .jd-journey__stations { grid-area:stations; align-self:center; width:100%; }
  .jd-journey__stations img {
    width:min(100%,460px); max-height:640px;
    transform:none; object-fit:contain;
  }
  .jd-journey__flow {
    grid-area:flow;
    display:grid;
    grid-template-columns:minmax(0, 44fr) minmax(0, 56fr);
    grid-template-rows:auto 1fr;
    gap:10px 34px;
    align-items:start;
    width:100%; padding:28px 0 0;
    border-top:1px solid #e9e5e1;
    box-sizing:border-box;
  }
  .jd-journey__flow-title { grid-column:1; grid-row:1; width:min(100%,320px); margin:0; }
  .jd-journey__flow-copy { grid-column:1; grid-row:2; max-width:100%; font-size:18px; line-height:1.35; }
  .jd-journey__flow-copy p { margin:0 0 .9em; }
  .jd-journey__principles { grid-column:2; grid-row:1 / 3; width:100%; max-width:620px; margin:0; align-self:center; }

  /* Keep Binny's cart close to its explanation and the next station. */
  .jd-alongtheway-binny-row {
    width:100%; max-width:1100px;
    grid-template-columns:minmax(0,56fr) minmax(0,44fr);
    gap:clamp(20px,3vw,42px);
    margin:12px auto 10px;
    align-items:center;
  }
  .jd-alongtheway-binny-image { min-width:0; }
  .jd-alongtheway-binny-image img { width:100%; max-width:100%; transform:none; }
  .jd-alongtheway-binny-copy { transform:none; width:100%; min-width:0; }
  .jd-alongtheway-binny-copy p { font-size:18px; line-height:1.35; }

  /* Creation: bring the decorative tree back, modestly, in the open
     left-side area below the introduction rather than over the copy. */
  .jd-creation-section { position:relative; }

  .jd-creation-top, .jd-creation-details { position:relative; z-index:1; }

  /* Along the Way: the bucket is a supporting detail; the gallery
     should read as the dominant visual on the right. */
  .jd-alongtheway-upper {
    grid-template-columns:minmax(0,43fr) minmax(0,57fr);
    gap:clamp(20px,2.5vw,36px);
    align-items:start;
  }
  .jd-alongtheway-bucket, .jd-alongtheway-imagination { min-width:0; width:100%; }
  .jd-alongtheway-bucket img { display:block; width:min(100%,390px); height:auto; margin:0 auto; }
  .jd-alongtheway-imagination img { display:block; width:100%; max-width:100%; height:auto; }
  .jd-alongtheway-upper p { font-size:18px; line-height:1.35; }

  /* Washing: station is the hero; instructions sit under the copy,
     not in a tall isolated strip. */
  .jd-alongtheway-washing-row {
    width:100%; max-width:1200px;
    display:grid;
    grid-template-columns:minmax(0,62fr) minmax(0,38fr);
    gap:clamp(14px,2vw,30px);
    align-items:center;
    margin:28px auto 0;
  }
  .jd-alongtheway-washing-image { min-width:0; }
  .jd-alongtheway-washing-image img {
    display:block; width:100%; max-width:100%; height:auto;
    transform:none;
  }
  .jd-alongtheway-washing-copy {
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:center; min-width:0; width:100%; transform:none;
  }
  .jd-alongtheway-washing-copy p {
    width:100%; max-width:100%; font-size:18px; line-height:1.35;
  }
  .jd-washing-instructions {
    display:block; width:clamp(80px,9vw,118px); max-width:118px;
    height:auto; margin:18px 0 0 12px; transform:none;
  }
  .jd-alongtheway-washing-icons { transform:none; margin:12px 0 0; }
}


/* Keep Discovery below the environment and Shared Use below both columns.
   Real grid rows adapt to the height of Binny's sign and wrapping text. */
@media screen and (min-width: 901px) and (max-width: 1250px) {
  .jd-excavation__inner {
    display: grid;
    grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
    gap: 24px 0;
  }

  .jd-excavation__top {
    display: contents;
  }

  .jd-excavation__intro {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .jd-excavation__environment {
    grid-column: 2;
    grid-row: 1;
    /* Match the image's 50px upward shift so it leaves no empty row space. */
    margin-bottom: -50px;
  }

  .jd-excavation__discovery {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    position: relative;
    z-index: 2;
  }

  .jd-excavation__shared {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
  }
}

/* Keep edge artwork attached to the page, including beyond the 1920px
   content cap. Container units exclude the vertical scrollbar width. */
.jd-journey,
.jd-excavation {
  container-type: inline-size;
}

.jd-overview__branch {
  right: 0;
  margin-right: 0;
}

/* Lift the hanging rope clear of the copy as the overview columns narrow.
   Ease the offset away above 970px to avoid a jump at that width. */
@media screen and (min-width: 901px) and (max-width: 1040px) {
  .jd-overview__branch {
    transform: translateY(clamp(-40px, calc((100vw - 1040px) * 0.4), 0px));
  }
}

.jd-journey__imagination {
  margin-left: calc(-1 * (max(0px, (100cqw - 1920px) / 2) + clamp(2rem, 4vw, 5rem)));
  transform: none;
}

.jd-excavation__environment > img {
  position: relative;
  left: calc(100% + max(0px, (100cqw - 1920px) / 2) + clamp(2rem, 4vw, 5rem));
  margin-left: 0;
  margin-right: 0;
  transform: translate(-100%, -40px);
}

@media screen and (max-width: 1250px) {
  .jd-journey__imagination {
    margin-left: calc(-1 * clamp(28px, 4vw, 56px));
  }

  .jd-excavation__environment > img {
    left: calc(100% + clamp(2rem, 4vw, 5rem));
    transform: translate(-100%, -50px);
  }
}

@media screen and (max-width: 1100px) {
  .jd-excavation__environment > img {
    left: 100%;
  }
}

/* Restore the regular reading gutters; only the environment art bleeds out. */
@media screen and (min-width: 900px) and (max-width: 1100px) {
  .jd-excavation__inner {
    padding-inline: clamp(2rem, 4vw, 5rem);
  }

  .jd-excavation__environment > img {
    left: calc(100% + clamp(2rem, 4vw, 5rem));
  }
}

@media screen and (max-width: 900px) {
  .jd-journey__imagination {
    margin-left: calc(-1 * clamp(1.25rem, 4vw, 3rem));
  }

  .jd-excavation__environment > img {
    transform: translateX(-100%);
  }
}

/* Phones: use the full-width parent directly, without desktop edge offsets. */
@media screen and (max-width: 600px) {
  .jd-excavation__inner,
  .jd-excavation__top,
  .jd-excavation__environment {
    width: 100%;
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
  }

  .jd-excavation__environment > img {
    position: static;
    left: auto;
    right: auto;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
  }
}