/* ==========================================================================
   OverToBot — Responsive overrides (desktop-first breakpoints)
   ========================================================================== */

@media (max-width: 1180px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-nav__link { padding: 8px 9px; font-size: 0.86rem; }
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillar { border-bottom: 1px solid var(--border); }
  .pillar:nth-child(3) { border-right: 0; }
  .pillar:nth-child(n + 4) { border-bottom: 0; }
}

@media (max-width: 1080px) {
  /* Switch to mobile navigation */
  .nav-toggle { display: inline-block; }
  .site-header__cta { display: none; }
  .site-nav {
    position: fixed;
    inset: var(--header-h-compact) 0 0 0;
    margin: 0;
    padding: 24px var(--gutter) 40px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms;
  }
  .site-header:not(.is-scrolled) .site-nav { inset-block-start: var(--header-h); }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li { border-bottom: 1px solid var(--border); }
  .site-nav__link { padding: 16px 4px; font-size: 1.15rem; font-family: var(--font-display); color: var(--text); border-radius: 0; }
  .site-nav__link:hover { background: none; color: var(--accent); }
  .site-nav__link[aria-current="page"] { color: var(--accent); }
  .site-nav__link[aria-current="page"]::after { display: none; }
  .site-nav.is-open .site-nav__list li { animation: nav-item-in 420ms var(--ease) both; }
  .site-nav.is-open .site-nav__list li:nth-child(2) { animation-delay: 30ms; }
  .site-nav.is-open .site-nav__list li:nth-child(3) { animation-delay: 60ms; }
  .site-nav.is-open .site-nav__list li:nth-child(4) { animation-delay: 90ms; }
  .site-nav.is-open .site-nav__list li:nth-child(5) { animation-delay: 120ms; }
  .site-nav.is-open .site-nav__list li:nth-child(6) { animation-delay: 150ms; }
  .site-nav.is-open .site-nav__list li:nth-child(7) { animation-delay: 180ms; }
  .site-nav.is-open .site-nav__list li:nth-child(8) { animation-delay: 210ms; }
  .site-nav__mobile-extra { display: grid; gap: 12px; margin-top: 28px; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 560px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
  .capability-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-row > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .capability-row > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
}

@keyframes nav-item-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 900px) {
  .grid--3, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before,
  .timeline__progress { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .timeline__progress { height: 0; bottom: auto; transition: height 1600ms var(--ease); }
  .timeline.is-visible .timeline__progress { width: 1px; height: calc(100% - 44px); }
  .timeline__step { padding: 0 0 36px 72px; min-height: 45px; }
  .timeline__step:last-child { padding-bottom: 0; }
  .flow--horizontal { grid-auto-flow: row; }
  .flow--horizontal .flow__node { flex-direction: row; text-align: left; justify-content: flex-start; padding: 14px 18px; }
  .flow--horizontal .flow__node small { margin-left: auto; }
  .flow--horizontal .flow__node:not(:last-child)::after { left: 50%; right: auto; top: auto; bottom: -15px; width: 1px; height: 14px; background: linear-gradient(var(--accent-line), transparent); }
  .compare { grid-template-columns: 1fr; }
  .compare__arrow .icon { transform: rotate(90deg); }
  .service-detail { grid-template-columns: 1fr; gap: 16px; }
  .check-list--cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; --header-h-compact: 58px; }
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--border); }
  .pillar:nth-child(n + 4) { border-bottom: 1px solid var(--border); }
  .pillar:last-child { border-bottom: 0; }
  .form__grid { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; }
  .hero__actions .btn { flex: 1 1 100%; }
  .cta-band__inner .btn { width: 100%; }
  .theme-toggle { width: 38px; height: 38px; }
  .brand { font-size: 1.1rem; }
  .brand__mark { width: 28px; height: 28px; }
  .pipeline__list { padding: 16px; }
  .pipeline__track { left: 38px; }
  .pipeline__state { display: none; }
  .pipeline__stage { grid-template-columns: 44px 1fr; }
  .capability-row { grid-template-columns: 1fr; }
  .capability-row > div { padding: 22px 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--border); }
  .capability-row > div:last-child { border-bottom: 0; }
  .accordion__panel p { padding-right: 4px; }
  .layer, .layer--model { width: 100% !important; }
  .toast-region { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .principle { grid-template-columns: 1fr; gap: 6px; }
}

@media print {
  .site-header, .site-footer, .toast-region, .consent, .hero__canvas, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Wide tables scroll horizontally on small screens instead of overflowing the page */
@media (max-width: 720px) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}