/* /case-study/dice-game-development-case-study-diceplay-studios — AISHTMLNEWDESIGN-505
   Page-owned styles. EVERY selector is scoped to #page-case-study-dice-game-development-case-study-diceplay-studios or a
   csdg- prefixed class: this sheet must never style body, a bare
   element, #ais-header or #ais-footer. The document reset
   (html,body{margin:0}) is owned by the shared layout sheet.
   Font is Inter; no body/UI text below 16px.

   SIX FACES — the page is indexed by real dice faces. Every ordinal on it
   is a 3x3 CSS pip grid rather than a numeral: six faces for the contents,
   five for the challenges, four for the results board. One pip per face is
   struck in vermilion so the faces read as rolled rather than printed.
   Graphite table ground for hero / results / quote, bone-white for the
   record sections, hairline scoring instead of cards. No @keyframes exist
   in this file; motion is limited to hover/focus/active (rule 26). */

#page-case-study-dice-game-development-case-study-diceplay-studios {
  --csdg-graphite: #171a1f;    /* table ground - hero, results, quote     */
  --csdg-graphite-2: #21262e;  /* gradient stop                           */
  --csdg-graphite-3: #2b323c;  /* pip / chip ground                       */
  --csdg-bone: #fbfaf7;        /* bone white - record sections            */
  --csdg-bone-2: #f2efe9;      /* deeper bone - alternating bands         */
  --csdg-crumb-b: #f6f4ef;     /* breadcrumb strip                        */
  --csdg-hot: #d8452b;         /* vermilion - pips + rules (never text)   */
  --csdg-hot-btn: #c73b22;     /* vermilion button ground (5.15:1 on #fff)*/
  --csdg-hot-ink: #a8301a;     /* vermilion text on bone   (6.6:1)        */
  --csdg-hot-lt: #ef6a4f;      /* vermilion text on graphite (5.9:1)      */
  --csdg-text: #14171c;        /* near-black on bone                      */
  --csdg-text-2: #3a414b;      /* secondary on bone      (10.0:1)         */
  --csdg-text-3: #262c35;      /* prose on bone                           */
  --csdg-light: #f6f4f0;       /* warm white on graphite                  */
  --csdg-light-2: #c3c9d2;     /* secondary on graphite  (10.8:1)         */
  --csdg-line: #e4e0d8;        /* hairline on bone                        */
  --csdg-line-2: #dbd6cc;      /* hairline on bone-2                      */
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--csdg-text-3);
  display: block;
}

/* Scoped border-box reset. Without it the padded full-bleed sections
   resolve to viewport+48px under content-box and the document scrolls
   sideways, leaving an unpainted gutter down the right of every band.
   Same rule every sibling case-study sheet carries. */
#page-case-study-dice-game-development-case-study-diceplay-studios *,
#page-case-study-dice-game-development-case-study-diceplay-studios *::before,
#page-case-study-dice-game-development-case-study-diceplay-studios *::after { box-sizing: border-box; }

/* ---- shared page primitives ------------------------------------------ */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-wrap {
  max-width: 1160px;
  margin-inline: auto;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-wrap--read { max-width: 780px; }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-sec {
  padding: clamp(64px, 7vw, 104px) 24px;
  /* The shared site header is position:sticky, top:0, 77px tall. Without
     this a contents jump parks the section heading UNDER the header and
     the link reads as broken. This sheet may not style html, so it cannot
     set scroll-padding-top on the scroller; scroll-margin on each target
     is the scoped equivalent. */
  scroll-margin-top: 96px;
}
/* The landed section announces itself, so a jump visibly "opens" that
   section instead of silently moving the page. :target persists, which is
   the point - it marks where you are. */
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-sec:target { box-shadow: inset 0 3px 0 0 var(--csdg-hot); }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-sec--bone { background: var(--csdg-bone); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-sec--bone2 { background: var(--csdg-bone-2); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-sec--graphite {
  background: linear-gradient(166deg, var(--csdg-graphite) 0%, var(--csdg-graphite-2) 100%); /* static */
}

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--csdg-text);
  margin: 0 0 28px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-h2--light { color: var(--csdg-light); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-h2--centre { text-align: center; }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--csdg-hot-ink);
  margin: 0 0 10px;
  text-align: center;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-body {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--csdg-text-2);
  margin: 0;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-prose {
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--csdg-text-3);
  margin: 0;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-link {
  color: var(--csdg-hot-ink);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 130ms ease;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-link:hover { color: var(--csdg-text); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-link:focus-visible {
  outline: 3px solid var(--csdg-hot);
  outline-offset: 2px;
}

/* vermilion scoring rule above the reading sections' headings */
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-about .csdg-h2::before,
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-chal .csdg-h2::before,
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-map .csdg-h2::before,
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-why .csdg-h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--csdg-hot);
  margin-bottom: 18px;
}

/* ---- the dice face ---------------------------------------------------- */

/* A face is a 3x3 grid; each pip is explicitly placed by its position in
   the markup, so face--n carries exactly n pips in the canonical layout.
   Decorative only: every face is aria-hidden, and the ordinal it conveys
   is already carried by the <ol> it sits in. */
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 6px;
  background: #ffffff;
  border: 1.5px solid var(--csdg-line);
  border-radius: 8px;
  box-shadow: 0 1px 0 0 rgba(20, 23, 28, 0.06);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--csdg-graphite-3);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-pip--hot { background: var(--csdg-hot); }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--lg { width: 48px; height: 48px; padding: 7px; border-radius: 10px; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--lg .csdg-pip { width: 8px; height: 8px; }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--dark {
  width: 30px;
  height: 30px;
  padding: 4px;
  background: var(--csdg-graphite-3);
  border-color: #39424e;
  box-shadow: none;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--dark .csdg-pip { width: 5px; height: 5px; background: #e8e4dc; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--dark .csdg-pip--hot { background: var(--csdg-hot-lt); }

/* canonical pip layouts */
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--1 .csdg-pip:nth-child(1) { grid-area: 2 / 2; }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--2 .csdg-pip:nth-child(1) { grid-area: 1 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--2 .csdg-pip:nth-child(2) { grid-area: 3 / 3; }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--3 .csdg-pip:nth-child(1) { grid-area: 1 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--3 .csdg-pip:nth-child(2) { grid-area: 2 / 2; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--3 .csdg-pip:nth-child(3) { grid-area: 3 / 3; }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--4 .csdg-pip:nth-child(1) { grid-area: 1 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--4 .csdg-pip:nth-child(2) { grid-area: 1 / 3; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--4 .csdg-pip:nth-child(3) { grid-area: 3 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--4 .csdg-pip:nth-child(4) { grid-area: 3 / 3; }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--5 .csdg-pip:nth-child(1) { grid-area: 1 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--5 .csdg-pip:nth-child(2) { grid-area: 1 / 3; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--5 .csdg-pip:nth-child(3) { grid-area: 2 / 2; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--5 .csdg-pip:nth-child(4) { grid-area: 3 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--5 .csdg-pip:nth-child(5) { grid-area: 3 / 3; }

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--6 .csdg-pip:nth-child(1) { grid-area: 1 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--6 .csdg-pip:nth-child(2) { grid-area: 2 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--6 .csdg-pip:nth-child(3) { grid-area: 3 / 1; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--6 .csdg-pip:nth-child(4) { grid-area: 1 / 3; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--6 .csdg-pip:nth-child(5) { grid-area: 2 / 3; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-face--6 .csdg-pip:nth-child(6) { grid-area: 3 / 3; }

/* ---- buttons ---------------------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn {
  display: inline-block;
  min-height: 48px;
  padding: 13px 30px;
  border: 2px solid transparent;
  border-radius: 5px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn--hot {
  background: var(--csdg-hot-btn);
  color: #ffffff;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn--hot:hover { background: #b23219; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn--hot:active { transform: translateY(1px); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn--ink {
  background: transparent;
  border-color: var(--csdg-text);
  color: var(--csdg-text);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn--ink:hover {
  background: var(--csdg-text);
  color: var(--csdg-light);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn--ink:active { transform: translateY(1px); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn:focus-visible {
  outline: 3px solid var(--csdg-hot);
  outline-offset: 3px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-sec--graphite .csdg-btn:focus-visible { outline-color: var(--csdg-hot-lt); }

/* Every section CTA centres UNCONDITIONALLY — not as a side effect of the
   section's own text-align. Sibling AISHTMLNEWDESIGN-503 shipped with its CTA
   centring keyed off whether the section had a centred H2, so three sections
   left-aligned their button while the hero centred its own and the page
   carried two different CTA positions. Stating it on the action block itself
   means the next section added to this page cannot reintroduce that. */
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-secact {
  margin-top: 44px;
  display: flex;
  justify-content: center;
  text-align: center;
}

/* ---- hero — rule 24: full-bleed static ground, no image --------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero {
  padding: clamp(72px, 9vw, 122px) 24px clamp(56px, 7vw, 92px);
  background: linear-gradient(168deg, #0f1216 0%, var(--csdg-graphite) 36%, var(--csdg-graphite-2) 100%); /* static */
  text-align: center;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero__inner {
  max-width: 900px;
  margin-inline: auto;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero__eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--csdg-hot-lt);
  margin: 0 0 22px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero__h1 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--csdg-light);
  margin: 0 0 24px;
  text-wrap: balance;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero__lede {
  font-size: 18px;
  line-height: 1.72;
  color: var(--csdg-light-2);
  max-width: 66ch;
  margin: 0 auto 36px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero__act {
  margin: 0 0 44px;
  display: flex;
  justify-content: center;
}

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero__stack {
  border-top: 1px solid rgba(195, 201, 210, 0.22);
  padding-top: 26px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero__stackh {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--csdg-light-2);
  margin: 0 0 16px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
/* A chip paints its own ground, so it must also own its foreground at a
   specificity no prose rule in this sheet can outrank (skill 39A). The
   ancestor class is what does the outranking - a bare tag only ties. */
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stack li.csdg-stack__item {
  background: var(--csdg-graphite-3);
  color: var(--csdg-light);
  border: 1px solid #39424e;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- breadcrumb -------------------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb {
  background: var(--csdg-crumb-b);
  border-bottom: 1px solid var(--csdg-line);
  padding: 16px 24px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 16px;
  color: var(--csdg-text-2);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--csdg-line);
  border-radius: 4px;
  background: #ffffff;
  transition: border-color 130ms ease;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__back:hover { border-color: var(--csdg-hot); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__back:focus-visible { outline: 3px solid var(--csdg-hot); outline-offset: 2px; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__bar a {
  color: var(--csdg-text-2);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__bar a:hover { color: var(--csdg-hot-ink); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__bar a:focus-visible { outline: 3px solid var(--csdg-hot); outline-offset: 2px; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__slash { color: #5f656c; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__here { color: var(--csdg-text); font-weight: 650; }

/* ---- case study contents ---------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index {
  background: var(--csdg-bone-2);
  border-bottom: 1px solid var(--csdg-line-2);
  padding: clamp(44px, 5vw, 66px) 24px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__h {
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 750;
  letter-spacing: -0.005em;
  color: var(--csdg-text);
  margin: 0 0 22px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__h::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  background: var(--csdg-hot);
  margin-top: 14px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-top: 1px solid var(--csdg-line-2);
  transition: padding-left 130ms ease, border-color 130ms ease;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__list > li:nth-child(1) .csdg-index__item,
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__list > li:nth-child(2) .csdg-index__item { border-top: 0; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__t {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--csdg-text-3);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__item:hover {
  padding-left: 10px;
  border-color: var(--csdg-hot);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__item:hover .csdg-index__t { color: var(--csdg-hot-ink); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__item:hover .csdg-face { border-color: var(--csdg-hot); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__item:focus-visible {
  outline: 3px solid var(--csdg-hot);
  outline-offset: 2px;
}

/* ---- challenges ledger -------------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-chlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-chlist__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 22px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--csdg-line-2);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-chlist__item:first-child { border-top: 0; padding-top: 0; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-chlist__item:last-child { padding-bottom: 0; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-chlist__t {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--csdg-text);
  margin: 0 0 8px;
}

/* ---- solution mapping table --------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-map__scroll {
  overflow-x: auto;
  border: 1px solid var(--csdg-line);
  border-radius: 14px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table th {
  background: var(--csdg-graphite);
  color: var(--csdg-light);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 18px;
  border-bottom: 3px solid var(--csdg-hot);
  vertical-align: bottom;
}
/* Column separators. :not(:last-child) rather than a border on every cell —
   a trailing rule on the Result column would draw an edge down the right of
   a table that has no left edge, which reads as a rendering fault. */
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table th:not(:first-child) {
  border-left: 4px solid var(--csdg-hot);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table__ch { width: 34%; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table__so { width: 33%; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table__re { width: 33%; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table td {
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--csdg-text-2);
  padding: 18px;
  border-bottom: 1px solid var(--csdg-line);
  vertical-align: top;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table td:not(:first-child) {
  border-left: 4px solid var(--csdg-hot);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table tbody tr:nth-child(even) { background: var(--csdg-bone-2); }

/* ---- measurable results board -------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats__item {
  padding: 8px 26px 4px;
  border-left: 1px solid rgba(195, 201, 210, 0.2);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats__item:first-child { border-left: 0; padding-left: 0; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats__n {
  display: block;
  margin: 16px 0 10px;
  font-size: clamp(40px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--csdg-light);
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats__p {
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--csdg-light-2);
  margin: 0;
}

/* ---- why AIS ------------------------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-whylist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 34px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-whylist__item {
  border-top: 3px solid var(--csdg-hot);
  padding-top: 20px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-whylist__t {
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--csdg-text);
  margin: 0 0 10px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-secact--dark { margin-top: 48px; }

/* ---- client quote --------------------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-quote__h { text-align: center; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-quote__fig { margin: 0; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-quote__bq { margin: 0; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-quote__p {
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.46;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--csdg-light);
  text-align: center;
  margin: 0;
  padding-top: 26px;
  border-top: 3px solid var(--csdg-hot);
}

/* ---- area we serve --------------------------------------------------------- */

#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-servelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 30px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-servelist__item {
  border-top: 1px solid var(--csdg-line);
  padding-top: 20px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-servelist__r {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csdg-text);
  margin: 0 0 12px;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 700;
  color: var(--csdg-hot-ink);
  margin-bottom: 10px;
  transition: color 130ms ease;
}
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-tel:hover { color: var(--csdg-text); }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-tel:focus-visible { outline: 3px solid var(--csdg-hot); outline-offset: 2px; }
#page-case-study-dice-game-development-case-study-diceplay-studios .csdg-serve .csdg-body { line-height: 1.62; }

/* ---- CTA modal --------------------------------------------------------------- */

/* display:none -> flex (the sibling-page pattern): the dialog and its close
   button are focusable the same tick .is-open lands - a visibility
   transition would keep them unfocusable at t=0 and silently eat
   closeBtn.focus(). */
.csdg-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 100px 20px 20px 20px; overflow-y: auto;
  background: rgba(10, 12, 16, 0.82);
}
.csdg-modal.is-open { display: flex; }
.csdg-modal__box {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  background: #fbfaf7;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(5, 7, 10, 0.55);
}
.csdg-modal__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #171a1f;
  color: #f6f4f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 130ms ease;
}
.csdg-modal__x:hover { background: #c73b22; }
.csdg-modal__x:focus-visible { outline: 3px solid #ef6a4f; outline-offset: 2px; }
.csdg-modal__box iframe {
  display: block;
  width: 100%;
  min-height: 820px; /* skill 14: content height + buffer; form_embed.js refines on open */
  border: 0;
  border-radius: 8px;
}

/* ---- responsive --------------------------------------------------------------- */

@media (max-width: 1020px) {
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-whylist { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-servelist { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
}
@media (max-width: 760px) {
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__list { grid-template-columns: 1fr; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__list > li:nth-child(2) .csdg-index__item { border-top: 1px solid var(--csdg-line-2); }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-chlist__item { grid-template-columns: 1fr; gap: 14px; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table { min-width: 0; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-map__scroll {
    border: 0;
    border-radius: 0;
  }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table thead { display: none; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table tbody tr:nth-child(even) { background: transparent; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table tr {
    display: block;
    border-top: 3px solid var(--csdg-hot);
    padding: 18px 0 6px;
  }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table td {
    display: block;
    padding: 0 0 14px;
    border-bottom: 0;
  }
  /* Kill the column rule when the table stops having columns.
     This MUST repeat the :not(:last-child) qualifier. A plain
     `.csdg-table td { border-right: 0 }` here is (1,1,1) and LOSES to the
     desktop `.csdg-table td:not(:last-child)` at (1,2,1) — a media query
     adds no specificity, so the stacked cells kept a stray hairline down
     their right edge. Measured in the browser at 390px: 10 of 15 cells
     still ruled before this line existed. */
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table td:not(:first-child) {
    border-left: 0;
  }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--csdg-hot-ink);
    margin-bottom: 4px;
  }
}
@media (max-width: 560px) {
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats { grid-template-columns: 1fr; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-stats__item { border-left: 0; padding-left: 0; padding-right: 0; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-whylist { grid-template-columns: 1fr; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-servelist { grid-template-columns: 1fr; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn { width: 100%; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-secact,
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-hero__act { align-self: stretch; }
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__bar { font-size: 16px; }
}

/* ---- reduced motion: nothing runs anyway; keep state changes instant ------ */

@media (prefers-reduced-motion: reduce) {
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-btn,
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__item,
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-link,
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-tel,
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-crumb__back,
  .csdg-modal__x {
    transition-duration: 0.01ms !important;
  }
  /* no slide for users who asked for less motion - colour still changes */
  #page-case-study-dice-game-development-case-study-diceplay-studios .csdg-index__item:hover { padding-left: 4px; }
}