/* ─────────────────────────────────────────────────────────────────────────
   Case study pages — the home page's design language, applied to the svc-*
   vocabulary those pages are already written in.

   Why a re-skin rather than a rewrite: all five case studies share one set of
   class names (svc-hero, svc-section, svc-title, svc-lead, svc-use-case,
   svc-problem, svc-keep, svc-note, svc-faq). Restyling the vocabulary changes
   every page at once and leaves the copy, the headings and the schema exactly
   where they were, which is what search engines already have indexed.

   This file REPLACES the dark svc-* block each page used to carry inline, so
   it owns the layout as well as the palette — nothing is inherited from the
   old rules. It loads after style-v30.css and style-light.css, which stay in
   place because the shared header and footer are styled by them. Selectors
   are scoped to body.cs-study and, for .container and .btn, to a section
   class as well, so nothing here can reach the chrome.

   Palette, matched to the home page:
     ground #FBFBF8 · tint #F7F6F3 · ink #0B0E12 · muted #5A6270 · faint #7E8B99
     accent #0A6E9E · hairline rgba(11,14,18,.1)
   ───────────────────────────────────────────────────────────────────────── */

body.cs-study {
  background: #FBFBF8 !important;
  color: #0B0E12 !important;
  font-family: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

body.cs-study .svc-hero .container,
body.cs-study .svc-section .container,
body.cs-study .svc-faq .container {
  max-width: 1240px !important;
  padding-inline: clamp(18px, 4vw, 48px) !important;
}

/* ── buttons ─────────────────────────────────────────────────────────────
   Scoped to the sections, never to body, so the header's own .btn--primary
   keeps the styling it gets from style-v30.css. */
body.cs-study .svc-hero .btn,
body.cs-study .svc-section .btn,
body.cs-study .svc-faq .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 14px 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 15.5px !important;
  line-height: 1 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
body.cs-study .svc-hero .btn--primary,
body.cs-study .svc-section .btn--primary,
body.cs-study .svc-faq .btn--primary {
  background: #23282E !important;
  color: #fff !important;
  box-shadow: 0 16px 38px -18px rgba(35, 40, 46, .8) !important;
}
body.cs-study .svc-hero .btn--primary:hover,
body.cs-study .svc-section .btn--primary:hover,
body.cs-study .svc-faq .btn--primary:hover {
  background: #23282E !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 46px -20px rgba(35, 40, 46, .85) !important;
}
body.cs-study .svc-hero .btn--outline,
body.cs-study .svc-section .btn--outline,
body.cs-study .svc-faq .btn--outline {
  border: 1px solid rgba(11, 14, 18, .14) !important;
  background: #fff !important;
  color: #0B0E12 !important;
  font-weight: 500 !important;
}
body.cs-study .svc-hero .btn--outline:hover,
body.cs-study .svc-section .btn--outline:hover,
body.cs-study .svc-faq .btn--outline:hover {
  background: #fff !important;
  color: #0B0E12 !important;
  border-color: rgba(11, 14, 18, .34) !important;
}
body.cs-study .svc-hero .btn--lg,
body.cs-study .svc-section .btn--lg,
body.cs-study .svc-faq .btn--lg { padding: 15px 28px !important; font-size: 16px !important; }

/* ── hero ────────────────────────────────────────────────────────────────
   The dark gradient becomes the home page's light wash: two soft radials
   drifting over #FBFBF8, with ink and one accent doing the work. */
body.cs-study .svc-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(48px, 7vw, 96px) 0 clamp(44px, 5vw, 72px) !important;
  background: #FBFBF8 !important;
  color: #0B0E12 !important;
}
body.cs-study .svc-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  background: radial-gradient(900px 520px at 15% 0%, rgba(35, 40, 46, .10), transparent 62%),
    radial-gradient(760px 480px at 92% 10%, rgba(14, 127, 191, .09), transparent 60%) !important;
  animation: cs-drift 22s ease-in-out infinite !important;
}
body.cs-study .svc-hero::after { display: none !important; }
body.cs-study .svc-hero .container { position: relative !important; }

/* Both eyebrows become the home page's rule-and-label kicker. */
body.cs-study .svc-hero__eyebrow,
body.cs-study .svc-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0A6E9E !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
body.cs-study .svc-hero__eyebrow::before,
body.cs-study .svc-eyebrow::before {
  content: '' !important;
  display: block !important;
  width: 44px !important;
  height: 2px !important;
  flex: none !important;
  background: #0A6E9E !important;
}

body.cs-study .svc-hero__title {
  margin: 22px 0 0 !important;
  max-width: 22ch !important;
  font-size: clamp(29px, 3.9vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
  color: #0B0E12 !important;
  text-wrap: balance !important;
}
body.cs-study .svc-hero__title span { color: #0A6E9E !important; }
body.cs-study .svc-hero__sub {
  margin: 22px 0 0 !important;
  max-width: 760px !important;
  font-size: clamp(16px, 1.3vw, 18.5px) !important;
  line-height: 1.62 !important;
  color: #5A6270 !important;
  text-wrap: pretty !important;
}
body.cs-study .svc-hero__sub strong { color: #0B0E12 !important; font-weight: 600 !important; }
body.cs-study .svc-hero__btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 32px 0 0 !important;
}

/* Hero figures: a hairline-topped row rather than a glowing stat strip. */
body.cs-study .svc-hero__stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 26px clamp(24px, 4vw, 56px) !important;
  margin-top: clamp(34px, 4vw, 48px) !important;
  padding-top: clamp(22px, 2.6vw, 30px) !important;
  border-top: 1px solid rgba(11, 14, 18, .1) !important;
}
body.cs-study .svc-hero__stat strong {
  display: block !important;
  font-size: clamp(18px, 1.8vw, 23px) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: #0B0E12 !important;
}
body.cs-study .svc-hero__stat span {
  display: block !important;
  margin-top: 6px !important;
  font-size: 11.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #8A939F !important;
}

/* ── the snapshot card ───────────────────────────────────────────────── */
body.cs-study .svc-quick-answer {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 2.8vw, 34px) !important;
  border: 1px solid rgba(11, 14, 18, .1) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(11, 14, 18, .04), 0 40px 90px -64px rgba(11, 14, 18, .55) !important;
}
body.cs-study .svc-quick-answer__label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-family: 'IBM Plex Mono', Menlo, Consolas, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #0A6E9E !important;
}
body.cs-study .svc-quick-answer__label::before {
  content: '' !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #0A6E9E !important;
}
body.cs-study .svc-quick-answer__text {
  margin: 14px 0 0 !important;
  font-size: 15.6px !important;
  line-height: 1.68 !important;
  color: #3A424D !important;
}
body.cs-study .svc-quick-answer dl {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px 22px !important;
  margin: 22px 0 0 !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(11, 14, 18, .08) !important;
}
body.cs-study .svc-quick-answer dt {
  margin-bottom: 4px !important;
  font-family: 'IBM Plex Mono', Menlo, Consolas, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #8A939F !important;
}
body.cs-study .svc-quick-answer dd {
  margin: 0 !important;
  font-size: 14.6px !important;
  line-height: 1.5 !important;
  color: #0B0E12 !important;
}

/* ── section rhythm ─────────────────────────────────────────────────── */
body.cs-study .svc-section { padding: clamp(64px, 8vw, 112px) 0 !important; background: transparent !important; }
body.cs-study .svc-section--alt {
  background: #F7F6F3 !important;
  border-top: 1px solid rgba(11, 14, 18, .07) !important;
  border-bottom: 1px solid rgba(11, 14, 18, .07) !important;
}
body.cs-study .svc-title {
  margin: 18px 0 0 !important;
  font-size: clamp(27px, 3.1vw, 39px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.015em !important;
  color: #0B0E12 !important;
}
body.cs-study .svc-lead {
  margin: 18px 0 0 !important;
  max-width: 820px !important;
  font-size: 16.4px !important;
  line-height: 1.68 !important;
  color: #5A6270 !important;
  text-wrap: pretty !important;
}
body.cs-study .svc-lead p + p { margin-top: 14px !important; }
body.cs-study .svc-lead strong { color: #0B0E12 !important; font-weight: 600 !important; }
body.cs-study .svc-section a:not(.btn),
body.cs-study .svc-lead a { color: #0A6E9E !important; }
body.cs-study .svc-section h2,
body.cs-study .svc-section h3,
body.cs-study .svc-faq h2 { color: #0B0E12 !important; }

/* ── numbered cards ─────────────────────────────────────────────────── */
body.cs-study .svc-use-cases {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  gap: clamp(14px, 1.6vw, 20px) !important;
  margin-top: clamp(28px, 3.4vw, 42px) !important;
}
body.cs-study .svc-use-case {
  padding: clamp(20px, 2.2vw, 28px) !important;
  border: 1px solid rgba(11, 14, 18, .1) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(11, 14, 18, .04) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
body.cs-study .svc-use-case:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(11, 14, 18, .2) !important;
  box-shadow: 0 40px 80px -58px rgba(11, 14, 18, .55) !important;
}
body.cs-study .svc-use-case__num {
  margin: 0 !important;
  font-family: 'IBM Plex Mono', Menlo, Consolas, monospace !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  color: #9AA6B2 !important;
}
body.cs-study .svc-use-case__title {
  margin: 12px 0 0 !important;
  font-size: 17.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -.012em !important;
  color: #0B0E12 !important;
}
body.cs-study .svc-use-case__text {
  margin: 8px 0 0 !important;
  font-size: 14.4px !important;
  line-height: 1.6 !important;
  color: #5A6270 !important;
}

/* ── before / after ─────────────────────────────────────────────────── */
body.cs-study .svc-problem {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  margin-top: clamp(28px, 3.4vw, 42px) !important;
}
body.cs-study .svc-problem__col { padding: clamp(22px, 2.4vw, 30px) !important; border-radius: 20px !important; }
body.cs-study .svc-problem__col--before { background: #FDF3F0 !important; border: 1px solid rgba(180, 67, 43, .18) !important; }
body.cs-study .svc-problem__col--after { background: #F1F6FA !important; border: 1px solid rgba(10, 110, 158, .2) !important; }
body.cs-study .svc-problem__label {
  margin: 0 0 14px !important;
  font-family: 'IBM Plex Mono', Menlo, Consolas, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
body.cs-study .svc-problem__col--before .svc-problem__label { color: #B4432B !important; }
body.cs-study .svc-problem__col--after .svc-problem__label { color: #0A6E9E !important; }
body.cs-study .svc-problem__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
}
body.cs-study .svc-problem__list li {
  position: relative !important;
  padding-left: 22px !important;
  font-size: 14.8px !important;
  line-height: 1.6 !important;
  color: #3A424D !important;
}
body.cs-study .svc-problem__col--before .svc-problem__list li::before {
  content: '\00d7' !important;
  position: absolute !important;
  left: 0 !important;
  color: #B4432B !important;
  font-weight: 700 !important;
}
body.cs-study .svc-problem__col--after .svc-problem__list li::before {
  content: '+' !important;
  position: absolute !important;
  left: 0 !important;
  color: #0A6E9E !important;
  font-weight: 700 !important;
}

/* ── "what stayed the same" ─────────────────────────────────────────── */
body.cs-study .svc-keep {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: clamp(14px, 1.6vw, 20px) !important;
  margin-top: clamp(28px, 3.4vw, 42px) !important;
}
body.cs-study .svc-keep__item {
  padding: clamp(20px, 2.2vw, 26px) !important;
  border: 1px solid rgba(11, 14, 18, .1) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(11, 14, 18, .04) !important;
}
body.cs-study .svc-keep__item h3 {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 8px !important;
  font-size: 16.4px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: #0B0E12 !important;
}
body.cs-study .svc-keep__item h3::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
  background: #12805A !important;
  box-shadow: none !important;
}
body.cs-study .svc-keep__item p { margin: 0 !important; font-size: 14.4px !important; line-height: 1.6 !important; color: #5A6270 !important; }

/* ── notes ──────────────────────────────────────────────────────────── */
body.cs-study .svc-notes {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: clamp(24px, 3vw, 34px) !important;
  max-width: 900px !important;
}
body.cs-study .svc-note {
  padding: clamp(18px, 2vw, 24px) !important;
  border: 1px solid rgba(11, 14, 18, .1) !important;
  border-left: 2.5px solid #0A6E9E !important;
  border-radius: 0 16px 16px 0 !important;
  background: #fff !important;
}
body.cs-study .svc-note h3 {
  margin: 0 0 6px !important;
  font-size: 16.4px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: #0B0E12 !important;
}
body.cs-study .svc-note p { margin: 0 !important; font-size: 14.6px !important; line-height: 1.65 !important; color: #5A6270 !important; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
body.cs-study .svc-faq { padding: clamp(64px, 8vw, 112px) 0 !important; }
body.cs-study .svc-faq__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: clamp(28px, 3.4vw, 42px) !important;
  max-width: 880px !important;
}
body.cs-study .svc-faq__item {
  padding: clamp(18px, 2vw, 24px) !important;
  border: 1px solid rgba(11, 14, 18, .1) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(11, 14, 18, .04) !important;
}
body.cs-study .svc-faq__q {
  margin: 0 !important;
  font-size: 16.4px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: #0B0E12 !important;
}
body.cs-study .svc-faq__a { margin: 6px 0 0 !important; font-size: 14.8px !important; line-height: 1.68 !important; color: #5A6270 !important; }
body.cs-study .svc-faq__a a { color: #0A6E9E !important; }

/* ── the Denmark page's animated walkthrough ─────────────────────────────
   That component is dark by design: light cards, light type, a glowing route.
   Rather than recolour it, it gets an explicit dark stage to sit on — the same
   move the home page makes when it drops a dark band into a light page. */
body.cs-study .f3d {
  margin-top: clamp(28px, 3.4vw, 42px) !important;
  padding: clamp(16px, 2.2vw, 28px) clamp(14px, 2vw, 26px) clamp(8px, 1.4vw, 16px) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 26px !important;
  background: linear-gradient(160deg, #171C22 0%, #0E1216 100%) !important;
  overflow: hidden !important;
}

@keyframes cs-drift {
  0%   { transform: translate3d(0, 0, 0) }
  50%  { transform: translate3d(-3%, 2%, 0) }
  100% { transform: translate3d(0, 0, 0) }
}

@media (max-width: 900px) {
  body.cs-study .svc-problem { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.cs-study .svc-hero::before { animation: none !important; }
  body.cs-study .svc-use-case:hover { transform: none !important; }
}


/* ─────────────────────────────────────────────────────────────────────────
   OVERRIDE LAYER — undoing style-light.css sections 19 and 28

   That sheet re-skins .svc-* for all 59 interior pages and marks nearly every
   declaration !important, so these pages cannot simply restyle on top: each
   trick it plays has to be switched off by name. Everything below exists only
   because of a specific rule over there, and each one says which.
   ───────────────────────────────────────────────────────────────────────── */

/* §19 paints the highlighted phrase in the H1 with a clipped gradient and a
   transparent text fill, so a plain colour would render as nothing at all. */
body.cs-study .svc-hero__title span {
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #0A6E9E !important;
  -webkit-text-fill-color: #0A6E9E !important;
}

/* Same trick on the hero figures — gradient numerals become ink. */
body.cs-study .svc-hero__stat strong {
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #0B0E12 !important;
  -webkit-text-fill-color: #0B0E12 !important;
  font-variant-numeric: tabular-nums;
}

/* §19 gives the eyebrow a tinted pill; here it is a rule-and-label kicker. */
body.cs-study .svc-hero__eyebrow,
body.cs-study .svc-eyebrow {
  background: none !important;
  border: 0 !important;
}

/* §19 adds a 4px gradient rail down the left of the snapshot card. The card is
   a plain white panel in this design, so the rail goes. */
body.cs-study .svc-quick-answer::before { display: none !important; }

/* §19 rewrites the hero wash; this puts the home page's two radials back. */
body.cs-study .svc-hero::before {
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(35, 40, 46, .10), transparent 62%),
    radial-gradient(760px 480px at 92% 10%, rgba(14, 127, 191, .09), transparent 60%) !important;
}

/* §28 recolours the walkthrough for a light page. It is staying dark, on the
   dark stage above, so its panel and type go back to the light-on-dark set. */
body.cs-study .f3d__hud {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: none !important;
}
body.cs-study .f3d__cap b { color: #F2F6FA !important; }
body.cs-study .f3d__cap span { color: #A9B6C4 !important; }
body.cs-study .f3d__dots button { background: rgba(230, 242, 255, .22) !important; }
body.cs-study .f3d__dots button[aria-current="true"] { background: #7DD3FC !important; }