/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta.is-ready .cta__body > *,
  .footer__nav a, .footer__totop,
  .faq__icon, .faq.is-ready .faq__a, .faq.is-ready .faq__a > div,
  .btn__icon, .btn__icon svg, .seg label span,  .svc, .svc__name, .switch__track, .switch__track::after,
  .step__card, .step__node, .step__no, .step__title, .step__desc,
  .rdot, .rdot circle, .rdot text { transition: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
  .hero { padding: 64px 0 0; }
  .column { gap: 18px; }
  .services { padding: 88px 20px 96px; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .process__body { grid-template-columns: minmax(0, 1fr); }
  .process__ring { display: none; }
}

@media (max-width: 800px) {
  .project { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 12px; }
  .project__media { min-height: 0; aspect-ratio: 1 / 1; }
  .project__body { padding: 8px 12px 14px; }
}

@media (max-width: 560px) {
  /* Case study rhythm: a heading sits close to its image (16px), sections are 40px apart,
     and images in the same section are 12px apart */
  .case { gap: 16px; padding-top: 40px; padding-bottom: 96px; }
  .case__h2 { margin-top: 24px; }
  .case__cta { margin-top: 0; }
  .media--shot + .media--shot { margin-top: -4px; }
  .media--logo { aspect-ratio: 4 / 3; }
}

@media (max-width: 800px) {
  .builder { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* the services become one scrolling row of chips so the price card stays right below */
  .builder__services {
    display: flex;
    gap: 8px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .builder__services::-webkit-scrollbar { display: none; }
  .svc-singles { display: contents; }
  .svc-group { display: none; }
  .svc { flex: none; display: block; padding: 11px 16px; border-radius: 10px; }
  .svc__desc, .svc__hint { display: none; }
  .svc__name { white-space: nowrap; font-size: 14px; }
  .svc:has(input:focus-visible) { outline-offset: -2px; }   /* an outside ring would be clipped by the row */
  .builder__card { min-height: 0; padding: 24px; }
}

@media (max-width: 800px) {
  .faq__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq__aside { position: static; }
  .faq__text, .faq__aside .btn { display: none; }   /* phones keep only the heading; the text and button are desktop-only */
  .quotes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .faq__list { padding: 2px 20px; }
  .faq__q { padding: 18px 0; font-size: 16px; }
  .faq__a p { padding-right: 0; }
}

@media (max-width: 800px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}

@media (max-width: 560px) {
  .footer__inner { padding-top: 36px; }
  .footer__brand { gap: 12px; }
  /* links fill the width in two even columns, with comfortable tap targets */
  .footer__nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
  .footer__nav ul { gap: 0; }
  .footer__nav a { padding: 11px 0; font-size: 16px; }
  .footer__bottom { margin-top: 28px; padding-top: 18px; }
}

@media (max-width: 560px) {
  /* Phones: the heading stays on one line (it scales with the screen) */
  .cta__title {
    white-space: nowrap;
    font-size: min(36px, calc((100vw - clamp(20px, 4vw, 48px) * 2 - var(--pad) * 2) / 11.6));
  }
}