/* ── Responsive text fixes ──────────────────────────────────────────────────
   Framer swaps breakpoint variants at runtime; SingleFile captured desktop only.
   case-study.css loads only on case study pages.                          */

/* Pretty-printed HTML + Framer pre-wrap creates huge gaps between blocks/list items.
   Framer's own CSS sets white-space:pre-wrap using two-class selectors
   (e.g. .framer-0TzN3 .framer-1keljd8), which outrank this rule's single
   attribute selector no matter the stylesheet order — hence !important. */
[data-framer-component-type="RichTextContainer"] {
  white-space: normal !important;
}

[data-framer-component-type="RichTextContainer"] ul.framer-text > li.framer-text + li.framer-text {
  margin-top: 0.35em;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  /* Hero title in header band: 40px → 32px */
  .framer-w500l2 h2.framer-text,
  .framer-1ak8djl h2.framer-text,
  .framer-v88b5z h2.framer-text {
    --framer-font-size: 32px !important;
    --framer-line-height: 130% !important;
  }
  /* Section headings (preset psenfo): 32px → 24px */
  .framer-styles-preset-psenfo.framer-text {
    --framer-font-size: 24px !important;
    --framer-line-height: 120% !important;
  }
  /* Subsection headings (preset 19eabt6): 24px → 20px */
  .framer-styles-preset-19eabt6.framer-text {
    --framer-font-size: 20px !important;
    --framer-line-height: 130% !important;
  }
  /* Pull-quotes in colored blocks: 28px → 22px */
  .framer-42j8iy h1.framer-text,
  .framer-42j8iy h2.framer-text,
  .framer-oe7wc8 h1.framer-text,
  .framer-oe7wc8 h2.framer-text,
  .framer-r1llzl h1.framer-text,
  .framer-r1llzl h2.framer-text,
  .framer-9aarkr h1.framer-text,
  .framer-9aarkr h2.framer-text {
    --framer-font-size: 22px !important;
    --framer-line-height: 130% !important;
  }
}

/* ── Mobile: typography, hide sidebar nav, mobile nav bar ── */
@media (max-width: 809.98px) {
  .framer-w500l2 h2.framer-text,
  .framer-1ak8djl h2.framer-text,
  .framer-v88b5z h2.framer-text {
    --framer-font-size: 28px !important;
    --framer-line-height: 130% !important;
  }
  .framer-styles-preset-psenfo.framer-text {
    --framer-font-size: 24px !important;
    --framer-line-height: 120% !important;
  }
  .framer-styles-preset-19eabt6.framer-text {
    --framer-font-size: 20px !important;
    --framer-line-height: 130% !important;
  }
  .framer-42j8iy h1.framer-text,
  .framer-42j8iy h2.framer-text,
  .framer-oe7wc8 h1.framer-text,
  .framer-oe7wc8 h2.framer-text,
  .framer-r1llzl h1.framer-text,
  .framer-r1llzl h2.framer-text,
  .framer-9aarkr h1.framer-text,
  .framer-9aarkr h2.framer-text {
    --framer-font-size: 22px !important;
    --framer-line-height: 130% !important;
  }

  .hidden-h67lju,
  .hidden-pyl1rl,
  .hidden-5fjhs7 {
    display: none !important;
  }

  /* Logic design flow diagrams: point arrows down when stacked vertically */
  #logicdesign [data-framer-name="arrow-right"] svg {
    transform: rotate(90deg);
  }

  .vk-progress-container {
    top: var(--vk-header-height, 56px) !important;
  }

  /* Mobile nav bar */
  .vk-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 0;
    gap: 8px;
  }

  .vk-mobile-nav-home {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: rgba(0,0,0,0.56);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    padding: 8px 10px;
  }

  .vk-mobile-nav-home svg {
    width: 18px;
    height: 18px;
  }

  .vk-sections-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .vk-sections-label {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgb(140,116,106);
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }

  .vk-sections-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgb(0,0,0);
    padding: 8px 10px;
    border-radius: 8px;
    background-color: rgb(218,211,206);
    letter-spacing: -0.03em;
    flex: 1;
    min-width: 0;
    max-width: 220px;
  }

  .vk-sections-toggle-icon,
  .vk-sections-dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .vk-sections-toggle-icon svg,
  .vk-sections-dropdown-icon svg {
    width: 18px;
    height: 18px;
  }

  .vk-sections-toggle-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .vk-sections-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .vk-sections-toggle.open .vk-sections-chevron {
    transform: rotate(180deg);
  }

  .vk-sections-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgb(237,234,231);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 8px;
    gap: 4px;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }

  .vk-sections-dropdown.open {
    display: flex;
  }

  .vk-sections-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: rgb(0,0,0);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    letter-spacing: -0.03em;
  }

  .vk-sections-dropdown a:hover,
  .vk-sections-dropdown a.active {
    background: rgba(0,0,0,0.06);
  }

  .vk-sections-dropdown a.active {
    font-weight: 600;
  }
}

@media (min-width: 810px) {
  .vk-mobile-nav { display: none; }
  .vk-sections-dropdown { display: none !important; }

  /* Summary info: equal-width columns (Framer gives "The working team" flex: 2) */
  .framer-0TzN3 .framer-1krtsrw > .framer-u1bv82,
  .framer-0TzN3 .framer-1krtsrw > .framer-jrjqul,
  .framer-0TzN3 .framer-1krtsrw > .framer-1t2aaob {
    flex: 1 1 0 !important;
    width: auto !important;
  }

  #case-study-sidebar a[href^="#"] {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
    transition: background-color 0.25s ease;
  }

  #case-study-sidebar a[href^="#"].vk-nav-active {
    background-color: var(--token-d8a72793-a1f4-42d6-b32f-e677b73f5d5c, rgb(218, 211, 206)) !important;
  }
}

/* ── Scroll-triggered fade-in animations ── */
.vk-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.vk-fade-in.vk-visible {
  opacity: 1;
  transform: translateY(0);
}