/* ==========================================================================
   Home page composition — spacing and layout only.
   All visual styles come from tokens.css / base.css / components.css.
   ========================================================================== */
:root {
  --gap-xl: clamp(5rem, 11vw, 13rem);   /* ~210px at 1920 */
  --gap-lg: clamp(4rem, 7vw, 8.5rem);   /* ~135px at 1920 */
}

/* a section that sits directly above a .panel reserves room for its rounded overlap */
.before-panel { padding-bottom: calc(var(--section-y) + var(--panel-radius) + var(--sp-6)); }

/* Intro + selected work */
.home-intro { padding-top: var(--gap-xl); padding-bottom: var(--gap-lg); }
.home-intro .kinetic { margin-bottom: var(--gap-xl); }
/* live scene: the pin supplies its own breathing room above and below */
.home-intro .kinetic.is-live { margin-top: calc(var(--gap-xl) * -1 + var(--panel-radius)); margin-bottom: var(--sp-6); }
.home-intro__eyebrow { margin-top: var(--gap-xl); margin-bottom: var(--sp-8); }
.home-intro .carousel--peek .carousel__track { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
.home-intro__all { margin-top: var(--sp-4); }

/* Capabilities */
.home-caps { padding-top: var(--gap-lg); }
.home-caps__lead { max-width: 24ch; margin-bottom: var(--gap-lg); }

/* Experience */
.home-xp { padding-top: var(--gap-lg); padding-bottom: var(--gap-lg); background-position: left center; }
.home-xp__stats { margin-top: var(--gap-lg); }
.home-xp__clients { margin-top: var(--gap-lg); padding-top: var(--sp-9); }
.home-xp__clients::before { content: ""; display: block; height: 1px; margin-top: calc(var(--sp-9) * -1); margin-bottom: var(--sp-9); background: var(--line); opacity: .6; }
.home-xp__clients .eyebrow { margin-bottom: var(--sp-8); }

/* Reviews */
.home-reviews { padding-top: var(--gap-lg); }
.home-reviews__cta { margin-top: var(--sp-9); }
.rv.is-live .home-reviews__cta { margin-top: 0; }

/* Tools, certificates, letters */
.home-creds { padding-top: var(--gap-lg); padding-bottom: var(--gap-lg); }
.home-creds__eyebrow { margin-top: var(--gap-lg); margin-bottom: var(--sp-8); }
.home-creds .creds.is-live { margin-top: var(--gap-lg); }

@media (max-width: 640px) {
  .home-intro .kinetic { margin-bottom: var(--gap-lg); }
  .home-intro .kinetic.is-live { margin-bottom: var(--sp-6); }
  .home-intro__eyebrow { margin-top: var(--gap-lg); }
}