/* Mobile refinements (phones). Adapts the Webflow desktop layouts into native-feeling mobile
   layouts: tighter margins, stacked cards, no giant scroll-effect gaps. Loaded on every page. */

@media screen and (max-width: 767px) {
  /* a little more room on narrow screens */
  .main-container { padding-left: 20px !important; padding-right: 20px !important; }

  /* ---------- home: selected work as native cards ---------- */
  .work-section { padding-top: 40px !important; padding-bottom: 56px !important; }
  .work-block-heading-wrapper { margin-bottom: 20px !important; }
  .work-blocks-list { gap: 0 !important; }
  .work-block, .div-block-101 {
    margin: 0 0 20px !important; flex-direction: column !important; height: auto !important;
    background: #fff; border-radius: 22px; overflow: hidden;
    box-shadow: 0 18px 40px -24px rgba(24, 27, 46, .35);
  }
  .work-block-link-wrapper { display: block; width: 100%; }
  .work-block-image-wrapper { height: auto !important; border-radius: 0 !important; aspect-ratio: 4 / 3; overflow: hidden; }
  .work-block-image { width: 100% !important; height: 100% !important; object-fit: cover; }
  .work-block-text-wrapper {
    margin: 0 !important; padding: 18px 20px 22px !important; width: 100% !important; height: auto !important;
    border-radius: 0 !important; box-shadow: none !important; gap: 10px !important; position: static !important;
  }
  .thumbnail-title { font-size: 1.6rem !important; line-height: 1.2 !important; margin: 0 !important; }
  .work-block-para-wrapper { margin: 0 !important; width: auto !important; height: auto !important; gap: 14px !important; }
  .work-block-para-wrapper .paragraph-small { font-size: .98rem !important; line-height: 1.55 !important; max-width: none !important; width: auto !important; }
  /* category: a small tag above the title instead of sideways text */
  .work-type-wrapper {
    position: static !important; transform: none !important; width: auto !important; height: auto !important;
    margin: 0 !important; order: -1; inset: auto !important;
  }
  .thumbnail-category {
    transform: none !important; writing-mode: horizontal-tb !important; white-space: nowrap;
    display: inline-block; font-size: .72rem !important; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 99px; background: #f1f2f7; color: #3a3d53;
  }
  .work-link { margin-top: 8px !important; }

  /* ---------- case studies: readable body text ----------
     Justified text leaves rivers of white space on narrow screens; set it ragged-left. */
  [class^="text-size-xtra"], [class*=" text-size-xtra"], .xtra,
  .paragraph-23, .paragraph-29, .text-block-8, .text-block-6, .text-block-9 {
    text-align: left !important; text-justify: auto; hyphens: auto; -webkit-hyphens: auto;
    line-height: 1.65 !important; text-wrap: pretty;
  }
  /* tiny image captions */
  .paragraph-24, .paragraph-30 { font-size: 13px !important; line-height: 1.45 !important; }
}

@media screen and (max-width: 360px) {
  .main-container { padding-left: 16px !important; padding-right: 16px !important; }
  .thumbnail-title { font-size: 1.4rem !important; }
}

/* SEO heading fixes: extra H1s became H2s; keep their original line height, and a screen-reader-only H1 */
.heading-69.ks-was-h1, .heading-80.ks-was-h1, .heading-82.ks-was-h1 { line-height: 44px; }
.ks-sr-h1 { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Home hero quote: the line grew longer, so it's set smaller with tighter leading to keep the hero calm */
.hero-text .paragraph-big { font-size: clamp(1.125rem, 0.9rem + 0.75vw, 1.375rem); line-height: 1.55; max-width: 30em; }