/* ------------------------------------------------------------------
   Normal-flow sections: stats, services, clients (sticky stack),
   project grid, footer
   ------------------------------------------------------------------ */

/* Stats ---------------------------------------------------------- */
.stats {
  background: var(--white);
  padding: calc(150 * var(--u)) var(--pad-container) 0;
}
.stats__list {
  display: flex;
  justify-content: space-between;
  gap: calc(24 * var(--u));
}
.stat {
  width: calc(192 * var(--u));
  text-align: center;
}
.stat__card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: calc(24 * var(--u));
  padding: calc(14 * var(--u));
}
.stat__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(128 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--black);
  color: var(--white);
}
.stat__num {
  font-size: calc(66 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat__unit {
  margin-top: calc(6 * var(--u));
  font-size: calc(21 * var(--u));
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
}
.stat__label {
  margin-top: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: calc(24 * var(--u));
  padding: calc(14 * var(--u)) calc(10 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  min-height: calc(64 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Services ------------------------------------------------------- */
.services {
  background: var(--white);
  padding: calc(230 * var(--u)) var(--pad-container) calc(200 * var(--u));
}
.services__title {
  margin-top: calc(28 * var(--u));
  font-size: calc(82 * var(--u));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.services__list {
  margin-top: calc(56 * var(--u));
  border-top: 1px solid var(--rule-on-white);
}
.service {
  display: grid;
  grid-template-columns: 1.3fr 1fr; /* titles stay on one line; sublines sit further right */
  align-items: center;
  padding: calc(68 * var(--u)) 0;
  border-bottom: 1px solid var(--rule-on-white);
}
.service:last-child { border-bottom: 0; }
.service__title {
  font-size: calc(62 * var(--u));
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
}
.service__sub {
  padding-left: calc(80 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 400;
  line-height: 1.3;
}

/* Clients + projects (black) ------------------------------------- */
.clients {
  background: var(--black);
  color: var(--white);
}
.clients__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 0 var(--pad-edge);
}
.clients__head {
  position: sticky;
  top: 0;
  padding-top: calc(48 * var(--u));
  padding-bottom: calc(40 * var(--u));
  background: var(--black);
  z-index: 1;
}
.clients__title {
  margin-top: calc(12 * var(--u));
  font-size: calc(82 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Stacked rows: each row sticks under the top edge; the next row's
   opaque container slides over the previous one (cover from below). */
.clients__rows { min-width: 0; }
.logo-row {
  position: sticky;
  top: calc(48 * var(--u));
  height: 60vh;
  padding-top: calc(80 * var(--u));
  background: var(--black);
  border-top: 1px solid var(--rule-on-black);
}
.logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: calc(60 * var(--u));
  column-gap: calc(24 * var(--u));
  justify-items: center;
  align-items: center;
}
.logo {
  width: auto;
  height: auto;
  max-width: calc(240 * var(--u));
  max-height: calc(70 * var(--u));
}
.logo--supercell { max-height: calc(78 * var(--u)); }
.logo--vtt       { max-width: calc(160 * var(--u)); }
.logo--helsinki  { max-height: calc(66 * var(--u)); }
.logo--sanoma    { max-width: calc(250 * var(--u)); }
.logo--me        { max-width: calc(250 * var(--u)); }
.logo--stora     { max-width: calc(180 * var(--u)); }
.logo--metsa     { max-width: calc(190 * var(--u)); }
.logo--finavia   { max-width: calc(250 * var(--u)); }
.logo--workspace { max-width: calc(210 * var(--u)); }
.logo--danske    { max-width: calc(250 * var(--u)); }

/* Project grid --------------------------------------------------- */
.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) 0 0;
  background: var(--black);
}
.card {
  position: relative;
  display: block;
  height: 62vh;
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  background: #111;
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__bar {
  position: absolute;
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  bottom: calc(16 * var(--u));
  height: calc(88 * var(--u));
  display: grid;
  grid-template-columns: 55% 1fr auto;
  align-items: center;
  padding: 0 calc(28 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--black);
  color: var(--white);
  transition: background-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card__title {
  font-size: calc(48 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}
.card__meta {
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: 1.3;
  color: var(--meta-grey);
  transition: color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card__arrow {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  color: var(--lime);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card__arrow svg { width: 100%; height: 100%; }
.card:hover .card__bar,
.card:focus-visible .card__bar { background: var(--white); color: var(--black); }
.card:hover .card__meta,
.card:focus-visible .card__meta { color: var(--text-grey); }
.card:hover .card__arrow,
.card:focus-visible .card__arrow { opacity: 1; transform: none; }

/* Footer --------------------------------------------------------- */
.footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  background: var(--white);
  color: var(--black);
  height: 43vh;
  min-height: calc(380 * var(--u));
  padding: calc(56 * var(--u)) var(--pad-edge) 0;
}
.footer__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__text {
  font-size: calc(168 * var(--u));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.footer__arrow {
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  color: var(--lime);
  transition: transform 0.3s ease;
}
.footer__arrow svg { width: 100%; height: 100%; }
.footer__cta:hover .footer__arrow { transform: translate(4px, -4px); }
.footer__link {
  position: absolute;
  right: var(--pad-edge);
  bottom: calc(60 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 400;
}
.footer__link:hover { text-decoration: underline; }