/* Service deck visual rhythm: paper / dark / cream slide variants and richer
   component palette. Lifts the lighter service decks to match the report
   decks (see Content/Reports/slides) and vendor-gatekeeper. */

:root {
  --svc-paper: #f7fbff;
  --svc-paper-2: #e9f0f8;
  --svc-cream-1: #fbf7ec;
  --svc-cream-2: #f5ecd2;
  --svc-ink: #0b1829;
  --svc-ink-2: #11243a;
  --svc-soft: #58708c;
  --svc-line: rgba(17, 36, 58, 0.12);
  --svc-gold: #f5c542;
  --svc-gold-2: #f7d56a;
  --svc-teal: #12877a;
  --svc-amber: #c47618;
  --svc-red: #b8323a;
  --svc-green: #168451;
  --svc-shadow: 0 28px 90px rgba(4, 13, 27, 0.34);
}

/* ========== Slide tone variants ========== */

.deck .slide.paper,
.deck .slide.cream {
  background: var(--svc-paper);
  color: var(--svc-ink);
}

.deck .slide.paper {
  background:
    radial-gradient(circle at 88% 8%, rgba(42, 139, 255, 0.07), transparent 28%),
    linear-gradient(180deg, var(--svc-paper) 0%, var(--svc-paper-2) 100%);
}

.deck .slide.cream {
  background: linear-gradient(180deg, var(--svc-cream-1) 0%, var(--svc-cream-2) 100%);
}

.deck .slide.paper .watermark,
.deck .slide.cream .watermark {
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='480' viewBox='0 0 720 480'><g transform='translate(360 240) rotate(-22)'><text x='0' y='0' text-anchor='middle' fill='%230f2942' font-family='Nunito,Segoe UI,Arial,sans-serif' font-size='32' font-weight='800' letter-spacing='5'>Chander Dhall Methodworks, LLC</text></g></svg>");
}

/* Typography in light slides */
.deck .slide.paper .deck-h1,
.deck .slide.paper .deck-h2,
.deck .slide.cream .deck-h1,
.deck .slide.cream .deck-h2 {
  color: var(--svc-ink);
}

.deck .slide.paper .lead,
.deck .slide.cream .lead {
  color: rgba(11, 24, 41, 0.82);
}

.deck .slide.paper .subhead,
.deck .slide.cream .subhead {
  color: var(--svc-soft);
}

.deck .slide.paper .kicker,
.deck .slide.cream .kicker {
  color: var(--svc-teal);
}

.deck .slide.paper .kicker::before,
.deck .slide.cream .kicker::before {
  background: var(--svc-teal);
}

/* Card / chip surfaces in light slides */
.deck .slide.paper .card,
.deck .slide.paper .snap,
.deck .slide.paper .event,
.deck .slide.cream .card,
.deck .slide.cream .snap,
.deck .slide.cream .event {
  background: #fff;
  border: 1px solid var(--svc-line);
  color: var(--svc-ink);
  box-shadow: 0 14px 40px rgba(8, 16, 28, 0.06);
}

.deck .slide.paper .card h3,
.deck .slide.paper .snap h3,
.deck .slide.paper .event h3,
.deck .slide.cream .card h3,
.deck .slide.cream .snap h3,
.deck .slide.cream .event h3,
.deck .slide.paper .card strong,
.deck .slide.paper .snap strong,
.deck .slide.cream .card strong,
.deck .slide.cream .snap strong {
  color: var(--svc-ink);
}

.deck .slide.paper .card p,
.deck .slide.paper .snap p,
.deck .slide.paper .event p,
.deck .slide.cream .card p,
.deck .slide.cream .snap p,
.deck .slide.cream .event p {
  color: var(--svc-soft);
}

.deck .slide.paper .card .tag,
.deck .slide.paper .snap .tag,
.deck .slide.cream .card .tag,
.deck .slide.cream .snap .tag {
  color: var(--svc-soft);
}

/* Decision-row aside in light slides */
.deck .slide.paper .decision-box,
.deck .slide.cream .decision-box {
  background: #fff;
  border: 1px solid var(--svc-line);
  box-shadow: var(--svc-shadow);
  color: var(--svc-ink);
}

.deck .slide.paper .decision-box .tag,
.deck .slide.cream .decision-box .tag {
  color: var(--svc-amber);
}

.deck .slide.paper .decision-box p,
.deck .slide.cream .decision-box p {
  color: var(--svc-ink);
}

/* Receive grid in light slides — proper artifact cards, not flat bars */
.deck .slide.paper .receive-grid,
.deck .slide.cream .receive-grid {
  gap: 16px;
  margin-top: 32px;
}

/* Balanced 4+3 layout when there are exactly 7 deliverables: items 1-4 each
   span 3 of a 12-col grid, items 5-7 each span 4. No more 4-up + 3 stragglers. */
.deck .receive-grid:has(> *:nth-child(7):last-child) {
  grid-template-columns: repeat(12, 1fr) !important;
}
.deck .receive-grid:has(> *:nth-child(7):last-child) > *:nth-child(-n+4) {
  grid-column: span 3;
}
.deck .receive-grid:has(> *:nth-child(7):last-child) > *:nth-child(n+5) {
  grid-column: span 4;
}

@media (max-width: 980px) {
  .deck .receive-grid:has(> *:nth-child(7):last-child) {
    grid-template-columns: 1fr !important;
  }

  .deck .receive-grid:has(> *:nth-child(7):last-child) > * {
    grid-column: auto !important;
  }
}

.deck .slide.paper .receive-grid > *,
.deck .slide.cream .receive-grid > * {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 20px 56px;
  background: #fff;
  border: 1px solid var(--svc-line);
  border-radius: 14px;
  color: var(--svc-ink);
  font: 700 14.5px/1.4 Sora, sans-serif;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 28px rgba(8, 16, 28, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.deck .slide.paper .receive-grid > *::before,
.deck .slide.cream .receive-grid > *::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--svc-gold), var(--svc-gold-2));
  box-shadow: 0 4px 12px rgba(245, 197, 66, 0.32);
}

.deck .slide.paper .receive-grid > *::after,
.deck .slide.cream .receive-grid > *::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid #0b1829;
  border-bottom: 2.5px solid #0b1829;
  transform: translateY(-70%) rotate(-45deg);
}

.deck .slide.paper .receive-grid > *:hover,
.deck .slide.cream .receive-grid > *:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(8, 16, 28, 0.10);
  border-color: rgba(245, 197, 66, 0.45);
}

/* ========== Boundaries / "out of scope" cards ==========
   Clean white card with a subtle amber top accent. The 01/02/03 numeral and
   the "OUT OF SCOPE" tag are hidden; the actual message is the lead text. */
.deck .slide.paper .snapshot .snap,
.deck .slide.cream .snapshot .snap {
  position: relative;
  padding: 28px 26px 26px;
  background: #fff;
  border: 1px solid var(--svc-line);
  border-top: 3px solid var(--svc-amber);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(8, 16, 28, 0.06);
}

.deck .slide.paper .snapshot .snap .tag,
.deck .slide.cream .snapshot .snap .tag,
.deck .slide.paper .snapshot .snap strong,
.deck .slide.cream .snapshot .snap strong {
  display: none;
}

.deck .slide.paper .snapshot .snap p,
.deck .slide.cream .snapshot .snap p {
  margin: 0;
  font: 700 17px/1.5 Sora, sans-serif;
  color: var(--svc-ink);
  letter-spacing: -0.005em;
}

/* Event timeline rail color in light slides */
.deck .slide.paper .event,
.deck .slide.cream .event {
  position: relative;
  overflow: hidden;
}

.deck .slide.paper .event::before,
.deck .slide.cream .event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--svc-amber);
}

.deck .slide.paper .event time,
.deck .slide.cream .event time {
  display: block;
  color: var(--svc-amber);
  font: 800 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Slide footer pill on light slides */
.deck .slide.paper .slide-footer .pill,
.deck .slide.cream .slide-footer .pill {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--svc-line);
  color: var(--svc-soft);
}

/* ========== Bigstat block (large number + label) ========== */
.bigstat {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.bigstat .num {
  font: 900 clamp(120px, 17vw, 250px) / 0.85 Sora, sans-serif;
  letter-spacing: -0.04em;
  color: var(--svc-gold);
  text-shadow: 0 18px 44px rgba(245, 197, 66, 0.18);
}

.bigstat .num span {
  font-size: 0.36em;
  vertical-align: top;
  margin-left: 6px;
}

.bigstat .label {
  font: 800 13px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--svc-gold);
  margin-bottom: 12px;
}

.deck .slide.paper .bigstat .num,
.deck .slide.cream .bigstat .num {
  color: var(--svc-amber);
  text-shadow: 0 18px 44px rgba(196, 118, 24, 0.18);
}

.deck .slide.paper .bigstat .label,
.deck .slide.cream .bigstat .label {
  color: var(--svc-amber);
}

/* ========== Color cards (go / fix / hold) ========== */
.card.green {
  border-color: rgba(22, 132, 81, 0.28) !important;
  background: linear-gradient(180deg, #fff, #f4fff8) !important;
}

.card.amber {
  border-color: rgba(196, 118, 24, 0.32) !important;
  background: linear-gradient(180deg, #fff, #fff8ec) !important;
}

.card.red {
  border-color: rgba(184, 50, 58, 0.30) !important;
  background: linear-gradient(180deg, #fff, #fff7f8) !important;
}

.grade {
  font: 900 clamp(46px, 5vw, 74px) / 1 Sora, sans-serif;
  margin-bottom: 12px;
}

.green .grade { color: var(--svc-green); }
.amber .grade { color: var(--svc-amber); }
.red .grade { color: var(--svc-red); }

/* ========== Snapshot four-column variant ========== */
.snapshot.four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
  .snapshot.four {
    grid-template-columns: 1fr;
  }
}

/* ========== Receive item chip (vendor-gatekeeper variant) ========== */
.receive-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  padding: 18px;
  font: 800 15px/1.35 Sora, sans-serif;
  color: #fff;
}

.deck .slide.paper .receive-item,
.deck .slide.cream .receive-item {
  background: #fff;
  border-color: var(--svc-line);
  color: var(--svc-ink);
  box-shadow: 0 8px 22px rgba(8, 16, 28, 0.05);
}

/* Per-deck copyright line on Next Step (hero-slide) */
.deck .hero-slide .deck-copyright {
  color: rgba(248, 252, 255, 0.55);
  font: 600 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 42px;
}