/* 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; }

/* Story page: experience / education rows were three fixed-width columns that ran off the
   right edge on phones. Date on the left; role with the company underneath on the right. */
@media (max-width: 767px) {
  .about-table-row { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; }
  .about-column { width: auto; min-width: 0; }
  .about-column .paragraph-mini { overflow-wrap: anywhere; }
  .about-column.column-link, .about-column.certification-link { grid-column: 2; width: auto; padding-left: 0; justify-content: flex-start; text-align: left; opacity: .7; }
}

/* Story page: Spotify playlist card */
.ks-listening { width: min(680px, 100% - 32px); margin: 120px auto 0; text-align: center; }
.ks-listening .h3 { margin: 0 0 8px; }
.ks-listening-sub { margin: 0 0 24px; opacity: .7; }
.ks-spotify { display: block; width: 100%; height: 380px; border: 0; border-radius: 14px; box-shadow: 0 24px 48px -28px rgba(24, 27, 46, .45); background: transparent; }
@media (max-width: 767px) { .ks-listening { margin-top: 72px; } .ks-spotify { height: 352px; } }

/* Story page: company names read as links (underline + arrow nudge on hover / focus) */
.about-column.column-link .paragraph-mini { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 160ms ease; }
.about-column.column-link .about-link-embed { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.about-column.column-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .about-column.column-link:hover .paragraph-mini { text-decoration-color: currentColor; }
  .about-column.column-link:hover .about-link-embed { transform: translate(2px, -2px); }
}