/* Thank you page.

   Two rows of square service tiles riding a sine wave in opposite
   directions. Nothing is muted — the picked tiles stand out by being
   larger, swinging further through the wave, sitting forward, and
   carrying a tick. */

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #f3f1ee;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
img { max-width: 100%; }

/* No entrance animation on the copy — it's there the moment the page loads.
   The tick on each picked tile is the only thing that animates in. */

/* One screen: wave, copy, wave. The copy sits centred between the two rows
   and everything is visible without scrolling — the message is the point of
   the page, and so is seeing which services were ticked. */
.lgs-ty {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2vh;
  padding-top: 76px;
  background: #f3f1ee;
  color: #1a1a1a;
  position: relative;
  overflow: hidden;
}

/* ---------- the copy, between the two waves ---------- */
.lgs-ty-copy {
  position: relative;
  z-index: 2;
  flex: none;
  /* The rows are tall so the tile shadows aren't clipped, and most of that
     height is empty space above and below the tiles. Pulling the copy up
     into it keeps the heading and the line under it above the fold on a
     short laptop, which is where the actual message is. */
  padding: 2vh 6vw;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.lgs-ty-copy h1 {
  font-weight: 800;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
}

.lgs-ty-copy > p {
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.6;
  color: #555;
  margin: 26px auto 0;
  max-width: 620px;
}

.lgs-ty-copy strong { color: #1a1a1a; }

.lgs-ty-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a1a1a;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 16px 30px;
  border-radius: 999px;
  margin-top: 34px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}
.lgs-ty-btn:hover { transform: translateY(-2px); background: #d10a6f; }

.lgs-ty-note {
  font-size: 13.5px;
  color: #8a837c;
  margin: 14px 0 0;
}

/* ---------- the waves ---------- */
.lgs-ty-row {
  position: relative;
  /* No shadows on the tiles, so the row only has to hold the tallest tile
     and its swing: picked 186 + 2 x 30 = 246. The shadows were what forced
     these rows to 445px, which pushed the bottom wave off the screen. */
  height: 250px;
  overflow: hidden;            /* tiles ride out of frame at the edges */
  margin-bottom: 10px;
}

.lgs-ty-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.lgs-ty-tile {
  flex: 0 0 auto;
  width: 132px;
  margin: 0 13px;
  /* JS sets --y and --rot per tile from its position on the wave */
  transform: translateY(var(--y, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: none;
}

.lgs-ty-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  overflow: hidden;
}

/* a touch of shade so the name always reads */
.lgs-ty-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 45%, rgba(0, 0, 0, 0.42) 100%);
}

.lgs-ty-name {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ---------- picked ---------- */
.lgs-ty-tile.is-picked { width: 186px; }

.lgs-ty-tile.is-picked .lgs-ty-art {
  border-radius: 26px;
}

.lgs-ty-tile.is-picked .lgs-ty-name { font-size: 16px; }

.lgs-ty-tick {
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 11px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  transform: scale(0);
  animation: tyTick 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

@keyframes tyTick {
  from { transform: scale(0) rotate(-25deg); }
  to   { transform: scale(1) rotate(0deg); }
}

/* ---------- smaller screens ---------- */
@media (max-width: 860px) {
  .lgs-ty { padding-top: 30px; }
  /* picked tile 134 + 116 swing + 92 shadow */
  .lgs-ty-row { height: 200px; }
  .lgs-ty-tile { width: 96px; margin: 0 8px; }
  .lgs-ty-tile.is-picked { width: 134px; }
  .lgs-ty-name { font-size: 11px; }
  .lgs-ty-tile.is-picked .lgs-ty-name { font-size: 13px; }
  .lgs-ty-tick { width: 25px; height: 25px; top: 8px; right: 8px; }
}

/* ---------- reduced motion: lay it out still ---------- */
@media (prefers-reduced-motion: reduce) {
  .lgs-ty-in { animation: none; }
  .lgs-ty-tick { animation: none; transform: scale(1); }
  .lgs-ty-tile { transform: none !important; }
  .lgs-ty-row { height: auto; overflow: visible; }
  .lgs-ty-track { flex-wrap: wrap; justify-content: center; width: 100%; }
  .lgs-ty-track > .lgs-ty-tile:nth-child(n + 9) { display: none; }
}

/* The same wave on the About page, sitting between the hero and how we work.
   Scoped so it doesn't inherit the thank you page's own padding. */
.lgs-about-wave { margin: 2vh 0 6vh; }
/* Tall enough for the tile (132), the wave swing (±34) and the drop shadow
   (12px down, 28px blur) — the row clips at its edges, so anything tighter
   cuts the shadow off. */
.lgs-about-wave .lgs-ty-row { height: 290px; margin-bottom: 0; }

@media (max-width: 860px) {
  .lgs-about-wave { margin: 0 0 4vh; }
  /* 96 tile + 68 swing + shadow */
  .lgs-about-wave .lgs-ty-row { height: 250px; }
}


/* Short laptops. A 1440x700 screen doesn't have room for two full rows plus
   the copy at full size, so the rows and the heading come down a little.
   Everything stays on one screen, which is the point of the page. */
@media (min-width: 861px) and (max-height: 800px) {
  /* Tiles come down with the rows — a shorter row with the same tile just
     clips it. 148 + 2 x 30 swing = 208, inside the 215 row. */
  .lgs-ty-row { height: 215px; }
  .lgs-ty-tile { width: 108px; }
  .lgs-ty-tile.is-picked { width: 148px; }
  .lgs-ty-name { font-size: 11px; }
  .lgs-ty-tile.is-picked .lgs-ty-name { font-size: 13px; }
  .lgs-ty-tick { width: 26px; height: 26px; top: 9px; right: 9px; }

  .lgs-ty-copy h1 { font-size: clamp(34px, 4.4vw, 56px); }
  .lgs-ty-copy > p { margin-top: 14px; font-size: clamp(15px, 1.2vw, 17px); }
  .lgs-ty-copy { padding: 1vh 6vw; }
  .lgs-ty { gap: 0; padding-top: 64px; }
}