/* ============================================================
   enhance.css — Responsive layer on top of Framer
   ============================================================ */

/* ── Make the root container fluid ─────────────────────────── */

.framer-rCglp.framer-1s85bck,
.framer-iRjVh.framer-lmk8pe {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

@media (max-width: 817.98px) {
  .framer-rCglp.framer-1s85bck {
    width: 100% !important;
  }

  [data-framer-name="Top"] {
    padding: 0 16px !important;
  }

  .framer-rCglp .framer-14uawxg {
    padding: 0 16px !important;
  }

  .framer-rCglp .framer-46ei4c,
  .framer-rCglp .framer-zlaul,
  .framer-rCglp .framer-u8i1jz {
    padding: 48px 20px !important;
    gap: 80px !important;
  }

  /* ── Project cards: stack image above text ── */

  /* Card container → column */
  .framer-Dy5d5.framer-107l5ou {
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
  }

  /* Image: full width, 16:9 */
  .framer-Dy5d5 .framer-1s486d0-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Text block: full width, auto height */
  .framer-Dy5d5 .framer-2muil {
    flex: none !important;
    align-self: unset !important;
    width: 100% !important;
    height: min-content !important;
  }

  /* Inner text column */
  .framer-Dy5d5 .framer-93xe9d {
    flex: none !important;
    height: min-content !important;
  }

  /* Gap between cards */
  .framer-rCglp .framer-46ei4c {
    gap: 80px !important;
  }

  /* ── Contact items: ensure full width so text doesn't crush ── */
  .framer-rCglp .framer-6ugnns-container,
  .framer-rCglp .framer-5w9m04-container,
  .framer-rCglp .framer-rjrvaq-container {
    flex: none !important;
    width: 100% !important;
    align-self: unset !important;
  }
}

@media (min-width: 818px) and (max-width: 1199.98px) {
  .framer-rCglp.framer-1s85bck {
    width: 100% !important;
  }

  .framer-rCglp .framer-14uawxg {
    padding: 0 32px !important;
  }
}

/* ── Card gap: 80px on all screen sizes ─────────────────────── */

.framer-rCglp .framer-46ei4c {
  gap: 80px !important;
}

/* ── Footer: stack vertically below 960px ──────────────────── */

@media (max-width: 960px) {
  .framer-ZH4Vr.framer-1xkgqoj {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 24px 0 16px !important;
  }

  /* Let both footer children fill full width */
  .framer-ZH4Vr .framer-1g9rl8d {
    flex: none !important;
    width: 100% !important;
  }

  /* Allow "Thank you" to wrap if needed */
  .framer-ZH4Vr .framer-1pi8aod {
    white-space: normal !important;
    width: 100% !important;
  }
}

/* ── Lottie card overlay — sits on top of Framer SSR SVG ─────── */

.lottie-card {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  overflow: hidden !important;
}


/* ── Self-intro container: full width, hug height ───────────── */

.framer-gro40p-container {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

/* Hide original banner image — animation replaces it */
.framer-gro40p-container > :not(#si-wrap) {
  display: none !important;
}

/* ── Card hover: bold "View Case Study" + arrow points right ── */

.framer-DxtyR.framer-112i77g .framer-fc6dtl-container {
  transition: transform 0.25s ease !important;
}

.framer-DxtyR.framer-112i77g .framer-fc6dtl-container svg path,
.framer-DxtyR.framer-112i77g .framer-fc6dtl-container svg line,
.framer-DxtyR.framer-112i77g .framer-fc6dtl-container svg polyline,
.framer-DxtyR.framer-112i77g .framer-fc6dtl-container svg circle {
  transition: stroke-width 0.25s ease !important;
}

.framer-DxtyR.framer-112i77g .framer-12mq5sc h4 {
  transition: font-weight 0.15s ease !important;
}

.framer-Dy5d5:hover .framer-DxtyR.framer-112i77g .framer-fc6dtl-container {
  transform: rotate(15deg) !important;
}

.framer-Dy5d5:hover .framer-DxtyR.framer-112i77g .framer-fc6dtl-container svg path,
.framer-Dy5d5:hover .framer-DxtyR.framer-112i77g .framer-fc6dtl-container svg line,
.framer-Dy5d5:hover .framer-DxtyR.framer-112i77g .framer-fc6dtl-container svg polyline,
.framer-Dy5d5:hover .framer-DxtyR.framer-112i77g .framer-fc6dtl-container svg circle {
  stroke-width: 2.5 !important;
}

.framer-Dy5d5:hover .framer-DxtyR.framer-112i77g .framer-12mq5sc h4 {
  font-weight: 700 !important;
}

/* ── Smooth scroll ──────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* ── Remove blank space injected by Framer's canvas/editor ─── */

#overlay,
#__framer-badge-container,
#__framer-editorbar,
#__framer-editorbar-container,
[id^="framer-canvas"],
.__framer-canvas,
.__framer-live-preview {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Prevent the Framer runtime from pushing body/html taller */
html, body {
  height: auto !important;
  min-height: unset !important;
  overflow-x: hidden !important;
}