/* ==========================================================================
   Case study page — loaded after styles.css
   Design source: Figma "DPL Website (Old)" › Ngage (node 8603:1991), 1920px frame
   ========================================================================== */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2"); }

.cs {
  --cs-ink: #1a1a1a;
  --cs-font: "IBM Plex Sans", var(--font-body);
  font-family: var(--cs-font);
  font-size: 18px;
  line-height: 28px;
}
.cs p + p { margin-top: 28px; }

.cs-h2 { font-size: 40px; font-weight: 600; line-height: 56px; }
.cs-kicker { margin-top: 8px; font-size: 24px; font-weight: 500; line-height: 34px; }
.cs-body { margin-top: 40px; }

/* ---------- Dark story top: hero, client, problem ---------- */
.cs-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(26, 26, 26, 0) 28%, rgba(26, 26, 26, .88) 80%, rgba(26, 26, 26, .94) 100%),
    linear-gradient(141.3deg, #5925dc 1.6%, #361786 97.8%);
  padding-bottom: 156px;
}
.cs-dark__rings {
  position: absolute; z-index: -1;
  left: calc(50% - 71px); top: 243px;
  width: 1359px; height: 1294px; max-width: none;
  pointer-events: none;
}

.cs-hero {
  padding-top: calc(var(--header-h) + clamp(96px, 11vw, 222px));
  text-align: center;
}
.cs-hero__eyebrow { font-size: 32px; font-weight: 500; line-height: 48px; text-transform: uppercase; }
.cs-hero__title {
  margin-top: 10px;
  font-size: 64px; font-weight: 700; line-height: 80px; letter-spacing: -.01em;
}
.cs-hero__meta { margin-top: 40px; font-size: 32px; font-weight: 500; line-height: 48px; }
.cs-hero__summary {
  width: min(100%, 942px); margin: 40px auto 0;
  padding: 16px;
  font-weight: 500;
  background: rgba(26, 26, 26, .4);
}
.cs-hero__intro { max-width: 1000px; margin: 40px auto 0; }

.cs-client {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 40px;
  margin-top: 180px;
}
.cs-client__logo { display: grid; place-items: center; padding: 80px 40px; }
.cs-client__logo img { width: 363px; }

.cs-problem { margin-top: 156px; }

/* ---------- Solution (white) ---------- */
.cs-solution {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 156px 0;
  color: var(--cs-ink);
  text-align: center;
  background: radial-gradient(1100px circle at 0 0, rgba(131, 66, 214, .2), rgba(131, 66, 214, 0) 70%), var(--white);
}
.cs-solution__rings {
  position: absolute; z-index: -1; left: -315px; top: -162px;
  width: 726px; height: 726px; max-width: none;
  pointer-events: none;
}
.cs-solution .cs-copy { margin-top: 80px; }

/* MacBook + phone mockup, built from Figma layers on a 922 × 544 grid */
.device { width: min(100%, 922px); margin-inline: auto; container-type: inline-size; }
.device__stage { --u: calc(100cqw / 922.08); position: relative; height: calc(var(--u) * 544.47); }
.device__stage > * { position: absolute; }
.device__screen-body { left: calc(var(--u) * 79.96);  top: 0;                        width: calc(var(--u) * 740.759); height: calc(var(--u) * 507.777); }
.device__display     { left: calc(var(--u) * 92.17);  top: calc(var(--u) * 13.34);   width: calc(var(--u) * 715.956); height: calc(var(--u) * 465.524); object-fit: cover; }
.device__notch       { left: calc(var(--u) * 403.14); top: calc(var(--u) * 13.34);   width: calc(var(--u) * 94.029);  height: calc(var(--u) * 14.826); }
.device__camera      { left: calc(var(--u) * 447.26); top: calc(var(--u) * 14.96);   width: calc(var(--u) * 5.789);   height: calc(var(--u) * 5.796); }
.device__body        { left: 0;                        top: calc(var(--u) * 507.78);  width: calc(var(--u) * 900.313); height: calc(var(--u) * 36.693); overflow: hidden; }
.device__body img    { position: absolute; left: -.33%; top: -27.25%; width: 100.33%; height: 127.25%; max-width: none; }
.device__phone {
  left: calc(var(--u) * 737.08); top: calc(var(--u) * 104);
  width: calc(var(--u) * 185); height: calc(var(--u) * 400);
  border: calc(var(--u) * 6) solid var(--cs-ink);
  border-radius: calc(var(--u) * 12);
  overflow: hidden;
  background: var(--cs-ink);
}
.device__phone img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Impact ---------- */
.cs-impact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0 0 256px;
  color: #000;
  text-align: center;
  background: radial-gradient(1200px circle at 100% 115%, rgba(131, 66, 214, .22), rgba(131, 66, 214, 0) 70%), var(--white);
}
.cs-impact__rings {
  position: absolute; z-index: -1; left: calc(50% + 494px); top: 51px;
  width: 726px; height: 691px; max-width: none;
  pointer-events: none;
}
.cs-impact__lead { margin-top: 20px; font-weight: 500; }
.cs-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.cs-card {
  padding: 20px;
  font-weight: 500;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.cs-card p + p { margin-top: 12px; }

.cs ~ .site-footer { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cs-hero__title { font-size: 52px; line-height: 64px; }
  .cs-client { grid-template-columns: 1fr; margin-top: 120px; }
  .cs-client__logo { padding: 0; justify-items: start; }
  .cs-client__logo img { width: 260px; }
}

@media (max-width: 640px) {
  .cs { font-size: 16px; line-height: 26px; }
  .cs p + p { margin-top: 20px; }
  .cs-h2 { font-size: 30px; line-height: 40px; }
  .cs-kicker { font-size: 20px; line-height: 28px; }
  .cs-body, .cs-solution .cs-copy { margin-top: 28px; }
  .cs-hero__eyebrow, .cs-hero__meta { font-size: 20px; line-height: 30px; }
  .cs-hero__title { font-size: 36px; line-height: 44px; }
  .cs-hero__meta, .cs-hero__summary, .cs-hero__intro { margin-top: 28px; }
  .cs-client { margin-top: 88px; gap: 28px; }
  .cs-client__logo img { width: 200px; }
  .cs-problem { margin-top: 88px; }
  .cs-dark { padding-bottom: 96px; }
  .cs-solution { padding: 96px 0; }
  .cs-impact { padding-bottom: 120px; }
  .cs-dark__rings { width: 800px; height: auto; left: 10%; top: 480px; }
}