/* =================================================================
   2U Digital — Case Studies ("Our Work")
   Wolfgang-modelled: alternating VIOLET colour bands and BONE-WHITE
   sections, big animated data, generous hover motion.
   Depends on styles.css (tokens, nav, footer, buttons, reveal).
   ================================================================= */

:root{
  --bone:      #f4f0e8;   /* warm bone white */
  --bone-2:    #ece6da;   /* slightly deeper bone for cards/detail */
  --bone-ink:  #14131a;   /* near-black text on bone */
  --bone-mut:  #55535f;   /* muted text on bone */
  --bone-line: rgba(20,19,26,.12);
}

/* keep the page from ever showing the dark body behind bands */
body.cases { background: var(--bone); }

/* ---------- Shared section rhythm ---------- */
.cs-section { padding-block: clamp(72px, 10vw, 130px); position: relative; overflow: hidden; }

/* BONE band */
.cs-bone { background: var(--bone); color: var(--bone-ink); }
.cs-bone .eyebrow { color: var(--lime-dim); }
.cs-bone .eyebrow::before { background: var(--lime-dim); }

/* VIOLET band inherits styles.css .section--purple look via .cs-violet */
.cs-violet {
  background: var(--purple-bg);
  color: var(--text);
  border-block: 1px solid rgba(255,255,255,.10);
}

/* ---------- HERO (violet) ---------- */
.cs-hero {
  position: relative;
  padding-top: clamp(140px, 17vw, 200px);
  padding-bottom: clamp(64px, 8vw, 104px);
  background: var(--purple-bg);
  color: var(--text);
  overflow: hidden;
}
.cs-hero::before{
  content:""; position:absolute; z-index:0;
  width:70vw; height:70vw; max-width:820px; max-height:820px;
  right:-16vw; top:-20vw;
  background: radial-gradient(circle at center, rgba(237,200,74,.16), transparent 62%);
  filter: blur(18px); pointer-events:none;
}
.cs-hero__inner { position: relative; z-index: 2; max-width: 940px; }
.cs-hero h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(38px, 6.2vw, 82px);
  line-height: 1.0; letter-spacing: -.035em;
  margin-top: 26px;
}
.cs-hero h1 .accent { color: var(--lime); }
.cs-hero__sub {
  margin-top: 28px; max-width: 60ch;
  font-size: clamp(17px, 1.6vw, 21px);
  color: rgba(255,255,255,.86); line-height: 1.55;
}
.cs-hero__actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }

/* aggregate metric strip with count-up */
.cs-metrics {
  position: relative; z-index: 2;
  margin-top: clamp(48px, 6vw, 76px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cs-metric { background: rgba(19,10,42,.34); padding: 30px 26px; backdrop-filter: blur(2px); }
.cs-metric__num {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1; letter-spacing: -.03em;
  color: #fff;
}
.cs-metric__num .u { color: var(--lime); }
.cs-metric__label { color: rgba(255,255,255,.72); font-size: 13.5px; margin-top: 12px; max-width: 24ch; }

/* ---------- CASE block ---------- */
.case__inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.case__index {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  opacity: .6;
}
.case__flag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime-dim); margin-left: 12px;
}
.cs-violet .case__flag { color: var(--lime); }
.case__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3.8vw, 46px); line-height: 1.05; letter-spacing: -.025em;
  margin-top: 18px;
}
.case__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.case__tags span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--bone-line); color: var(--bone-mut);
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  cursor: default;
}
.case__tags span:hover { color: var(--purple); border-color: var(--purple-lit); transform: translateY(-2px); }
.cs-violet .case__tags span { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.cs-violet .case__tags span:hover { color: var(--lime); border-color: var(--lime); }

.case__h { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-dim); margin: 30px 0 10px; }
.cs-violet .case__h { color: var(--lime); }
.case__body { font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.65; color: var(--bone-mut); max-width: 52ch; }
.cs-violet .case__body { color: rgba(255,255,255,.82); }
.case__body + .case__h { margin-top: 24px; }

/* quote */
.case__quote {
  margin-top: 30px; padding: 24px 26px;
  border-left: 3px solid var(--lime);
  background: rgba(20,19,26,.04);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.cs-violet .case__quote { background: rgba(255,255,255,.06); }
.case__quote p { font-size: 16px; line-height: 1.6; font-style: italic; color: var(--bone-ink); }
.cs-violet .case__quote p { color: #fff; }
.case__quote cite {
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--bone-mut);
}
.cs-violet .case__quote cite { color: rgba(255,255,255,.7); }
.case__quote cite b { color: var(--purple-lit); font-weight: 700; }
.cs-violet .case__quote cite b { color: var(--lime); }

/* results card (right column) */
.results {
  position: sticky; top: 100px;
  border-radius: var(--radius-lg);
  padding: 8px;
  background: #fff;
  border: 1px solid var(--bone-line);
  box-shadow: 0 30px 60px -34px rgba(20,12,40,.4);
}
.cs-violet .results { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); box-shadow: none; backdrop-filter: blur(3px); }
.results__head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-mut); padding: 20px 22px 6px;
}
.cs-violet .results__head { color: rgba(255,255,255,.7); }
.result {
  padding: 18px 22px;
  border-top: 1px solid var(--bone-line);
  transition: background .3s var(--ease);
}
.cs-violet .result { border-top-color: rgba(255,255,255,.12); }
.result:first-of-type { border-top: none; }
.result:hover { background: rgba(82,12,158,.05); }
.cs-violet .result:hover { background: rgba(255,255,255,.06); }
.result__num {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1; letter-spacing: -.03em;
  color: var(--purple);
}
.cs-violet .result__num { color: var(--lime); }
.result__num .u { color: var(--lime-dim); }
.cs-violet .result__num .u { color: #fff; }
.result__label { font-size: 13.5px; color: var(--bone-mut); margin-top: 9px; line-height: 1.4; }
.cs-violet .result__label { color: rgba(255,255,255,.75); }

/* awards / recognition chips under a case */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.badges span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
  padding: 8px 13px; border-radius: 8px;
  background: var(--bone-2); color: var(--bone-ink);
  border: 1px solid var(--bone-line);
}
.cs-violet .badges span { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.16); }
.badges span b { color: var(--purple-lit); }
.cs-violet .badges span b { color: var(--lime); }

/* ---------- Reviews ---------- */
.reviews__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review {
  background: #fff; border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg); padding: 30px 28px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.review:hover { transform: translateY(-6px); border-color: var(--purple-lit); box-shadow: 0 30px 60px -34px rgba(20,12,40,.4); }
.review__stars { color: var(--lime); letter-spacing: 3px; font-size: 15px; }
.review p { color: var(--bone-ink); font-size: 15px; line-height: 1.6; margin-top: 16px; }
.review__who { margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--bone-mut); }
.review__who b { color: var(--purple); font-weight: 700; }

/* ---------- CTA ---------- */
.cs-cta { text-align: center; }
.cs-cta h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.03em;
  max-width: 20ch; margin: 22px auto 0;
}
.cs-cta h2 .accent { color: var(--lime); }
.cs-cta p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 22px auto 0; font-size: clamp(16px,1.5vw,19px); }
.cs-cta .eyebrow { justify-content: center; }
.cs-cta__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* =================================================================
   CASE INDEX GRID — Logo + Name + Problem + button (per client)
   ================================================================= */
.caseidx__grid { margin-top: clamp(40px, 5vw, 60px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.caseidx-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg); padding: 30px 32px 30px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.caseidx-card:hover { transform: translateY(-6px); border-color: var(--purple-lit); box-shadow: 0 30px 60px -34px rgba(20,12,40,.4); }
.caseidx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; }
.caseidx-card__logo { height: 38px; width: auto; max-width: 170px; object-fit: contain; object-position: left center; filter: brightness(0); opacity: .82; }
.caseidx-card__loc { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--bone-mut); white-space: nowrap; }
.caseidx-card__name { font-family: var(--display); font-weight: 500; font-size: clamp(21px, 2.3vw, 29px); letter-spacing: -.02em; margin-top: 22px; color: var(--bone-ink); }
.caseidx-card__prob { color: var(--bone-mut); font-size: 15.5px; line-height: 1.55; margin-top: 12px; flex: 1 1 auto; }
.caseidx-card__btn {
  margin-top: 24px; align-self: flex-start;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--purple); display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.caseidx-card:hover .caseidx-card__btn { gap: 16px; border-bottom-color: var(--purple-lit); }
@media (max-width: 760px) { .caseidx__grid { grid-template-columns: 1fr; } }

/* section heading helper on bone */
.cs-head { max-width: 760px; }
.cs-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 4vw, 50px); line-height: 1.05; letter-spacing: -.025em; margin-top: 20px;
}
.cs-head p { color: var(--bone-mut); font-size: clamp(16px,1.4vw,19px); margin-top: 20px; max-width: 58ch; }
.cs-head .accent { color: var(--purple); }
/* on a VIOLET band the heading accent + copy must be light, not dark */
.cs-violet .cs-head p { color: rgba(255,255,255,.82); }
.cs-violet .cs-head .accent { color: var(--lime); }

/* count-up: avoid layout shift, keep tabular figures */
[data-count] { font-variant-numeric: tabular-nums; }

/* read-more link under a case on the index page */
.case__more { margin-top: 26px; }
.case__more a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--purple); display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.case__more a:hover { gap: 16px; border-bottom-color: var(--purple-lit); }
.cs-violet .case__more a { color: var(--lime); }
.cs-violet .case__more a:hover { border-bottom-color: var(--lime); }

/* =================================================================
   WOLFGANG-STYLE WORK CARDS + CAROUSEL  (used on the home page)
   Self-contained dark-violet cards; work on any background.
   ================================================================= */
.work { background: var(--ink); }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.work__head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -.03em; margin-top: 18px;
  text-transform: uppercase; max-width: 16ch;
}
.work__head h2 .accent { color: var(--lime); }
.work__rail {
  margin-top: 52px;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(340px, 42%);
  gap: 22px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--purple-lit) transparent;
}
.work__rail::-webkit-scrollbar { height: 6px; }
.work__rail::-webkit-scrollbar-thumb { background: var(--purple-lit); border-radius: 999px; }
.workcard {
  scroll-snap-align: start;
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1a0f38, #12082c);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.workcard:hover { transform: translateY(-6px); border-color: rgba(237,200,74,.5); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
.workcard__top {
  position: relative;
  padding: 30px 30px 26px;
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(125,34,210,.55), transparent 60%),
    linear-gradient(180deg, rgba(82,12,158,.5), transparent);
  min-height: 210px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.workcard__logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .96; }
.workcard__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 2.5vw, 32px); line-height: 1.03; letter-spacing: -.02em;
  text-transform: uppercase; color: #fff; margin-top: 26px;
}
.workcard__title .to { color: var(--lime); }
.workcard__arrow {
  position: absolute; right: 26px; bottom: 26px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center; color: #fff;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.workcard:hover .workcard__arrow { background: var(--lime); color: #11130a; border-color: var(--lime); transform: rotate(-45deg) scale(1.05); }
.workcard__arrow svg { width: 18px; height: 18px; }
.workcard__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  margin-top: auto;
}
.workcard__stat { padding: 20px 18px; border-right: 1px solid var(--line); }
.workcard__stat:last-child { border-right: none; }
.workcard__num { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -.02em; color: var(--lime); }
.workcard__num .u { color: #fff; opacity: .85; }
.workcard__lbl { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.35; }
.work__hint { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* =================================================================
   INDIVIDUAL CASE-STUDY PAGE  (.cp-*)
   ================================================================= */
.cp-hero {
  position: relative; overflow: hidden;
  padding-top: clamp(140px, 16vw, 190px); padding-bottom: clamp(48px, 6vw, 80px);
  background: var(--purple-bg); color: var(--text);
}
.cp-hero::before{
  content:""; position:absolute; z-index:0; width:60vw; height:60vw; max-width:760px; max-height:760px;
  right:-14vw; top:-18vw; background: radial-gradient(circle at center, rgba(237,200,74,.16), transparent 62%);
  filter: blur(18px); pointer-events:none;
}
.cp-hero__inner { position: relative; z-index: 2; max-width: 960px; }
.cp-crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.cp-crumb a { color: var(--lime); }
.cp-crumb a:hover { text-decoration: underline; }
.cp-logo { height: 46px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); margin: 26px 0 8px; }
.cp-fromto {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 5.6vw, 74px); line-height: 1.0; letter-spacing: -.035em;
  text-transform: uppercase; margin-top: 16px;
}
.cp-fromto .to { color: var(--lime); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cp-tags span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.82); }
.cp-sub { margin-top: 24px; max-width: 60ch; font-size: clamp(16px,1.5vw,20px); color: rgba(255,255,255,.86); line-height: 1.55; }

/* stat band */
.cp-stats { background: rgba(0,0,0,.16); border-top: 1px solid rgba(255,255,255,.12); }
.cp-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.cp-stat { padding: clamp(24px,3vw,40px) 8px; }
.cp-stat__num { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4vw, 54px); line-height: 1; letter-spacing: -.03em; color: #fff; }
.cp-stat__num .u { color: var(--lime); }
.cp-stat__lbl { color: rgba(255,255,255,.72); font-size: 13px; margin-top: 12px; max-width: 22ch; }

/* body prose on bone */
.cp-body { background: var(--bone); color: var(--bone-ink); }
.cp-prose { max-width: 760px; }
.cp-prose .cs-block + .cs-block { margin-top: 40px; }
.cp-prose h2 { font-family: var(--display); font-weight: 500; font-size: clamp(22px,2.6vw,32px); letter-spacing: -.02em; }
.cp-prose h2 .accent { color: var(--purple); }
.cp-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-dim); display: block; margin-bottom: 10px; }
.cp-prose p { color: var(--bone-mut); font-size: clamp(16px,1.5vw,18px); line-height: 1.7; margin-top: 14px; }
.cp-list { list-style: none; margin-top: 18px; display: grid; gap: 14px; }
.cp-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--bone-ink); font-size: 16px; line-height: 1.5; }
.cp-list li b { color: var(--purple); }
.cp-list svg { width: 20px; height: 20px; color: var(--lime-dim); flex: none; margin-top: 2px; }
.cp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cp-badges span { font-family: var(--mono); font-size: 11px; padding: 8px 13px; border-radius: 8px; background: var(--bone-2); border: 1px solid var(--bone-line); color: var(--bone-ink); }
.cp-badges span b { color: var(--purple-lit); }

/* big testimonial */
.cp-quote { background: var(--purple-bg); color: #fff; text-align: center; }
.cp-quote__mark { font-family: var(--display); font-size: 90px; line-height: .6; color: var(--lime); opacity: .5; }
.cp-quote blockquote {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.8vw, 38px); line-height: 1.32; letter-spacing: -.02em;
  max-width: 20ch; max-width: 24ch; margin: 20px auto 0; color: #fff;
}
.cp-quote blockquote em { font-style: normal; color: var(--lime); }
.cp-quote cite { display: block; margin-top: 28px; font-style: normal; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.8); }
.cp-quote cite b { color: #fff; }

/* prev / next */
.cp-more { background: var(--bone-2); color: var(--bone-ink); }
.cp-more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cp-more a {
  display: block; padding: 30px 32px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--bone-line);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cp-more a:hover { transform: translateY(-4px); border-color: var(--purple-lit); box-shadow: 0 24px 50px -30px rgba(20,12,40,.5); }
.cp-more a.next { text-align: right; }
.cp-more__dir { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-mut); }
.cp-more__name { font-family: var(--display); font-weight: 500; font-size: clamp(18px,2vw,24px); letter-spacing: -.01em; margin-top: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .cs-metrics { grid-template-columns: repeat(2, 1fr); }
  .case__inner { grid-template-columns: 1fr; }
  .results { position: static; margin-top: 8px; }
  .reviews__grid { grid-template-columns: 1fr; }
  .cp-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .cp-stat { border-bottom: 1px solid rgba(255,255,255,.1); }
  .work__rail { grid-auto-columns: 80%; }
}
@media (max-width: 560px) {
  .cs-metrics { grid-template-columns: 1fr; }
  .cp-stats__grid { grid-template-columns: 1fr; }
  .cp-more__grid { grid-template-columns: 1fr; }
  .work__rail { grid-auto-columns: 86%; }
}