/* ══════════════════════════════════════════════════
   PAGE STRUCTURE
   Page-level layout only (containers, page height) — not
   component styling, which lives in /styles.
   ══════════════════════════════════════════════════ */

/* ── SCROLL BEHAVIOR ─────────────────────────────── */
/* Smooth-scrolls anchor/JS-triggered jumps (nav links, the hero arrow).
   Scroll snapping was tried and removed — it felt too rigid/annoying. */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.site-hero,
.site-whatwedo,
.site-howitworks,
.site-services,
.site-portfolio,
.site-stats,
.site-clients,
.site-cta-banner,
.site-footer {
  /* clears the floating header so a section's own title/heading isn't
     hidden underneath it after a jump/anchor scroll lands on it */
  scroll-margin-top: 10rem;
}

.page{
  min-height:300vh;
  display:flex;
  justify-content:center;
  padding-top:16rem;
}

/* Placeholder pages (about/services/features/portfolio/contact) have no
   content yet — just header + empty <main> + footer. The header is
   position:fixed, so without this the footer would sit flush under it
   with nothing to clear it. Drop once each page gets real content. */
.empty-page{
  padding-top:14rem;
  min-height:40vh;
}

.page__hint{
  font-family:var(--fm);
  font-size:clamp(0.8rem,0.9vw,1.0rem); /* Label/Tag scale — no --fs-* token exists in tokens.css, this matches the documented clamp() by value */
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--t3);
  text-align:center;
}

/* ── SCROLL REVEAL ────────────────────────────────── */
/* Shared entrance animation for content pages, toggled by
   scripts/scroll-reveal.js. Same easing family as the homepage's
   How It Works card stagger, generalized for reuse. */
.reveal{
  opacity:0;
  transform:translateY(3rem);
  transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),
             transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-revealed{
  opacity:1;
  transform:translateY(0);
}

/* .reveal-stagger's direct children fade/slide individually, staggered —
   used for card grids (Values, Team) rather than the section as a whole. */
.reveal-stagger > *{
  opacity:0;
  transform:translateY(2.4rem);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),
             transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-stagger.is-revealed > *{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger.is-revealed > *:nth-child(1){ transition-delay:0s; }
.reveal-stagger.is-revealed > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.is-revealed > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.is-revealed > *:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.is-revealed > *:nth-child(5){ transition-delay:.32s; }
.reveal-stagger.is-revealed > *:nth-child(6){ transition-delay:.4s; }
.reveal-stagger.is-revealed > *:nth-child(7){ transition-delay:.48s; }
.reveal-stagger.is-revealed > *:nth-child(8){ transition-delay:.56s; }
.reveal-stagger.is-revealed > *:nth-child(9){ transition-delay:.64s; }

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-stagger > *{
    transition:none;
  }
}