/**
 * Phone-width corrections for layout the Framer export only solved for desktop.
 * Loaded after the page's own styles, so every rule here has to outrank the
 * generated breakpoint rules with !important.
 */

@media (max-width: 809.98px) {
  /* ----------------------------------------------------------------
     Footer contact row

     The export keeps three side-by-side columns at every width. On a
     390px screen each column slot is ~97px while its contents are
     199px (email), 141px (phone) and 126px (social icons), so all
     three overlap. Stack them instead and let the text wrap.
     ---------------------------------------------------------------- */
  .framer-1kf0g8a,
  .framer-55e6gk {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    height: auto !important;
  }

  .framer-1tae0xk,
  .framer-l3m5rn,
  .framer-1rqfqsr,
  .framer-1xsdui6,
  .framer-8ap9o0 {
    width: 100% !important;
    /* the bottom-bar slots carry max-width: 50% for the two-up desktop row */
    max-width: 100% !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  .framer-ag8ogu,
  .framer-ej8lng,
  .framer-81mo0s,
  .framer-ppwbyj,
  .framer-dos27s {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* white-space: pre on the generated text blocks stops the long email and
     copyright lines from wrapping, pushing them past the viewport edge. */
  .framer-ag8ogu p,
  .framer-ej8lng p,
  .framer-81mo0s p,
  .framer-ppwbyj p,
  .framer-ppwbyj div,
  .framer-o6x19g p,
  .framer-nehj0r p {
    white-space: normal !important;
  }

  .framer-7icq1w,
  .framer-55e6gk > div {
    height: auto !important;
  }

  /* ----------------------------------------------------------------
     Home hero portrait

     Framer pins the card to 180x252 on phones (340x476 on desktop),
     leaving it adrift in a 100vh section. Scale it with the viewport
     and let the card's aspect-ratio derive the height.
     ---------------------------------------------------------------- */
  .framer-1526o8l,
  .framer-OzlK9 .framer-1y3f9q6,
  .framer-OzlK9 .framer-174865s,
  .framer-OzlK9 .framer-5cjz9e {
    width: min(92vw, 400px) !important;
    height: auto !important;
  }

  /* The portrait's natural 0.71 aspect makes a full-width card 500px tall,
     which leaves no room for the name and titles on one screen. Keep the card
     wide but give it whatever height is left after the text block (~240px)
     and the floating theme toggle, and crop towards the top of the frame. */
  .framer-OzlK9 .framer-43x9nz,
  .framer-OzlK9 .framer-43x9nz .framer-1526o8l,
  .framer-OzlK9 .framer-43x9nz .framer-1y3f9q6,
  .framer-OzlK9 .framer-43x9nz .framer-174865s {
    height: clamp(230px, calc(100vh - 400px), 460px) !important;
  }

  .framer-OzlK9 .framer-43x9nz img {
    object-fit: cover !important;
    object-position: 50% 12% !important;
  }

  /* ----------------------------------------------------------------
     Home hero composition

     On desktop the portrait is an overlay centred between the FOUNDER and
     BUILDER columns, and the whole landing fits one 900px screen. The same
     markup unfolds into four full-height blocks on a phone, which left the
     portrait alone on the first screen and pushed the name ~1000px down.
     Collapse those blocks so the landing reads as one stacked unit.
     ---------------------------------------------------------------- */
  .framer-OzlK9 .framer-10wy60n,
  .framer-OzlK9 .framer-o0zby,
  .framer-OzlK9 .framer-m09soj,
  .framer-OzlK9 .framer-iesngu,
  .framer-OzlK9 .framer-bo4nxh,
  .framer-OzlK9 .framer-bmwyn,
  .framer-OzlK9 .framer-14gfby1 {
    height: auto !important;
    min-height: 0 !important;
  }

  /* the pin has no travel left once the block is content-sized, and
     scroll-flip.js already no-ops at zero travel */
  .framer-OzlK9 .framer-m09soj {
    position: static !important;
    padding-top: clamp(86px, 12.5vh, 110px) !important;
  }

  /* the two text columns were spaced apart across the 100vh block */
  .framer-OzlK9 .framer-bo4nxh {
    justify-content: flex-start !important;
    gap: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 72px !important;
  }

  /* ----------------------------------------------------------------
     Waving-hand badge

     The hand SVG is pinned to 52px at every breakpoint, but on phones its
     clipping parent shrinks to 25px, so only the top-left corner of the
     hand survived. Let the SVG scale with its box instead.
     ---------------------------------------------------------------- */
  .framer-owsqmh-container,
  .framer-owsqmh-container > .framer-1b429fx {
    width: 76px !important;
    height: 76px !important;
  }

  .framer-owsqmh-container .framer-1t4im-container,
  .framer-owsqmh-container .framer-jctaa,
  .framer-owsqmh-container .framer-1rl3kp7-container,
  .framer-owsqmh-container .framer-1rl3kp7-container > div {
    width: 38px !important;
    height: 38px !important;
  }

  /* the export ships both a 26px and a 52px !important rule for this svg and
     the 52px one wins on source order, so out-specify them both */
  .framer-owsqmh-container .framer-jctaa .framer-1rl3kp7-container svg {
    width: 100% !important;
    height: 100% !important;
  }

  /* The badge overlay sits at a fixed 172px down a 252px card, which lands
     mid-portrait once the card grows. The card's 3D perspective also drags
     anything left of centre further left, so anchor it on the card edge
     rather than outside it. */
  .framer-owsqmh-container {
    top: 66% !important;
    /* the card's 3D perspective shifts this ~30px further left than its
       computed offset, so inset it enough to stay inside the viewport */
    left: 40px !important;
    right: auto !important;
    bottom: auto !important;
  }
}