/* ==========================================================================
   WIZKET — responsive.css
   Breakpoints are reworked layouts, not shrunk desktop.
   ≥1600 large desktop · ≤1180 laptop · ≤960 tablet/mobile menu · ≤480 phone
   ========================================================================== */

/* Large desktop */
@media (min-width: 1600px) {
  :root {
    --nav-max: 1280px;
    --nav-max-scrolled: 1120px;
    --nav-top: 24px;
  }
}

/* Laptop */
@media (max-width: 1180px) {
  :root {
    --gutter: 20px;
  }

  .nav__link {
    padding: 0 18px;
  }

  .nav__pill {
    padding-left: 24px;
  }
}

/* Tablet & below — switch to the menu button + overlay */
@media (max-width: 960px) {
  :root {
    --gutter: 12px;
    --nav-top: 12px;
    --nav-top-scrolled: 8px;
    --nav-h: 58px;
    --nav-h-scrolled: 52px;
    --nav-max: 100%;
    --nav-max-scrolled: 100%;
  }

  .nav__pill {
    grid-template-columns: 1fr auto;
    padding: 0 7px 0 20px;
  }

  .nav__menu,
  .nav__cta-wrap,
  .svc-menu {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .mobile-menu {
    display: flex;
  }

  .nav__actions {
    gap: 8px;
  }

  .nav__logo-img {
    height: 24px;
  }

  .nav__progress {
    right: 32px;
    left: 32px;
  }

  .mobile-menu {
    padding-top: calc(var(--nav-top) + var(--nav-h) + 24px);
  }

  /* services tiles: three across on tablets */
  .mobile-menu__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mobile-menu__tiles > li:nth-child(-n + 3) {
    margin-top: 10px;
  }
  .mobile-menu__tiles > li:nth-last-child(-n + 3) {
    margin-bottom: 18px;
  }
}

/* Laptops just above the menu breakpoint — a narrower preview card */
@media (min-width: 961px) and (max-width: 1100px) {
  .svc-menu__panel {
    grid-template-columns: minmax(0, 1fr) 250px;
  }

  .svc-menu__big {
    font-size: 38px;
  }
}

/* Phone */
@media (max-width: 480px) {
  .nav__logo-img {
    height: 22px;
  }

  .theme-toggle,
  .menu-btn {
    width: 42px;
    height: 42px;
  }

  .mobile-menu__foot {
    margin-top: 28px;
  }

  .mobile-menu__foot .cta {
    height: 48px;
    padding: 0 30px;
  }
}

/* Phones (portrait) — two tiles across */
@media (max-width: 600px) {
  .mobile-menu__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* undo the third tile's spacing from the 3-across tablet grid */
  .mobile-menu__tiles > li:nth-child(3) {
    margin-top: 0;
  }
  .mobile-menu__tiles > li:nth-last-child(3) {
    margin-bottom: 0;
  }
}

/* Short landscape screens */
@media (max-width: 960px) and (max-height: 520px) {
  .mobile-menu {
    justify-content: flex-start;
  }

  .mobile-menu > nav {
    margin-top: 0;
  }

  /* an open Services grid takes its own full row */
  .mobile-menu__svc:has([aria-expanded="true"]) {
    flex-basis: 100%;
    order: 9;
  }

  .mobile-menu__list {
    flex-flow: row wrap;
    column-gap: 28px;
  }

  .mobile-menu__link {
    font-size: clamp(2.5rem, 11vh, 4rem);
  }
}

/* ==========================================================================
   Phone (≤700px) — section headings centred. Desktop / tablet layouts are untouched.
   Selectors are doubled-up (.sec .sec__x) so they win over each section's own stylesheet.
   ========================================================================== */
@media (max-width: 700px) {
  .about .about__eyebrow, .svc .svc__eyebrow, .gl .gl__eyebrow, .tm .tm__eyebrow {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; text-align: center;
  }
  /* mirror the little rule so the label sits between two lines */
  .about .about__eyebrow::after, .svc .svc__eyebrow::after, .gl .gl__eyebrow::after, .tm .tm__eyebrow::after {
    content: ""; width: 2.25rem; height: 1px; background: var(--line2);
  }
  .gl .gl__eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: var(--line2); }

  .about .about__copy, .svc .svc__head, .gl .gl__copy, .tm .tm__head { text-align: center; align-items: center; justify-items: center; }
  .about .about__title, .svc .svc__title, .gl .gl__title, .tm .tm__title { text-align: center; }
  .about .about__tag, .svc .svc__tag, .tm .tm__sub { text-align: center; margin-inline: auto; }
  .about .about__cta-wrap { justify-self: center; width: 100%; }

  .tm .tm__bar { flex-direction: column; justify-content: center; gap: 0.7rem; text-align: center; }
  .tm .tm__head { margin-top: 1.75rem; }
  .gl .gl__copy { display: flex; flex-direction: column; }
  .wk .wk-kicker { padding-inline: var(--gutter); }
}