/* ── Responsive text fixes ──────────────────────────────────────────────────
   Framer's JS swaps components at different breakpoints, changing font sizes.
   The SingleFile only captured the desktop variant, so we override here.    */

/* Section headings ("Digital systems…", "Physical-world…"): Framer locks
   these RichText containers to white-space:pre + width:auto, so long titles
   overflow the viewport instead of wrapping. Allow wrap at all sizes. */
.framer-1FqpT .framer-1jv0vdd {
  white-space: normal !important;
  word-break: break-word;
  word-wrap: break-word;
  width: 100%;
  max-width: 100%;
}

/* Featured work: 4 cards in a 2×2 grid */
@media (min-width: 810px) {
  .framer-cwabq4:has(.framer-glaze-container) {
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 16px;
  }

  .framer-cwabq4:has(.framer-glaze-container) .framer-1sez5it-container,
  .framer-cwabq4:has(.framer-glaze-container) .framer-i1b4pl-container,
  .framer-cwabq4:has(.framer-glaze-container) .framer-h4dvm5-container,
  .framer-cwabq4:has(.framer-glaze-container) .framer-glaze-container {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    height: 384px;
    position: relative;
  }
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  /* Hero role title stays at its desktop 40px (same as the closing CTA
     heading) — only the intro body copy scales down at tablet. */
  /* Hero intro paragraph: 20px → 18px at tablet */
  .framer-vldao2 p {
    --framer-font-size: 18px !important;
  }
  /* Card titles: 32px → 26px at tablet (2×2 grid; cards ~half viewport).
     Was 22px — leftover from the old 3-up row and left too much dead air. */
  .framer-x2vm47 h2 {
    --framer-font-size: 26px !important;
    --framer-line-height: 130% !important;
  }
}

@media (max-width: 809.98px) {
  /* Hero role title stays at 40px on mobile too, matching the CTA. */
  /* Hero intro paragraph: 20px → 17px at mobile */
  .framer-vldao2 p {
    --framer-font-size: 17px !important;
    --framer-line-height: 145% !important;
  }
  /* Card titles: 32px → 28px at mobile (cards are full-width stacked).
     Was 24px — bumped to fill the dead air between icon and button. */
  .framer-x2vm47 h2 {
    --framer-font-size: 28px !important;
    --framer-line-height: 130% !important;
  }
  /* Featured work 4-card grid stacks on mobile */
  .framer-cwabq4:has(.framer-glaze-container) {
    flex-direction: column !important;
    height: auto !important;
  }

  .framer-cwabq4:has(.framer-glaze-container) .framer-1sez5it-container,
  .framer-cwabq4:has(.framer-glaze-container) .framer-i1b4pl-container,
  .framer-cwabq4:has(.framer-glaze-container) .framer-h4dvm5-container,
  .framer-cwabq4:has(.framer-glaze-container) .framer-glaze-container {
    flex: none !important;
    width: 100% !important;
    height: auto;
  }

  /* Single-column: expand card white box to fit wrapped titles + CTA
     instead of clipping against the fixed 320px height. */
  .framer-OY9XD .framer-4sdf4v {
    height: auto;
    min-height: 0;
    overflow: visible;
    gap: 24px;
    place-content: flex-start;
    padding-bottom: 40px;
  }

  .framer-OY9XD .framer-x2vm47 {
    flex: none;
    width: 100%;
  }
}

/* Match Framer/Lenis: hide native scrollbar so layout width is consistent */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }