/* ==========================================================================
   Moonlighters — responsive layouts (mobile-first; enhancements upward)
   Breakpoints: 576 / 768 / 992 / 1100 (desktop nav) / 1280
   ========================================================================== */

/* ---------- Very small phones (320px) ---------------------------------- */
@media (max-width: 374.98px) {
  :root { --header-h: 64px; }
  .brand { font-size: 1.125rem; }
  .brand-mark { width: 1.35rem; height: 1.35rem; }
  .menu-toggle { padding: .45rem .7rem; gap: .5rem; }
  .hero__actions .btn-ml, .svc-hero__actions .btn-ml { width: 100%; }
  .hero__index a { font-size: .9375rem; }
  .faq__q { grid-template-columns: 2rem 1fr 1rem; gap: .65rem; }
  .faq__a { padding-left: 2.65rem; padding-right: 0; }
  .board__note--a, .board__note--b { font-size: 8.5px; }
}

/* ---------- ≥ 576px ---------------------------------------------------- */
@media (min-width: 576px) {
  .form-ml__row--2 { grid-template-columns: 1fr 1fr; }
  .hero__index ol { grid-template-columns: repeat(4, 1fr); }
  .hero__index li { border-right: 1px solid var(--line); }
  .hero__index li:last-child { border-right: 0; }
  .hero__index li:nth-child(even) a, .hero__index a { padding-left: 1rem; }
  .hero__index li:first-child a { padding-left: 0; }
  .board__note--c { display: block; }
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ≥ 768px ---------------------------------------------------- */
@media (min-width: 768px) {
  .svc-row {
    grid-template-columns: 3.5rem 2.75rem minmax(0, 1fr) minmax(0, 1.1fr) 3rem;
    gap: 1.5rem; padding: 1.9rem 0;
  }
  .svc-row__icon { display: block; width: 2rem; height: 2rem; color: var(--lime); transition: color .3s, transform .5s var(--ease-out); }
  .svc-row:hover .svc-row__icon, .svc-row:focus-visible .svc-row__icon { color: var(--ink); transform: rotate(-8deg) scale(1.05); }
  .svc-row__num { align-self: center; padding: 0; }
  .svc-row__desc { grid-column: auto; }
  .svc-row__arrow { justify-self: end; }

  .pillars li { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.3fr); align-items: baseline; }

  .mosaic { grid-template-columns: repeat(12, 1fr); gap: 4rem 1.5rem; }
  .mosaic > :nth-child(4n + 1) { grid-column: span 7; }
  .mosaic > :nth-child(4n + 2) { grid-column: span 5; margin-top: 5rem; }
  .mosaic > :nth-child(4n + 3) { grid-column: span 5; }
  .mosaic > :nth-child(4n + 4) { grid-column: span 7; }
  .mosaic > :nth-child(4n + 2) .tile__visual, .mosaic > :nth-child(4n + 3) .tile__visual { aspect-ratio: 4 / 3.6; }

  .work-grid { grid-template-columns: 1fr 1fr; }

  .problems, .includes { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .includes { grid-template-columns: repeat(2, 1fr); }

  .phases { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; border-top: 0; }
  .phase { border-top: 1px solid var(--line); border-bottom: 0; }

  .guide__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }

  .principle { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
  .audiences { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }

  .post-row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 2.5rem; }
  .post-row__meta { flex-direction: column; grid-row: span 2; }
  .post-row__excerpt { grid-column: 2; }

  .stack__row { grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; align-items: baseline; }

  .related__short { display: block; }
  .related a { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1fr) auto; }

  .duo { grid-template-columns: 1fr 1fr; border-top: 0; column-gap: 3rem; }
  .duo__col { border-top: 1px solid var(--line); border-bottom: 0; }

  .prose-cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  .cta-band__row { grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer__wordmark { text-align: left; }
  .form-ml__foot { grid-template-columns: auto minmax(0, 1fr); }
}

/* ---------- ≥ 992px ---------------------------------------------------- */
@media (min-width: 992px) {
  .section__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: 4rem; }
  .section__head--stack { grid-template-columns: 1fr; }

  .hero__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
  .hero__title { position: relative; z-index: 2; }

  .statement__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
  .statement__label { padding-top: .6rem; }

  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
  .split__aside { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }

  .timeline { grid-template-columns: repeat(5, 1fr); gap: 2rem; }
  .timeline::before { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .timeline__step { padding: 2.75rem 0 0; }
  .timeline__node { top: 0; }
  .timeline__step:nth-child(even) { padding-top: 6.25rem; }

  .includes { grid-template-columns: repeat(3, 1fr); }

  .svc-hero__meta { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; gap: 4rem; }

  .svc-spread__item { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 3rem; align-items: start; }

  .article-layout { grid-template-columns: minmax(0, 1fr) 15rem; gap: 5rem; }
  .article-aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }

  .legal-layout { grid-template-columns: 16rem minmax(0, 1fr); gap: 5rem; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }

  .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 5rem; }
  .contact-aside { position: sticky; top: calc(var(--header-h) + 2rem); }

  .insights-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .insights-tools .cats { justify-content: flex-end; }

  .site-footer__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
}

/* ---------- ≥ 1100px: desktop navigation ------------------------------- */
@media (min-width: 1100px) {
  :root { --header-h: 80px; }
  .primary-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .menu-toggle, .js .menu-toggle, .menu-toggle--nojs { display: none !important; }
  .primary-nav { margin-left: auto; margin-right: 1rem; }
}
@media (max-width: 1099.98px) {
  .mobile-menu:not([open]) { display: none; }
}

/* ---------- ≥ 1280px --------------------------------------------------- */
@media (min-width: 1280px) {
  .hero__title { max-width: 15ch; }

  .timeline__text { max-width: none; }
}

/* ---------- Large desktop --------------------------------------------- */
@media (min-width: 1680px) {
  .container-wide { max-width: 1560px; }
}

/* ---------- Hover-capable pointers only -------------------------------- */
@media (hover: none) {
  .svc-row::before { display: none; }
  .svc-row:hover { color: var(--text); }
  .svc-row:hover .svc-row__desc { color: var(--muted); }
  .svc-row:hover .svc-row__num { color: var(--muted); }
}

/* ---------- Print ------------------------------------------------------ */
@media print {
  .site-header, .mobile-menu, .cta-band, .site-footer__wordmark, .to-top, .share, .hero__visual { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero, .article-head { padding-top: 1rem; }
  .prose { color: #000; }
}