/* ==========================================================================
   New Terminal IT Solution — newterminalmm.com
   responsive.css — width-based overrides only
   --------------------------------------------------------------------------
   Breakpoints (max-width):
     1280px  large laptop
     1080px  small laptop / landscape tablet  → nav collapses to hamburger
      900px  tablet
      720px  large phone landscape
      560px  phone
      400px  small phone
   Base (desktop) styles live in style.css.
   ========================================================================== */


/* ==========================================================================
   ≤ 1280px — large laptop
   ========================================================================== */
@media (max-width: 1280px) {
  :root { --container: 1080px; --gutter: 22px; }

  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solution-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hero__inner { gap: 48px; }
  .about__inner,
  .why__inner,
  .contact__inner { gap: 48px; }
}


/* ==========================================================================
   ≤ 1080px — navigation collapses to hamburger
   ========================================================================== */
@media (max-width: 1080px) {
  :root { --section-y: 72px; }

  html { scroll-padding-top: 84px; }
  :target { scroll-margin-top: 84px; }

  .nav-toggle { display: grid; }

  .site-header__inner { min-height: 68px; }

  /* Slide-down panel */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - 68px);
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(17, 24, 39, .1);
    overflow-y: auto;
    /* closed state */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
  }

  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li + li { border-top: 1px solid var(--border); }

  .nav__link {
    display: block;
    padding: 1rem .25rem;
    font-size: 1rem;
  }

  /* The desktop underline indicator makes no sense in a stacked menu */
  .nav__link::after { display: none; }

  .nav__link.is-active { color: var(--blue-500); }

  .nav__cta {
    margin-top: 1.25rem;
    width: 100%;
  }
}


/* ==========================================================================
   ≤ 900px — tablet
   ========================================================================== */
@media (max-width: 900px) {
  :root { --section-y: 64px; }

  .section-head { margin-bottom: 36px; }

  .hero { padding-block: 64px 76px; }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .hero__visual { justify-content: flex-start; }

  .terminal { max-width: 100%; }

  .about__inner,
  .why__inner,
  .contact__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .solution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

  .vm-grid { gap: 18px; }

  .cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-block: 56px;
  }

  .cta__action { text-align: left; }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .site-footer__brand { grid-column: 1 / -1; }
}


/* ==========================================================================
   ≤ 720px — large phone landscape
   ========================================================================== */
@media (max-width: 720px) {
  :root { --gutter: 20px; }

  body { font-size: 15.5px; line-height: 1.8; }

  .hero__title { line-height: 1.55; }

  .hero__desc { line-height: 1.9; }

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

  .vm-card { padding: 1.75rem 1.5rem; }

  .contact-form { padding: 1.6rem 1.35rem; }

  .cta__note { margin-inline: auto; }

  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   ≤ 560px — phone
   ========================================================================== */
@media (max-width: 560px) {
  :root {
    --section-y: 56px;
    --gutter: 18px;
    --radius-lg: 16px;
  }

  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.32rem; }

  .site-header__inner { min-height: 64px; }

  .brand__mark { width: 38px; height: 38px; border-radius: 10px; }
  .brand__mark svg { width: 23px; height: 23px; }
  .brand__name { font-size: .95rem; }
  .brand__tagline { font-size: .55rem; letter-spacing: .24em; }

  .hero { padding-block: 48px 64px; }
  .hero__inner { gap: 36px; }
  .hero__title { font-size: 1.5rem; }
  .hero__subtitle { font-size: .92rem; }
  .hero__desc { font-size: .94rem; }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
  }

  /* Full-width tap targets on phones (min 44px tall) */
  .hero__actions .btn { width: 100%; }

  .hero__chips { gap: .4rem; }
  .hero__chips li { font-size: .72rem; padding: .35rem .7rem; }

  .terminal__body { font-size: .72rem; line-height: 1.9; padding: .95rem 1rem 1.05rem; }
  .terminal__title { font-size: .66rem; }

  .service-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .solution-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  /* H3 — compact service cards: icon beside the text, tighter vertical rhythm,
     still full-width rows with ≥48px tap height. */
  .service-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    column-gap: .85rem;
    row-gap: 0;
    padding: 1.05rem 1.1rem;
  }

  .service-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    grid-row: 1 / span 2;
  }

  .service-card__title { margin-bottom: .2rem; min-height: 0; font-size: .97rem; }

  .service-card__text { font-size: .85rem; line-height: 1.75; }

  .capability { padding: 1.15rem 1.15rem; }
  .reason { padding: 1.15rem 1.15rem; }

  .btn--lg { --btn-pad-y: .85rem; --btn-pad-x: 1.4rem; min-height: 50px; font-size: .95rem; }

  .cta__inner { padding-block: 48px; }
  .cta__action { width: 100%; }
  .cta__action .btn { width: 100%; }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding-bottom: 36px;
  }

  .site-footer__tagline { margin-top: 1.25rem; }

  .to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}


/* ==========================================================================
   ≤ 400px — small phone (iPhone SE / 375px class)
   ========================================================================== */
@media (max-width: 400px) {
  :root { --gutter: 16px; }

  .hero__title { font-size: 1.38rem; }
  .section-title { font-size: 1.22rem; }

  .brand__tagline { letter-spacing: .18em; }

  .terminal__body { font-size: .66rem; }

  .vm-card { padding: 1.4rem 1.15rem; }
  .contact-form { padding: 1.35rem 1.1rem; }

  .contact-item { gap: .75rem; }
  .contact-item__icon { width: 38px; height: 38px; }
  .contact-item__value { font-size: .94rem; }
}


/* ==========================================================================
   Wide screens — ≥ 1600px (1920px class displays)
   ========================================================================== */
@media (min-width: 1600px) {
  :root {
    --container: 1280px;
    --container-wide: 1440px;
    --section-y: 104px;
  }

  .hero { padding-block: 96px 112px; }

  .service-card { padding: 1.7rem 1.55rem 1.8rem; }
  .hero__desc { font-size: 1.05rem; }
}


/* ==========================================================================
   Print — keep it legible and ink-light
   ========================================================================== */
@media print {
  .site-header,
  .to-top,
  .hero__backdrop,
  .hero__visual,
  .cta,
  .nav-toggle { display: none !important; }

  body { color: #000; background: #fff; font-size: 12pt; }

  .hero,
  .section--dark,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .hero *,
  .section--dark *,
  .site-footer * { color: #000 !important; }

  .section { padding-block: 16pt; break-inside: avoid; }

  .service-card,
  .solution,
  .vm-card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}