/* ------------------------------------------------------------------
   Breakpoints. Desktop values scale with --u down to the tablet range;
   the phone layout (< 810px) uses fixed sizes measured on the mobile
   recording (388 × 809 CSS px).
   ------------------------------------------------------------------ */

/* Tablet: keep proportions but relax the widest layouts */
@media (max-width: 1199px) and (min-width: 810px) {
  :root { --pad-container: calc(90 * var(--u)); }
  .stats__list { flex-wrap: wrap; justify-content: center; gap: 32px; }
  .stat { width: 200px; }
  .stat__card, .stat__label, .stat__tile { border-radius: 20px; }
  .stat__tile { height: 128px; }
  .stat__num { font-size: 66px; }
  .stat__unit { font-size: 21px; }
  .stat__label { font-size: 16px; min-height: 64px; }
  .projects { grid-template-columns: 1fr; }
  .card { height: 56vh; }
}

/* Phone */
@media (max-width: 809px) {
  :root {
    --pad-container: 24px;
    --pad-edge: 20px;
    --seq-zoom: 1;
  }

  .nav { padding: 22px 20px 0 20px; font-size: 15px; }
  .nav__links { gap: 22px; }

  /* Stage */
  .hero-title { left: 18px; bottom: 19vh; }
  .hero-title__kicker { font-size: 12px; letter-spacing: 0.42em; margin: 0 0 8px 0.15em; }
  .hero-title__word { font-size: 44px; letter-spacing: 0.1em; }

  .dot { width: 30px; height: 30px; margin-left: -15px; }
  .disc { clip-path: circle(15px at 50% 47%); }
  .stage.is-grown .disc { clip-path: circle(240vw at -178vw 47vh); }
  .focus-lead { font-size: 38px; left: 26vw; }

  .moon { --r: 78vw; left: calc(84vw - var(--r)); top: calc(45vh - var(--r)); }
  .stage.is-filled .moon { transform: scale(4); }
  .focus-words { left: 26vw; top: 45vh; }
  .focus-words__list { font-size: 30px; }

  /* Stats */
  .stats { padding: 64px 24px 0; }
  .stats__list { flex-direction: column; align-items: center; gap: 24px; }
  .stat { width: 200px; }
  .stat__card { border-radius: 22px; padding: 26px 22px; }
  .stat__tile { height: 136px; border-radius: 22px; }
  .stat__num { font-size: 60px; }
  .stat__unit { font-size: 22px; }
  .stat__label { font-size: 18px; border-radius: 22px; min-height: 60px; margin-top: 10px; }

  /* Services */
  .services { padding: 120px 24px 90px; }
  .eyebrow { font-size: 12px; }
  .services__title { font-size: 32px; margin-top: 22px; }
  .services__list { margin-top: 20px; }
  .service { display: block; padding: 28px 0; }
  .service__title { font-size: 30px; line-height: 1.1; }
  .service__sub { font-size: 16px; margin-top: 12px; padding-left: 0; }

  /* Clients */
  .clients__cols { grid-template-columns: 1fr; padding: 0 20px; }
  .clients__head { padding-top: 60px; padding-bottom: 0; }
  .clients__title { font-size: 26px; margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--white); }
  .clients__title br { display: none; }
  .logo-row { top: 160px; height: 78vh; padding-top: 70px; border-top: 0; }
  .logo-row + .logo-row { border-top: 1px solid var(--white); }
  .logo-grid { row-gap: 60px; column-gap: 16px; }
  .logo { max-width: 150px; max-height: 60px; }
  .logo--supercell { max-height: 66px; }
  .logo--vtt { max-width: 130px; }
  .logo--sanoma, .logo--me, .logo--finavia, .logo--danske { max-width: 150px; }
  .logo--stora { max-width: 120px; }
  .logo--metsa { max-width: 130px; }
  .logo--workspace { max-width: 140px; }

  /* Projects */
  .projects { grid-template-columns: 1fr; gap: 12px; padding: 12px 0 0; }
  .card { height: 78vh; border-radius: 14px; }
  .card__bar {
    left: 14px; right: 14px; bottom: 14px;
    height: 72px;
    grid-template-columns: 58% 1fr auto;
    padding: 0 18px;
    border-radius: 12px;
  }
  .card__title { font-size: 24px; }
  .card__meta { font-size: 13px; line-height: 1.25; }
  .card__arrow { width: 22px; height: 22px; }

  /* Footer */
  .footer { height: auto; min-height: 0; padding: 70px 24px 90px; }
  .footer__text { font-size: 34px; }
  .footer__arrow { width: 30px; height: 30px; }
  .footer__link { right: 24px; bottom: 40px; font-size: 15px; }
}