/* Behaviour styles for the static build. Page styling stays inline, as authored on the canvas. */
[hidden] { display: none !important; }

.lt-carousel { --pv: 3; }
@media (max-width: 900px) { .lt-carousel { --pv: 2; } }
@media (max-width: 560px) { .lt-carousel { --pv: 1; } }
.lt-slide { flex: 0 0 calc((100% - (var(--pv) - 1) * 16px) / var(--pv)); }
.lt-carousel button:disabled { opacity: 0.4; cursor: default; }
.lt-carousel button:focus-visible,
.lt-lightbox button:focus-visible { outline: 2px solid #2446D8; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .lt-track { transition: none !important; } }

/* Case-study headlines are 52px on the canvas; scale them down on phones. */
@media (max-width: 560px) { h1 { font-size: 36px !important; line-height: 1.12 !important; } }

/* Menu */
.lt-menu-btn:hover { background: #2B2B29 !important; }
.lt-menu-btn:focus-visible { outline: 2px solid #2446D8; outline-offset: 2px; }
@media (hover: none) {
  .lt-menu-btn { padding: 0 18px !important; }
  .lt-menu-btn kbd { display: none !important; }
}
.lt-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #141414 !important; font-size: 15px; font-weight: 500; text-decoration: none; }
.lt-menu-item.is-active { background: #F1F1EE; }

/* Phones: the same 24px side gutters on every page, and the Menu button pinned top right. */
@media (max-width: 560px) {
  body > div:first-of-type { padding-left: 24px !important; padding-right: 24px !important; }
  nav { flex-wrap: nowrap !important; }
}
/* Homepage: once the sidebar stacks above the work, lift the Menu button out of the filter row. */
@media (max-width: 995px) {
  [data-filter-tabs] ~ .lt-menu-btn { position: absolute; top: 42px; right: 40px; }
}
@media (max-width: 560px) {
  [data-filter-tabs] ~ .lt-menu-btn { right: 24px; }
}

/* Desktop: a more compact Menu button (20% smaller). Touch layouts keep the 44px target. */
@media (min-width: 996px) {
  .lt-menu-btn { min-height: 35px !important; padding: 0 8px 0 14px !important; gap: 8px !important; border-radius: 6px !important; font-size: 12px !important; }
  .lt-menu-btn kbd { padding: 2px 6px !important; border-radius: 5px !important; font-size: 10.5px !important; }
}

/* About: tighter cards and type on phones. */
@media (max-width: 560px) {
  .ab-card { padding: 24px !important; }
  .ab-card[style*="padding: 36px 36px 16px"] { padding: 24px 24px 8px !important; }
  .ab-lede { font-size: 18px !important; }
  .ab-display { font-size: 28px !important; }
}