/* ============================================================
   Digital Experts - case studies in the home design system
   2026.10.06. Scoped to main.dx.dx-cs (pages also carry dx-pf, so
   the platform components apply). Copy on these pages is the real
   proof and is unchanged; only the layout moved to the new system.
   ============================================================ */

/* Hero: longer case-study headlines sit on a smaller scale. */
.dx-cs .dx-cs-hero .dx-hero-title { font-size: clamp(36px, 4.6vw, 68px); max-width: 20ch; }
.dx-cs .dx-cs-hero .dx-hero-kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.dx-cs .de-bg-video { z-index: 0; }

/* Stats row (BMRG hero) */
.dx-cs .dx-cs-stats {
  list-style: none;
  margin: var(--dx-gap-m) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.dx-cs .dx-cs-stats li { border-top: 1px solid var(--dx-cream-line); padding-top: 16px; }
.dx-cs .dx-cs-stats b {
  display: block;
  font-family: var(--dx-wide);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1;
  color: var(--dx-mustard);
  margin-bottom: 8px;
}
.dx-cs .dx-cs-stats span { font-family: var(--dx-sans); font-size: 14px; color: var(--dx-cream-70); }
.dx-cs .dx-cs-note { margin-top: 14px; color: rgba(237, 228, 211, 0.5); }

/* Lead paragraph under a head */
.dx-cs .dx-cs-lead {
  margin: calc(var(--dx-gap-l) * -0.5) 0 var(--dx-gap-l) calc((100% + 24px) / 12 * 4);
  font-size: var(--dx-t-lead);
  max-width: 52ch;
}
.dx-cs .dx-white .dx-cs-lead { color: var(--dx-ink-78); }
.dx-cs .dx-pf-cream .dx-cs-lead { color: rgba(29, 42, 34, 0.78); }
.dx-cs .dx-forest .dx-cs-lead,
.dx-cs .dx-burgundy .dx-cs-lead,
.dx-cs .dx-image .dx-cs-lead { color: var(--dx-cream-70); }

/* Head colours on white and forest */
.dx-cs .dx-white .dx-head .dx-label { color: var(--dx-green); }
.dx-cs .dx-white .dx-statement .dx-reply { color: var(--dx-orange); }
.dx-cs .dx-forest .dx-head .dx-label,
.dx-cs .dx-image .dx-head .dx-label { color: var(--dx-mustard); }
.dx-cs .dx-forest .dx-statement .dx-reply { color: var(--dx-lavender); }
.dx-cs .dx-image .dx-statement .dx-reply { color: var(--dx-mustard); }

/* Illustrative message cards */
.dx-cs .dx-cs-caption { margin: 0 0 18px; }
.dx-cs .dx-white .dx-cs-caption { color: var(--dx-green); }
.dx-cs .dx-pf-cream .dx-cs-caption { color: var(--dx-green); }

.dx-cs .dx-cs-msgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.dx-cs .dx-cs-msgs li { border-top: 1px solid currentColor; padding: 18px 0 8px; }
.dx-cs .dx-cs-msgs .dx-label { opacity: 0.7; margin-bottom: 10px; }
.dx-cs .dx-cs-msgs blockquote {
  margin: 0;
  font-family: var(--dx-sans);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  max-width: 34ch;
}

/* Photo strip */
.dx-cs .dx-cs-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--dx-gap-l);
}
.dx-cs .dx-cs-photos > div { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.dx-cs .dx-cs-photos-cap { margin-top: 14px; opacity: 0.7; }

/* Feature rows: image and copy on the 12-column grid */
.dx-cs .dx-cs-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: var(--dx-gap-m);
  align-items: center;
  padding: var(--dx-gap-l) 0;
  border-top: 1px solid rgba(21, 48, 31, 0.16);
}
.dx-cs .dx-cs-row:first-of-type { border-top: 0; padding-top: 0; }
.dx-cs .dx-cs-row:last-child { padding-bottom: 0; }
.dx-cs .dx-cs-media { grid-column: 1 / span 6; aspect-ratio: 5 / 4; background-size: cover; background-position: center; }
.dx-cs .dx-cs-copy { grid-column: 8 / -1; }
.dx-cs .dx-cs-row.is-flip .dx-cs-media { grid-column: 7 / -1; order: 2; }
.dx-cs .dx-cs-row.is-flip .dx-cs-copy { grid-column: 1 / span 5; order: 1; }
.dx-cs .dx-cs-copy .dx-label { color: var(--dx-orange); margin-bottom: 14px; }
.dx-cs .dx-cs-copy h3 {
  font-family: var(--dx-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
}
.dx-cs .dx-cs-copy h3 span { color: var(--dx-green); }
.dx-cs .dx-cs-copy > p { font-family: var(--dx-sans); font-size: var(--dx-t-body); line-height: 1.55; margin: 0 0 12px; opacity: 0.85; }
.dx-cs .dx-cs-copy .dx-pf-ticks li { font-size: 15px; }
.dx-cs .dx-cs-copy .dx-pf-ticks strong { font-weight: 600; }

/* Mosaic */
.dx-cs .dx-cs-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(180px, 18vw, 260px));
  gap: 16px;
}
.dx-cs .dx-cs-tile {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  isolation: isolate;
}
.dx-cs .dx-cs-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 10, 8, 0) 50%, rgba(14, 10, 8, 0.7) 100%);
}
.dx-cs .dx-cs-tile.is-hero { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.dx-cs .dx-cs-tile .dx-label { color: var(--dx-cream); }

/* Numbered grids on dark and image grounds */
.dx-cs .dx-burgundy .dx-pf-grid li,
.dx-cs .dx-forest .dx-pf-grid li,
.dx-cs .dx-image .dx-pf-grid li { border-top-color: var(--dx-cream-line); }
.dx-cs .dx-burgundy .dx-pf-grid .dx-num,
.dx-cs .dx-forest .dx-pf-grid .dx-num,
.dx-cs .dx-image .dx-pf-grid .dx-num { color: var(--dx-mustard); }
.dx-cs .dx-burgundy .dx-pf-grid p,
.dx-cs .dx-forest .dx-pf-grid p,
.dx-cs .dx-image .dx-pf-grid p { color: var(--dx-cream-70); }
.dx-cs .dx-white .dx-pf-grid li { border-top-color: var(--dx-burgundy); }
.dx-cs .dx-white .dx-pf-grid .dx-num { color: var(--dx-orange); }
.dx-cs .dx-white .dx-pf-grid p { color: var(--dx-ink-78); }
.dx-cs .dx-pf-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-cs .dx-cs-foot-note { margin-top: var(--dx-gap-m); color: rgba(237, 228, 211, 0.5); }

/* Wide image and films */
.dx-cs .dx-cs-wide { aspect-ratio: 21 / 9; background-size: cover; background-position: center; margin-bottom: var(--dx-gap-l); }
.dx-cs .dx-cs-film { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.dx-cs .dx-cs-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dx-cs .dx-cs-verticals { display: flex; gap: clamp(24px, 5vw, 64px); justify-content: center; flex-wrap: wrap; }
.dx-cs .dx-cs-vertical {
  position: relative;
  width: min(288px, 76vw);
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(237, 228, 211, 0.7);
}
.dx-cs .dx-cs-vertical iframe { position: absolute; top: 50%; left: 50%; width: 124%; height: 124%; transform: translate(-50%, -50%); border: 0; }
.dx-cs .dx-cs-verticals-cap { text-align: center; margin-top: var(--dx-gap-m); color: rgba(237, 228, 211, 0.55); }

/* Two illustrative chats side by side */
.dx-cs .dx-cs-chats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.dx-cs .dx-cs-chats .dx-pf-chat { grid-column: auto; }
.dx-cs .dx-cs-chat-note {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(21, 48, 31, 0.1);
  font-family: var(--dx-sans);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(29, 42, 34, 0.6);
}

/* Short statement section */
.dx-cs .dx-cs-say { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--dx-gap-m); }
.dx-cs .dx-cs-say .dx-label { grid-column: 1 / span 4; color: var(--dx-mustard); padding-top: 10px; }
.dx-cs .dx-cs-say .dx-statement { grid-column: 5 / -1; max-width: 22ch; }
.dx-cs .dx-cs-say .dx-statement .dx-reply { color: var(--dx-lavender); }
.dx-cs .dx-cs-say .dx-body { grid-column: 5 / span 7; max-width: 58ch; color: var(--dx-cream-70); font-size: var(--dx-t-lead); }

/* Quote on a photo */
.dx-cs .dx-cs-quote { min-height: clamp(520px, 72vh, 680px); display: flex; align-items: flex-end; }
.dx-cs .dx-cs-quote .dx-inner { width: 100%; }
.dx-cs .dx-cs-quote .dx-voice-mark { color: var(--dx-mustard); }
.dx-cs .dx-cs-quote blockquote {
  margin: 0;
  font-family: var(--dx-sans);
  font-weight: 500;
  font-size: var(--dx-t-statement);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 30ch;
}
.dx-cs .dx-cs-quote figure { margin: 0; }
.dx-cs .dx-cs-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: var(--dx-gap-m); color: var(--dx-mustard); }
.dx-cs .dx-cs-quote figcaption::before { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; }

/* Next story link */
.dx-cs .dx-cs-next { margin-top: var(--dx-gap-l); padding-top: 24px; border-top: 1px solid var(--dx-ink-line); }
.dx-cs .dx-cs-next .dx-link { color: var(--dx-green); }
.dx-cs .dx-image .dx-cs-next { border-top-color: var(--dx-cream-line); }
.dx-cs .dx-image .dx-cs-next .dx-link { color: var(--dx-cream); }

/* Index: two story cards */
.dx-cs .dx-cs-stories { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; list-style: none; margin: 0; padding: 0; }
.dx-cs .dx-cs-stories .dx-card { aspect-ratio: 4 / 5; padding: 32px; }
.dx-cs .dx-cs-stories .dx-card h3 {
  margin: auto 0 12px;
  font-family: var(--dx-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 22ch;
}
.dx-cs .dx-cs-stories .dx-card h3 span { color: var(--dx-mustard); }
.dx-cs .dx-cs-stories .dx-card p { font-family: var(--dx-sans); font-size: 15px; line-height: 1.5; color: var(--dx-cream-70); margin: 0; max-width: 46ch; }

/* Close: body copy in the foot */
.dx-cs .dx-close-foot .dx-body { color: var(--dx-cream-70); max-width: 48ch; font-size: var(--dx-t-body); }

@media (max-width: 900px) {
  .dx-cs .dx-cs-stats { grid-template-columns: 1fr 1fr; }
  .dx-cs .dx-cs-lead { margin-left: 0; margin-top: 0; }
  .dx-cs .dx-cs-msgs,
  .dx-cs .dx-cs-chats,
  .dx-cs .dx-cs-stories { grid-template-columns: 1fr; }
  .dx-cs .dx-cs-media,
  .dx-cs .dx-cs-copy,
  .dx-cs .dx-cs-row.is-flip .dx-cs-media,
  .dx-cs .dx-cs-row.is-flip .dx-cs-copy,
  .dx-cs .dx-cs-say .dx-label,
  .dx-cs .dx-cs-say .dx-statement,
  .dx-cs .dx-cs-say .dx-body { grid-column: 1 / -1; order: 0; }
  .dx-cs .dx-cs-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 200px; }
  .dx-cs .dx-cs-tile.is-hero { grid-column: 1 / -1; grid-row: auto; }
  .dx-cs .dx-pf-grid.is-3 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dx-cs .dx-cs-photos { grid-template-columns: 1fr; }
  .dx-cs .dx-cs-photos > div:nth-child(n+2) { display: none; }
}

/* v b: darker overlay over hero video; wider labels on story cards */
.dx-cs .dx-cs-hero::after { background: linear-gradient(180deg, rgba(14, 10, 8, 0.72) 0%, rgba(14, 10, 8, 0.6) 45%, rgba(14, 10, 8, 0.88) 100%); }
.dx-cs .dx-cs-stories .dx-card-name { max-width: 40ch; }