/* Tangram Studios — responsive layer.
   Inline styles win over stylesheets, so every override here is !important.
   Breakpoints: 1180 laptop · 1024 tablet · 900 nav collapse · 760 mobile · 480 small mobile */

img, video, canvas, iframe { max-width: 100%; }
/* frames that are scaled to fit by script keep their authored pixel width */
iframe[data-tg-fit], iframe[data-tg="email-frame"] { max-width: none; }

/* ---------- nav ---------- */
[data-tg-menu-btn] { display: none !important; }
[data-tg-menu] { display: none !important; }

@media (max-width: 1180px) {
  [data-tg="nav"] { max-width: calc(100vw - 40px) !important; }
}

@media (max-width: 1024px) {
  [data-tg="nav"] { gap: 14px !important; padding: 9px 10px 9px 18px !important; }
  [data-tg-nav-links] > a[data-tg-link] { padding: 8px 10px !important; font-size: 13.5px !important; }
}

@media (max-width: 900px) {
  [data-tg-nav-links] { display: none !important; }
  [data-tg-menu-btn] { display: inline-flex !important; }
  [data-tg-menu][data-open="1"] { display: grid !important; }
}

/* ---------- layout splits ---------- */
@media (max-width: 900px) {
  [data-r="split"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r="cardbar"] { flex-wrap: wrap !important; gap: 14px !important; }
}

@media (max-width: 680px) {
  [data-r="split2"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* case-study hero meta square stops being a square once it is full width */
@media (max-width: 900px) {
  [data-tg="meta-square"] { aspect-ratio: auto !important; }
  [data-tg="meta-square"] > * { min-height: 128px !important; }
}

@media (max-width: 520px) {
  [data-tg="meta-square"] { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; }
}

/* ---------- mobile polish ---------- */
@media (max-width: 760px) {
  [data-tg="marquee-track"] > div { gap: 40px !important; padding-right: 40px !important; }
  [data-tg="totop"] { right: 14px !important; bottom: 14px !important; width: 44px !important; height: 44px !important; }
  [data-tg="nav-logo"] { height: 22px !important; }
  [data-r="pillrow"] { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
  [data-r="pillrow"]::-webkit-scrollbar { display: none; }
  [data-r="pillrow"] > * { flex: 0 0 auto !important; }
}

@media (max-width: 480px) {
  [data-r="stackbtn"] { flex-direction: column !important; align-items: stretch !important; }
  [data-r="stackbtn"] > a, [data-r="stackbtn"] > button { justify-content: center !important; }
}