/* ==========================================================================
   Fully Ups — responsive rules
   Large desktop ≥ 1600 · Desktop (base) · Tablet ≤ 1023 · Mobile ≤ 699
   ========================================================================== */

/* Large desktop ----------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --max: 1440px; }
  body { font-size: 1.125rem; }
  .is-horizontal .svc-card { width: 32rem; }
}

/* Small desktop / landscape tablet --------------------------------------- */
@media (max-width: 1199px) {
  .nav__inner { gap: 1.25rem; }
  .nav__link { padding-inline: .75rem; }
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .value:nth-child(4) { border-left: 0; }
  .value:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__services a { padding-inline: 1rem; font-size: .9375rem; }
}

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  :root { --nav-h: 72px; }

  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav.is-scrolled { height: 60px; }

  .display { font-size: clamp(2.75rem, 8.4vw, 4.25rem); }
  .h1 { font-size: clamp(2.5rem, 6.6vw, 3.5rem); }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding-bottom: 0; }
  .hero__lead { max-width: 30ch; }
  .eco { max-width: 40rem; margin-inline: auto; }
  .hero__services ul { grid-template-columns: repeat(2, 1fr); }
  .hero__services li:nth-child(odd) { border-left: 0; }
  .hero__services li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hero__services li:nth-child(odd) a { padding-left: 0; }
  .hero__services li:nth-child(even) a { padding-left: 1.5rem; }

  .split, .section-head { grid-template-columns: 1fr; }
  .section-head .body { justify-self: start; }
  .why__head { position: static; }

  .rise { --rise-step: 0rem; }
  .rise__steps { grid-template-columns: 1fr; gap: 0; }
  .rise__step { position: relative; padding: 0 0 2.5rem 3rem; }
  .rise__step:last-child { padding-bottom: 0; }
  .rise__node { position: absolute; left: 0; top: .35rem; }
  .rise__step .num, .rise__icon { margin-top: 0; }
  .rise__step p { max-width: 46ch; }

  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }

  .page-hero--split .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__art { max-width: 34rem; }

  .svc-list { grid-template-columns: 1fr; }
  .svc-preview { display: none; }
  .svc-row__art { display: block; margin-top: .5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
  .svc-row__art .ill { width: 100%; max-width: 30rem; height: auto; margin-inline: auto; }

  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure:nth-child(3) { padding-left: 0; border-left: 0; }
  .figure:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 2.25rem; }

  .contact { grid-template-columns: 1fr; }
  .outcomes { grid-template-columns: 1fr; }
  .outcome, .outcome + .outcome { padding: 1.75rem 0; border-left: 0; }
  .outcome + .outcome { border-top: 1px solid var(--line); }
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 699px) {
  body { font-size: 1rem; }
  .display { font-size: clamp(2.5rem, 12.4vw, 3.25rem); }
  .h1 { font-size: clamp(2.25rem, 10.4vw, 2.75rem); }
  .h2 { font-size: clamp(1.875rem, 8.4vw, 2.5rem); }

  .btn-row .btn { flex: 1 1 100%; }
  .hero .btn-row { margin-top: 1.75rem; }
  .hero__services ul { grid-template-columns: 1fr; }
  .hero__services li:nth-child(n) { border-left: 0; }
  .hero__services li:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .hero__services li:nth-child(n) a { padding: 1.1rem 0; }
  .eco__chip--code { display: none; }

  .steps3 { grid-template-columns: 1fr; }
  .steps3__item, .steps3__item + .steps3__item { padding: 1.75rem 0; border-left: 0; }
  .steps3__item + .steps3__item { border-top: 1px solid var(--line); }
  .steps3__item .h3 { margin-top: 1rem; }

  .track { grid-template-columns: 1fr; }
  .svc-card { min-height: 0; padding: 1.5rem; }
  .svc-card__art .ill { max-height: 13rem; }

  .why__item { grid-template-columns: 1fr; gap: .5rem; }
  .why__item:hover h3 { transform: none; }

  .values { grid-template-columns: 1fr; }
  .value { padding: 1.5rem; }
  .value + .value, .value:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .value h3 { margin-top: 1.5rem; min-height: 0; }

  .story__row { grid-template-columns: 1fr; }
  .figure strong { font-size: 3rem; }

  .svc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-row .num { grid-column: 1 / -1; padding-top: 0; }
  .svc-row:hover, .svc-row.is-active { padding-left: 0; }
  .svc-row__go { width: 2.75rem; height: 2.75rem; }

  .chooser a { grid-template-columns: minmax(0, 1fr) auto; }
  .chooser__need { grid-column: 1 / -1; }
  .chooser a:hover { padding-inline: 0; }

  .includes { grid-template-columns: 1fr; }
  .platforms { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .platform { min-height: 0; gap: 1rem; padding: 1.5rem; }
  .next svg { display: none; }

  .form { grid-template-columns: 1fr; gap: 1.25rem; }
  .field input, .field select, .field textarea { font-size: 1rem; }   /* prevents iOS zoom */
  .form__foot .btn { width: 100%; }

  .cta__bg svg { opacity: .4; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; }
  .footer { padding-bottom: 2rem; }
  .wa__btn { width: 3.25rem; height: 3.25rem; }
}

/* Touch devices: drop hover-only motion ---------------------------------- */
@media (hover: none) {
  .svc-card::before { display: none; }
  .value::before { display: none; }
  .value:hover { color: inherit; }
  .value:hover p { color: var(--charcoal); }
  .next:hover { background: var(--white); color: inherit; }
  .next:hover small { color: var(--charcoal); }
}