/* ==========================================================================
   Collabrum Advisory — Responsive
   Breakpoints and type steps are the reference's measured transformations,
   taken at 1440 / 1366 / 1280 / 1024 / 991 / 768 / 480 / 390 / 375.
   ========================================================================== */

/* ---------- ≤1366 — hero type steps down ---------------------------------- */

@media (max-width: 1366px) {
  :root {
    --text-5xl: 53px;
  }
}

/* ---------- ≤1200 — split columns loosen ---------------------------------- */

@media (max-width: 1200px) {
  :root {
    --section-pad:    95px;
    --section-pad-lg: 110px;
  }

  .split--content { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}

/* ---------- ≤1024 — tablet: header swaps, columns halve ------------------- */

@media (max-width: 1024px) {
  :root {
    --text-5xl:         55px;
    --text-4xl:         48px;
    --banner-pad-top:   180px;
    --banner-pad-bottom:96px;
  }

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

  .split,
  .split--content {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .split--keep { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≤991 — body type steps down ------------------------------------ */

@media (max-width: 991px) {
  :root {
    /* Reference holds the section heading at 50px right down to 480 and only
       steps the body copy here, so --text-3xl is deliberately untouched. */
    --text-base: 15.68px;
    --text-2xl:  28px;
  }
}

/* ---------- ≤767 — three-up collapses to two ------------------------------- */

@media (max-width: 767px) {
  :root {
    --section-pad:    80px;
    --section-pad-sm: 64px;
    --section-pad-md: 72px;
    --text-4xl:       42px;
  }

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

  .section-title__heading { max-width: none; }
}

/* ---------- ≤560 — everything single column -------------------------------- */

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

/* ---------- ≤480 — mobile type scale --------------------------------------- */

@media (max-width: 480px) {
  :root {
    --text-5xl:   35px;
    --text-4xl:   34px;
    --text-3xl:   37.6px;
    --text-2xl:   26px;
    --text-xl:    21px;
    --text-base:  15.04px;

    --section-pad:      64px;
    --section-pad-sm:   52px;
    --section-pad-md:   58px;
    --banner-pad-top:   140px;
    --banner-pad-bottom:72px;
  }

  .btn {
    height: 52px;
    padding-left: 24px;
    font-size: var(--text-sm);
  }

  .btn--block { height: 54px; }

  .card__body      { padding: 32px 22px; }
  .step            { padding: 44px 22px 32px; }
  .service-card__body { padding: 28px 22px 32px; }

  .feature__icon { width: 64px; height: 64px; }

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

  .tag { height: 48px; padding: 0 22px; font-size: var(--text-sm); }
}

/* ---------- Print ----------------------------------------------------------- */

@media print {
  .to-top,
  .site-header,
  .drawer,
  .scrim { display: none !important; }

  body { color: #000; background: #fff; }

  .reveal,
  .split-text .char { opacity: 1 !important; transform: none !important; }
}