/* Scroll motion: "What we do" cards stack as you scroll.
   Plain CSS scroll-driven animation, inside an @supports/@media guard, so Firefox and
   reduced-motion visitors see the normal four-column row. To undo: remove this file,
   scroll.js and their two tags in index.html. */

/* Card visuals only appear with the stacked layout; the plain four-column row stays text-only. */
.svc-visual { display: none; }

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  .services-row {
    grid-template-columns: minmax(0, 1fr); gap: 5vh; border-top: 0;
    view-timeline: --sm-stack block; padding-bottom: 4vh;
  }
  .services-row > div:nth-child(n) {
    position: sticky; top: calc(var(--sm-hdr, 73px) + 24px + var(--i) * 16px);
    min-height: min(44svh, 340px); justify-content: flex-end; gap: 12px;
    padding: clamp(24px, 4vw, 48px); border: 1px solid var(--border); border-radius: 22px;
    background: var(--surface); box-shadow: var(--shadow); transform-origin: 50% 0; overflow: hidden;
  }
  .services-row > div:nth-child(even) { background: var(--surface-strong); }
  .services-row > div::after {
    content: ""; position: absolute; right: -12%; top: -40%; width: 55%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, var(--glow), transparent 65%); pointer-events: none;
  }
  .services-row > div h3 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; }
  .services-row > div p { font-size: 1.05rem; max-width: 40ch; }
  .services-row > div:nth-child(1) { --i: 0; --s: .88; }
  .services-row > div:nth-child(2) { --i: 1; --s: .92; }
  .services-row > div:nth-child(3) { --i: 2; --s: .96; }
  .services-row > div:nth-child(4) { --i: 3; }
  .services-row > div:nth-child(-n+3) { animation: sm-sink linear both; animation-timeline: --sm-stack; }
  .services-row > div:nth-child(1) { animation-range: contain 0% contain 100%; }
  .services-row > div:nth-child(2) { animation-range: contain 25% contain 100%; }
  .services-row > div:nth-child(3) { animation-range: contain 50% contain 100%; }
  @keyframes sm-sink { to { scale: var(--s); filter: brightness(.72); } }

  /* ---------- A visual on the right of each card (top on phones) ---------- */
  .services-row > div:nth-child(n) { min-height: min(52svh, 400px); }
  .services-row > div > h3, .services-row > div > p { position: relative; z-index: 2; max-width: 44%; }
  .services-row > div::after { z-index: 0; }
  .svc-visual {
    display: block; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 56%; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%);
  }
  .svc-visual img { display: block; }

  /* Web: a phone showing a real client site, peeking up from the bottom edge */
  .svc-web .svc-phone {
    position: absolute; left: 50%; top: 14%; width: min(46%, 230px); translate: -50% 0; rotate: -6deg;
    padding: 8px; border-radius: 34px; background: var(--surface-strong); border: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .svc-web .svc-phone img { width: 100%; height: auto; border-radius: 26px; }

  /* Search: a map with a pin and a listing card */
  .svc-search .svc-map {
    position: absolute; inset: 0;
    background: repeating-radial-gradient(circle at 62% 38%, transparent 0 34px, var(--radar-ring) 34px 35px), var(--surface-strong);
  }
  .svc-pin { position: absolute; left: 62%; top: 38%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--blip); box-shadow: 0 0 0 8px color-mix(in srgb, var(--blip) 18%, transparent), 0 0 22px var(--blip); }
  .svc-result {
    position: absolute; left: 14%; right: 8%; bottom: 10%; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px; align-items: center;
    padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .svc-result img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
  .svc-result div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .85rem; color: var(--text); }
  .svc-result b { color: var(--heading); font-weight: 500; font-size: 1rem; }
  .svc-result em { font-style: normal; color: var(--open); }
  .svc-result .svc-chips { grid-column: 1 / -1; flex-direction: row; gap: 8px; }
  .svc-chips span { flex: 1; text-align: center; padding: 7px 0; border-radius: 999px; border: 1px solid var(--border); color: var(--heading); }
  .svc-chips span.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  /* Social: a made-up Instagram profile, labelled Sample */
  .svc-ig { position: absolute; left: 18%; right: 8%; top: 10%; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); rotate: 3deg; }
  .svc-ig-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .svc-ig-head i { width: 36px; height: 36px; border-radius: 50%; background: url("images/sample-guesthouse.jpg") center / cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--blip); }
  .svc-ig-head div { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); }
  .svc-ig-head b { color: var(--heading); font-weight: 500; font-size: .92rem; }
  .svc-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 10px; overflow: hidden; }
  .svc-ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

  /* Content: the aerial fills the whole last card, text sits on a soft shade */
  .services-row > div:nth-child(4) .svc-visual { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .svc-content img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
  .svc-content::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 50%, transparent 75%); }
  .services-row > div:nth-child(4) > p { color: var(--heading); }

  @media (max-width: 700px) {
    .services-row > div:nth-child(n) { min-height: min(64svh, 520px); }
    .services-row > div > h3, .services-row > div > p { max-width: none; }
    .svc-visual {
      left: 0; width: auto; bottom: auto; height: 56%;
      -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent);
    }
    .svc-web .svc-phone { top: 10%; width: 44%; }
    .svc-result { left: 6%; right: 6%; bottom: 14%; }
    .svc-ig { left: 10%; right: 10%; top: 8%; }
    .services-row > div:nth-child(4) .svc-visual { height: 100%; }
    .svc-content::after { background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 45%, transparent 70%); }
  }
}
}