/* Buildhaus motion choreography , shared CSS for /motion.js hooks
   Restrained, additive. Loads on every page below the inline <style> block,
   so it overrides nothing critical and adds only the new behaviours. */

/* ─── Reading progress bar (top edge) ───────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--yellow, #FBDC11);
  z-index: 100;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.08s linear;
  pointer-events: none;
  mix-blend-mode: normal;
}

/* ─── Word-by-word slide-up reveal on h2/h3 / [data-split-words] ────── */
[data-split-words] .word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
  /* Generous top + bottom padding so italic descenders / ascenders + the
     yellow highlight band underneath em words never get clipped on the
     way in or once settled. */
  padding: 0.22em 0.04em 0.22em;
  margin: -0.22em -0.04em -0.22em;
}
[data-split-words] .word-inner {
  display: inline-block;
  transform: translateY(108%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
[data-split-words].words-in .word-inner {
  transform: translateY(0);
  opacity: 1;
}
/* After the animation completes the mask is no longer needed , release
   overflow so any italic-band tail can render. We wait the full 1.6s
   (1s transition + 0.6s max stagger delay) before releasing. */
[data-split-words].words-in {
  --release-delay: 1.6s;
}
[data-split-words].words-in .word-wrap {
  animation: word-unmask 0.01s linear forwards;
  animation-delay: var(--release-delay);
}
@keyframes word-unmask {
  to { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  [data-split-words] .word-inner {
    transform: none; opacity: 1; transition: none;
  }
}

/* ─── Tile image parallax (set by motion.js) ────────────────────────── */
[data-tile-img] {
  overflow: hidden;
}
[data-tile-img] img {
  transition: transform 0.1s linear, filter 0.4s ease;
}

/* ─── Mobile responsiveness, shared upgrades ────────────────────────── */
@media (max-width: 600px) {
  /* Form submit + the hero/page CTAs stretch full-width for tap targets */
  .submit, .btn.primary, .btn.ghost, .quote-gate-btn, .call-cta {
    width: 100%;
    justify-content: center;
  }
  /* Hero action row stacks cleanly */
  .hero .actions { flex-direction: column; align-items: stretch; }
  /* Reduce h1 max width on mobile so words don't break weirdly */
  .hero h1 { max-width: 22ch; }
}
@media (max-width: 760px) {
  /* Hero ledger labels , bump readability on small screens */
  .hero-ledger .l { font-size: 10px !important; letter-spacing: 0.15em !important; line-height: 1.4; }
  .hero-ledger .n { font-size: 22px !important; }
  /* Pivot stats , same treatment */
  .pivot .stats .stat .l { font-size: 10px !important; letter-spacing: 0.15em !important; line-height: 1.4; }
  .pivot .stats .stat .n { font-size: 26px !important; }
  /* FAQ items breathe on mobile */
  .faq-list { gap: 4px !important; }
  /* Work cards stay close to square on phones so the varied preview photos
     (landscapes, a square, portraits) crop naturally instead of stretching. */
  .work-track .work-tile { aspect-ratio: 5 / 6; }
  /* Service cards drop side numbers gently */
  .service-icon svg, .cap-icon svg, .step-icon svg { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
  /* Pivot footer headline + button stack cleanly */
  .pivot .head { gap: 22px !important; margin-bottom: 36px !important; }
  .pivot .start-btn { padding: 18px 28px !important; font-size: 14px !important; }
  /* Nav drawer takes up the whole screen on tiny phones */
  .nav-drawer { padding-top: 80px !important; }
  /* Card padding tightens */
  .bench-card { padding: 24px !important; }
  .work-row-btn { font-size: 12px; padding: 18px 16px !important; }
  /* WhoWeServe / capabilities grid items get more breathing room */
  .wws-cell, .cap-row { padding: 8px 0; }
}

/* ─── iframe friendly: tablet sweet spot ────────────────────────────── */
@media (min-width: 601px) and (max-width: 899px) {
  /* Work cards on tablet: two in view, near-square crop reads cleanly across
     the varied preview photos without the old over-tall stretch. */
  .work-track .work-tile { aspect-ratio: 5 / 6; }
  /* Capabilities matrix stacks on tablet , two-column grid was too tight */
  .cap-matrix { grid-template-columns: 1fr !important; gap: clamp(32px, 4vw, 48px); }
}