/* Site-wide motion kit (2026-10-10), driven by fx.js. Every rule hangs off .fx-on, which
   fx.js only adds when motion is allowed, so without it the page is exactly as before. */

/* 1. progress line */
.fx-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #ff6b00, #ff9a4d); transform-origin: 0 50%; transform: scaleX(0); z-index: 100000; pointer-events: none; }

/* 2. words rise */
.fx-on .fx-words .fx-w { display: inline-block; opacity: 0; transform: translateY(0.55em) rotate(2deg); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--wi) * 55ms); }
.fx-on .fx-words.fx-in .fx-w { opacity: 1; transform: none; }

/* 4. cursor light on cards */
.fx-on .fx-spot { position: relative; isolation: isolate; }
.fx-on .fx-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,107,0,.12), transparent 45%); }
.fx-on .fx-spot:hover::before { opacity: 1; }

/* 5. buttons: magnetic pull is set inline by fx.js; this adds the jelly on hover */
@keyframes fxJelly { 0% { scale: 1 1; } 30% { scale: 1.07 .92; } 50% { scale: .95 1.05; } 70% { scale: 1.02 .98; } 100% { scale: 1 1; } }
.fx-on .btn-primary, .fx-on .btn-secondary, .fx-on .btn-cta, .fx-on .tm-more-btn { transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease, color .2s ease, box-shadow .2s ease; }
.fx-on .btn-primary:hover, .fx-on .btn-secondary:hover, .fx-on .btn-cta:hover, .fx-on .tm-more-btn:hover { animation: fxJelly .6s ease; }

/* 7. live grid + sparks behind service heroes */
.fx-on .fx-hero { position: relative; isolation: isolate; }
.fx-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-image: linear-gradient(rgba(20,22,31,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,22,31,.05) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 75%); }
@keyframes fxGridDrift { to { background-position: 48px 48px, 48px 48px; } }
.fx-on .fx-grid { animation: fxGridDrift 6s linear infinite; }
.fx-sp { position: absolute; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ff6b00); opacity: 0; }
.fx-sp3, .fx-sp4 { width: 2px; height: 90px; background: linear-gradient(180deg, transparent, #ff6b00); }
.fx-sp1 { top: 144px; } .fx-sp2 { top: 336px; } .fx-sp3 { left: 192px; } .fx-sp4 { right: 240px; }
@keyframes fxRunX { 0% { left: -100px; opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 70%, 100% { left: 110%; opacity: 0; } }
@keyframes fxRunY { 0% { top: -100px; opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 70%, 100% { top: 110%; opacity: 0; } }
.fx-on .fx-sp1 { animation: fxRunX 7s linear infinite; }
.fx-on .fx-sp2 { animation: fxRunX 9s linear 2.5s infinite; }
.fx-on .fx-sp3 { animation: fxRunY 8s linear 1.2s infinite; }
.fx-on .fx-sp4 { animation: fxRunY 10s linear 4s infinite; }
.fx-paused, .fx-paused * { animation-play-state: paused !important; }

/* 8. word band */
.fx-tk-wrap { overflow: hidden; padding: 20px 0 6px; }
.fx-ticker { overflow: hidden; background: #14161f; padding: 18px 0; transform: rotate(-1.2deg); margin: 0 -10px; box-shadow: 0 12px 30px rgba(20,22,31,.12); }
.fx-tk-track { display: flex; align-items: center; gap: 28px; width: max-content; }
.fx-tk-track span { font-family: 'Bricolage Grotesque', 'Outfit', sans-serif; font-weight: 800; font-size: clamp(22px, 3.4vw, 40px); letter-spacing: -0.01em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.4px #fff; }
.fx-tk-track span:nth-of-type(odd) { color: #fff; -webkit-text-stroke: 0; }
body .fx-tk-track span { line-height: 1.1; }
.fx-tk-track svg { width: 22px; height: 22px; fill: #ff6b00; flex: none; }
@keyframes fxTicker { to { transform: translateX(-50%); } }
.fx-on .fx-tk-track { animation: fxTicker 34s linear infinite; }

/* 9. sparks out of the form */
.fx-bloom { position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 5; background: var(--hue, #ff6b00);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: fxBloom .9s ease-out forwards; }
@keyframes fxBloom { 0% { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), -38px) scale(1.4) rotate(160deg); opacity: 0; } }

/* 10. tumble footer + 11. buddy */
.fx-tumble { text-align: center; padding: 70px 16px 0; background: #fbfaf8; overflow: hidden; }
.fx-tumble-word { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; text-decoration: none; font-family: 'Bricolage Grotesque', 'Outfit', sans-serif; font-weight: 800; font-size: clamp(56px, 13vw, 168px); line-height: 1; letter-spacing: -0.04em; color: #14161f; }
body .fx-tumble-word { color: #14161f !important; }
.fx-l { display: inline-block; transform-origin: 50% 100%; }
.fx-l:nth-child(4n+1) { color: #ff6b00; }
.fx-gap { display: inline-block; width: .28em; }
/* hidden only until the word first drops in; after that a hop must never hide a letter (Joel, 2026-10-10) */
.fx-on .fx-tumble:not(.fx-in) .fx-l { opacity: 0; transform: translateY(-120%) rotate(-12deg); }
@keyframes fxDrop { 0% { opacity: 0; transform: translateY(-120%) rotate(var(--r, -12deg)); } 60% { opacity: 1; transform: translateY(6%) rotate(2deg); } 78% { transform: translateY(-8%) rotate(-1deg); } 100% { opacity: 1; transform: none; } }
.fx-on .fx-tumble.fx-in .fx-l { animation: fxDrop .9s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--li) * 70ms); }
.fx-on .fx-tumble .fx-l:nth-child(even) { --r: 14deg; }
@keyframes fxHop { 0%, 100% { transform: none; } 40% { transform: translateY(-22%) rotate(-6deg); } 70% { transform: translateY(4%) rotate(2deg); } }
.fx-on .fx-tumble.fx-in .fx-l.fx-hop { animation: fxHop .5s ease both; }
.fx-tumble-sub { margin: 14px 0 0; font-size: 14px; color: #6b7080; }
body .fx-tumble-sub { color: #6b7080 !important; }
.fx-floor { position: relative; height: 96px; margin-top: 18px; border-bottom: 2px solid #14161f; cursor: pointer; }
.fx-buddy { position: absolute; left: 0; bottom: 0; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; transition: none; }
.fx-buddy svg { width: 56px; height: 56px; overflow: visible; }
.fx-b-body { fill: #ff6b00; }
.fx-b-eye { fill: #14161f; }
.fx-b-mouth { fill: none; stroke: #14161f; stroke-width: 2; stroke-linecap: round; }
@keyframes fxBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes fxWalk { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -8px; rotate: 4deg; } }
@keyframes fxJump { 0% { translate: 0 0; } 35% { translate: 0 -70px; rotate: 180deg; } 70% { translate: 0 -70px; rotate: 360deg; } 100% { translate: 0 0; rotate: 360deg; } }
.fx-on .fx-buddy svg { animation: fxBob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.fx-on .fx-buddy.fx-walk svg { animation: fxWalk .45s ease-in-out infinite; }
.fx-on .fx-buddy.fx-jump svg { animation: fxJump .8s cubic-bezier(.3,.7,.3,1); }
.fx-b-eye { animation: fxBlink 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fxBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* 12. hop dot */
.fx-hopdot { position: absolute; bottom: -6px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #ff6b00; opacity: 0; transition: left .35s cubic-bezier(.3,.7,.3,1), opacity .2s ease; pointer-events: none; }
.fx-hopdot.fx-show { opacity: 1; }
@keyframes fxHopDot { 0%, 100% { translate: 0 0; } 45% { translate: 0 -14px; } }
.fx-hopdot.fx-hopping { animation: fxHopDot .35s cubic-bezier(.3,.7,.3,1); }

/* 13. image trail */
.fx-trail-host { position: relative; overflow: hidden; }
.fx-trail { position: absolute; width: 140px; height: 88px; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 12px 30px rgba(20,22,31,.18); pointer-events: none; z-index: 0; rotate: var(--rot); animation: fxTrail 1.1s ease forwards; }
@keyframes fxTrail { 0% { opacity: 0; scale: .6; } 15% { opacity: 1; scale: 1; } 70% { opacity: 1; } 100% { opacity: 0; scale: .9; translate: 0 18px; } }
.fx-trail-host > h1, .fx-trail-host > p { position: relative; z-index: 1; }

/* 14. morphing Services menu */
@keyframes fxMorph { from { opacity: 0; clip-path: inset(0 30% 92% 30% round 18px); transform: translateY(-6px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: none; } }
@keyframes fxItem { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) {
  .fx-on .dropdown:hover .dropdown-content { animation: fxMorph .38s cubic-bezier(.2,.8,.2,1) both; }
  .fx-on .dropdown:hover .dropdown-content a { animation: fxItem .35s ease both; }
  .fx-on .dropdown:hover .dropdown-content a:nth-of-type(2) { animation-delay: .03s; } .fx-on .dropdown:hover .dropdown-content a:nth-of-type(3) { animation-delay: .06s; }
  .fx-on .dropdown:hover .dropdown-content a:nth-of-type(4) { animation-delay: .09s; } .fx-on .dropdown:hover .dropdown-content a:nth-of-type(5) { animation-delay: .12s; }
  .fx-on .dropdown:hover .dropdown-content a:nth-of-type(n+6) { animation-delay: .15s; }
}

@media (max-width: 600px) {
  .fx-ticker { padding: 12px 0; }
  .fx-tk-track svg { width: 16px; height: 16px; }
  .fx-floor { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-progress, .fx-grid, .fx-ticker { display: none !important; }
}

/* ---------- lower half (2026-10-10: "the lower half are plain") ---------- */
/* 15. signal dividers */
.fx-on .fx-div { position: relative; overflow: visible; transform-origin: 50% 50%; }
.fx-on .fx-div:not(.fx-in) { transform: scaleX(0); }
.fx-on .fx-div.fx-in { transform: scaleX(1); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.fx-div-spark { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #ff6b00; box-shadow: 0 0 14px 3px rgba(255,107,0,.55); opacity: 0; }
@keyframes fxDivRun { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.fx-on .fx-div.fx-in .fx-div-spark { animation: fxDivRun 3.2s ease-in-out .9s infinite; }

/* 16. icons bob */
@keyframes fxFloat { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -6px; rotate: -4deg; } }
.fx-on .fx-float { animation: fxFloat 4.2s ease-in-out infinite; animation-delay: var(--fd, 0s); }

/* 17. ambient sparks */
.fx-amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.fx-star { position: absolute; fill: #ff6b00; opacity: var(--so, .35); }
@keyframes fxStar { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } }
.fx-on .fx-star { animation: fxStar var(--sd, 12s) ease-in-out infinite; }

/* 19. second band: orange, running the other way */
.fx-tk-alt .fx-ticker { background: #ff6b00; transform: rotate(1.2deg); }
.fx-tk-alt .fx-tk-track span { -webkit-text-stroke-color: #14161f; }
.fx-tk-alt .fx-tk-track span:nth-of-type(odd) { color: #14161f; }
.fx-tk-alt .fx-tk-track svg { fill: #fff; }
@keyframes fxTickerRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.fx-on .fx-tk-alt .fx-tk-track { animation: fxTickerRev 38s linear infinite; }
@media (prefers-reduced-motion: reduce) { .fx-amb, .fx-tk-alt { display: none !important; } }

/* tumble footer action: one plain button, no instructions (2026-10-10) */
.fx-tumble-cta { margin: 26px 0 0; }
body .fx-tumble .fx-tumble-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: #25d366; color: #0b2e17 !important; font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: 0 10px 26px rgba(37,211,102,.28); transition: transform .2s ease, box-shadow .2s ease; }
body .fx-tumble .fx-tumble-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,211,102,.36); }
.fx-tumble-btn svg { width: 22px; height: 22px; }

/* bands: solid words only (Joel, 2026-10-10). Outlined text traced the overlapping strokes inside each
   glyph and drew stray lines through the letters. Alternate colour instead. */
.fx-tk-track span { -webkit-text-stroke: 0 !important; color: #fff; }
.fx-tk-track span:nth-of-type(even) { color: #ff9a4d; }
.fx-tk-alt .fx-tk-track span { color: #14161f; }
.fx-tk-alt .fx-tk-track span:nth-of-type(even) { color: #fff; }
body .fx-tk-track span { -webkit-text-stroke: 0 !important; }
body .fx-tk-wrap:not(.fx-tk-alt) .fx-tk-track span { color: #fff !important; }
body .fx-tk-wrap:not(.fx-tk-alt) .fx-tk-track span:nth-of-type(even) { color: #ff9a4d !important; }
body .fx-tk-alt .fx-tk-track span { color: #14161f !important; }
body .fx-tk-alt .fx-tk-track span:nth-of-type(even) { color: #fff !important; }

/* dividers carried 4rem margins inline; with section padding that left big empty bands (Joel, 2026-10-10) */
body .footer-divider { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
/* a .section-header is spaced for a card grid below it; when nothing follows (closing "Interested in" sections) that left ~120px of blank under the button */
body .section-header:last-child { margin-bottom: 0 !important; }