/* /case-study/crateking-case-open-platform-case-study — AISHTMLNEWDESIGN-552
   Page-owned styles. EVERY selector is scoped to #page-case-study-crateking-case-open-platform-case-study or a
   cscc- 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. */

/* VISUAL DIRECTION — TAMPER SEAL
   The case is a rebuilt-trust story (drop-rate fairness, verifiable RNG,
   hardened security) told through a crate/case-opening product, so the page
   reads as a tamper-evident seal: deep graphite base, a seal-wax orange
   accent, circular seal-badge numerals instead of square tokens. Kept clear
   of SKIN VAULT and CRATE MANIFEST, the site's other crate-adjacent
   directions, and PROVABLY FAIR (diceplay-dice), the other RNG-fairness
   direction shipped this week.

   CTA COLOUR, computed by hand before this file existed (day 3 of doing this
   before writing any CSS, not after). Two fills were tried:
     mid-tone seal (#c2531c) + white text: 4.62:1 text, 3.37:1 surface --
       PASSED both bars, but by margins of 0.12 and 0.37. Rejected: too thin
       to trust against rendering variance, the same standard applied to the
       blackjack-page rejection two days ago.
     light seal fill (#e89a5c) + ink text: 7.8:1 text, 6.82:1 surface --
       real margins, matching the pattern that has worked reliably all week
       (gold+ink, saffron+ink, mint+ink). Used instead.
   A SEPARATE, darker token (--cscc-seal-ink, #943c17) covers every TEXT
   usage (links, numerals, hover states): 7.2:1 on white, 5.97:1 on tint --
   the fill/text split lesson from jackpotsphere, applied here before
   shipping a single rule that needed correcting afterward. */

#page-case-study-crateking-case-open-platform-case-study {
  --cscc-ink: #1c1712;
  --cscc-graphite: #22201d;
  --cscc-seal: #e89a5c;
  --cscc-seal-hover: #dd8746;
  --cscc-seal-ink: #943c17;
  --cscc-paper: #ffffff;
  --cscc-bone: #f7f4f0;
  --cscc-tint: #efe9e2;
  --cscc-text: #29231d;
  --cscc-muted: #605649;
  --cscc-line: #ddd4c6;
  --cscc-onink: #f0e9e0;

  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--cscc-text);
  background: var(--cscc-bone);
  display: block;
}

#page-case-study-crateking-case-open-platform-case-study .cscc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-section { padding: 74px 0; }
#page-case-study-crateking-case-open-platform-case-study .cscc-section--tint { background: var(--cscc-tint); }
#page-case-study-crateking-case-open-platform-case-study .cscc-link { color: var(--cscc-seal-ink); text-decoration: underline; }

#page-case-study-crateking-case-open-platform-case-study .cscc-h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--cscc-ink);
  max-width: 26ch;
}
#page-case-study-crateking-case-open-platform-case-study .cscc-h2::after { content: ""; display: block; width: 56px; height: 6px; margin: 16px 0 28px; background: var(--cscc-seal); border-radius: 3px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-h2--band { color: #fff; }

/* ---------- hero ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-hero { background: linear-gradient(150deg, #100c09 0%, #221a14 55%, #2c221a 100%); padding: 84px 28px 76px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-hero__inner { max-width: 900px; margin: 0 auto; text-align: center; }
#page-case-study-crateking-case-open-platform-case-study .cscc-eyebrow { margin: 0 0 18px; font-size: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #f0b788; }
#page-case-study-crateking-case-open-platform-case-study .cscc-hero__title { margin: 0 0 20px; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.14; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
#page-case-study-crateking-case-open-platform-case-study .cscc-hero__lede { margin: 0 auto 26px; color: var(--cscc-onink); max-width: 78ch; }
#page-case-study-crateking-case-open-platform-case-study .cscc-hero__techlabel { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: #fff; }
#page-case-study-crateking-case-open-platform-case-study .cscc-tech { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-tech li { border: 2px solid rgba(240, 233, 224, 0.5); color: var(--cscc-onink); padding: 9px 16px; font-weight: 600; font-size: 16px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-hero__ctarow { margin: 32px 0 0; }

/* ---------- CTA button: the /our-values .ov-btn form ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-btn {
  display: inline-block; border: 0; cursor: pointer; font-family: inherit;
  font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0.01em;
  padding: 17px 30px; border-radius: 2px;
  transition: background-color 0.18s, color 0.18s, transform 0.18s;
}
#page-case-study-crateking-case-open-platform-case-study .cscc-btn--seal { background: var(--cscc-seal); color: var(--cscc-ink); }
#page-case-study-crateking-case-open-platform-case-study .cscc-btn--seal:hover { background: var(--cscc-seal-hover); transform: translateY(-1px); }
#page-case-study-crateking-case-open-platform-case-study .cscc-btn--ink { background: var(--cscc-ink); color: #fff; }
#page-case-study-crateking-case-open-platform-case-study .cscc-btn--ink:hover { background: #0c0a07; transform: translateY(-1px); }
#page-case-study-crateking-case-open-platform-case-study .cscc-btn--bone { background: var(--cscc-bone); color: var(--cscc-ink); }
#page-case-study-crateking-case-open-platform-case-study .cscc-btn--bone:hover { background: #fff; transform: translateY(-1px); }
#page-case-study-crateking-case-open-platform-case-study .cscc-btn:active { transform: translateY(0); }
#page-case-study-crateking-case-open-platform-case-study .cscc-btn:focus-visible { outline: 3px solid var(--cscc-seal); outline-offset: 3px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-sec__ctarow { margin: 34px 0 0; }
#page-case-study-crateking-case-open-platform-case-study .cscc-band__ctarow { margin: 40px 0 0; }

/* ---------- breadcrumb ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-breadcrumb { background: var(--cscc-paper); border-bottom: 1px solid var(--cscc-line); display: flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 16px; color: var(--cscc-muted); }
#page-case-study-crateking-case-open-platform-case-study .cscc-breadcrumb__back { display: inline-flex; }
#page-case-study-crateking-case-open-platform-case-study .cscc-breadcrumb__leg:hover { color: var(--cscc-seal-ink); }
#page-case-study-crateking-case-open-platform-case-study .cscc-breadcrumb__now { color: var(--cscc-ink); font-weight: 600; }

/* ---------- contents ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-toc { background: var(--cscc-paper); padding: 46px 0; border-bottom: 1px solid var(--cscc-line); }
#page-case-study-crateking-case-open-platform-case-study .cscc-toc__title { margin: 0 0 20px; font-size: 18px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cscc-muted); }
#page-case-study-crateking-case-open-platform-case-study .cscc-toc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-toc__list li { border-top: 1px solid var(--cscc-line); }
#page-case-study-crateking-case-open-platform-case-study .cscc-toc__list a { display: flex; align-items: baseline; gap: 14px; padding: 15px 2px; font-weight: 600; color: var(--cscc-ink); }
#page-case-study-crateking-case-open-platform-case-study .cscc-toc__list a:hover { color: var(--cscc-seal-ink); }
#page-case-study-crateking-case-open-platform-case-study .cscc-toc__num { font-weight: 800; color: var(--cscc-seal-ink); }

/* ---------- About ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-lede { margin: 0; max-width: 80ch; color: var(--cscc-muted); }

/* ---------- Challenges: seal-badge numerals ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-chals { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-chal { background: var(--cscc-paper); border: 1px solid var(--cscc-line); padding: 22px 26px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-chal__t { margin: 0 0 6px; font-size: 1.14rem; font-weight: 800; color: var(--cscc-ink); display: flex; gap: 14px; align-items: baseline; }
#page-case-study-crateking-case-open-platform-case-study .cscc-chal__n { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 50%; background: var(--cscc-ink); color: var(--cscc-seal); font-size: 16px; font-weight: 800; flex-shrink: 0; }
#page-case-study-crateking-case-open-platform-case-study .cscc-chal__b { margin: 0; color: var(--cscc-muted); }

/* ---------- Solution: the mapping table ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-tablewrap { overflow-x: auto; }
#page-case-study-crateking-case-open-platform-case-study .cscc-map { width: 100%; border-collapse: collapse; background: var(--cscc-paper); }
#page-case-study-crateking-case-open-platform-case-study .cscc-map th { background: var(--cscc-ink); color: var(--cscc-seal); text-align: left; font-weight: 800; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; padding: 14px 18px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-map td { border-top: 1px solid var(--cscc-line); padding: 16px 18px; vertical-align: top; color: var(--cscc-muted); font-size: 16px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-map tbody tr:nth-child(odd) td { background: #fbf8f5; }
#page-case-study-crateking-case-open-platform-case-study .cscc-map td:last-child { color: var(--cscc-ink); font-weight: 600; }

/* ---------- Results band ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-band { background: var(--cscc-ink); padding: 74px 0; }
#page-case-study-crateking-case-open-platform-case-study .cscc-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-stat { display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--cscc-seal); padding-top: 18px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-stat__n { font-size: 2.3rem; font-weight: 800; line-height: 1; color: var(--cscc-seal); }
#page-case-study-crateking-case-open-platform-case-study .cscc-stat__b { color: var(--cscc-onink); font-size: 16px; }

/* ---------- Why ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-whys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-why { background: var(--cscc-paper); border: 1px solid var(--cscc-line); padding: 22px 26px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-why__t { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: var(--cscc-ink); display: flex; gap: 14px; align-items: baseline; }
#page-case-study-crateking-case-open-platform-case-study .cscc-why__n { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--cscc-seal); color: var(--cscc-seal-ink); font-size: 16px; font-weight: 800; flex-shrink: 0; }
#page-case-study-crateking-case-open-platform-case-study .cscc-why__b { margin: 0; color: var(--cscc-muted); }

/* ---------- Client quote ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-quote { margin: 0; background: var(--cscc-paper); border-left: 4px solid var(--cscc-seal); padding: 28px 32px; max-width: 80ch; }
#page-case-study-crateking-case-open-platform-case-study .cscc-quote blockquote { margin: 0; }
#page-case-study-crateking-case-open-platform-case-study .cscc-quote p { margin: 0; font-size: 1.22rem; line-height: 1.55; font-weight: 600; color: var(--cscc-ink); }

/* ---------- Area We Serve ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-region { background: var(--cscc-paper); border: 1px solid var(--cscc-line); border-top: 4px solid var(--cscc-ink); padding: 22px 24px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-region__t { margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: 0.08em; color: var(--cscc-ink); }
#page-case-study-crateking-case-open-platform-case-study .cscc-region__tel { margin: 0 0 10px; font-weight: 700; }
#page-case-study-crateking-case-open-platform-case-study .cscc-region__tel a { color: var(--cscc-seal-ink); }
#page-case-study-crateking-case-open-platform-case-study .cscc-region__addr { margin: 0; color: var(--cscc-muted); font-size: 16px; }

/* ---------- CTA modal: the /our-values shell ---------- */
#page-case-study-crateking-case-open-platform-case-study .cscc-modal { display: none; position: fixed; inset: 0; z-index: 1000; padding: 20px; overflow-y: auto; background: rgba(28, 23, 18, 0.72); }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__box { position: relative; width: 100%; max-width: 620px; margin: auto; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); overflow: hidden; }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--cscc-line); border-radius: 50%; background: #fff; color: var(--cscc-ink); cursor: pointer; transition: background-color 0.16s, color 0.16s; }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__x::before,
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: currentColor; }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__x::before { transform: translate(-50%, -50%) rotate(45deg); }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__x:hover { background: var(--cscc-seal); color: var(--cscc-ink); }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__x:focus-visible { outline: 3px solid var(--cscc-seal); outline-offset: 2px; }
#page-case-study-crateking-case-open-platform-case-study .cscc-modal__frame { display: block; width: 100%; min-height: 860px; border: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  #page-case-study-crateking-case-open-platform-case-study .cscc-stats { grid-template-columns: repeat(2, 1fr); }
  #page-case-study-crateking-case-open-platform-case-study .cscc-regions { grid-template-columns: repeat(2, 1fr); }
  #page-case-study-crateking-case-open-platform-case-study .cscc-toc__list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #page-case-study-crateking-case-open-platform-case-study { font-size: 16px; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-wrap { padding: 0 18px; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-section, #page-case-study-crateking-case-open-platform-case-study .cscc-band { padding: 56px 0; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-hero { padding: 60px 18px 52px; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-breadcrumb { padding: 12px 18px; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-stats { grid-template-columns: 1fr; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-whys { grid-template-columns: 1fr; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-regions { grid-template-columns: 1fr; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-btn { width: 100%; text-align: center; padding: 16px 22px; }

  #page-case-study-crateking-case-open-platform-case-study .cscc-tablewrap { overflow-x: visible; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-map thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-map, #page-case-study-crateking-case-open-platform-case-study .cscc-map tbody, #page-case-study-crateking-case-open-platform-case-study .cscc-map tr, #page-case-study-crateking-case-open-platform-case-study .cscc-map td { display: block; box-sizing: border-box; max-width: 100%; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-map tr { border: 1px solid var(--cscc-line); border-top: 4px solid var(--cscc-seal); margin-bottom: 16px; background: var(--cscc-paper); }
  #page-case-study-crateking-case-open-platform-case-study .cscc-map td { border-top: 0; padding: 14px 18px; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-map tbody tr:nth-child(odd) td { background: transparent; }
  #page-case-study-crateking-case-open-platform-case-study .cscc-map td::before { content: attr(data-label); display: block; font-size: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cscc-seal-ink); margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  #page-case-study-crateking-case-open-platform-case-study .cscc-btn, #page-case-study-crateking-case-open-platform-case-study .cscc-btn:hover { transition: none; transform: none; }
}