/* Schreyer Data & Automation — MindMarket-system tokens + base */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url('assets/fonts/inter-var.woff2') format('woff2');
}

:root {
  --color-fresh-grass: #8ed462;
  --color-cream-paper: #f5f1e4;
  --color-ink-black: #2c2e2a;
  --color-pure-white: #ffffff;
  --color-sandstone: #e0dbce;
  --color-stone-gray: #80827f;
  --color-hairline-mist: #d5d5d4;
  --color-pure-ink: #000000;
  --color-sky-pop: #2ba0ff;
  --color-coral-pop: #ff705d;
  --color-sunshine-pop: #f5e211;

  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-body-sm: 15px; --leading-body-sm: 1.5;
  --text-body-lg: 18px; --leading-body-lg: 1.5;
  --text-subheading: 20px; --leading-subheading: 1.25;
  --text-heading-sm: 30px; --leading-heading-sm: 1.2;
  --text-heading: 53px; --leading-heading: 1.15; --tracking-heading: -2.12px;
  --text-heading-lg: 81px; --leading-heading-lg: 1.2; --tracking-heading-lg: -4.86px;
  --text-display: 140px; --leading-display: 0.95; --tracking-display: -8.4px;
  --text-display-lg: 144px; --leading-display-lg: 0.95; --tracking-display-lg: -8.64px;

  --spacing-4: 4px; --spacing-20: 20px; --spacing-60: 60px; --spacing-136: 136px; --spacing-216: 216px;
  --page-max-width: 1560px;
  --radius-small: 10px; --radius-nav: 50px; --radius-cards: 50px; --radius-buttons: 50px; --radius-illustration: 63.75px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-ink-black);
  background: var(--color-cream-paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; cursor: pointer; background: none; }



/* ---------------------------------------------------------------
   Decor clusters — three marks that drift apart and get pulled back
   in together, like they're magnetically tethered. Every mark has its
   own vector, rotation, tempo and phase, so nothing moves in lockstep.
   Transform-only, so they never reflow or change the page height.
   --------------------------------------------------------------- */

.decor-cluster {
  position: absolute;
  width: 132px;
  height: 118px;
  z-index: 0;
  pointer-events: none;
}

.decor-cluster img {
  position: absolute;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.decor-cluster .d1 { top: 0;      left: 38%; }
.decor-cluster .d2 { bottom: 4%;  left: 0;   }
.decor-cluster .d3 { bottom: 16%; right: 0;  }

@keyframes decor-out-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate(  3px, -14px) rotate( 6deg) scale(1.06); }
}
@keyframes decor-out-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate(-13px,   8px) rotate(-8deg) scale(1.06); }
}
@keyframes decor-out-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate( 13px,   9px) rotate( 5deg) scale(1.06); }
}
@keyframes decor-out-d {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate( -6px, -13px) rotate(-5deg) scale(1.06); }
}
@keyframes decor-out-e {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate( 14px,  -5px) rotate( 9deg) scale(1.06); }
}
@keyframes decor-out-f {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate(-11px,  11px) rotate(-7deg) scale(1.06); }
}

.decor-cluster-b .d1 { animation-name: decor-out-a; animation-duration: 7.4s; animation-delay: 0s; }
.decor-cluster-b .d2 { animation-name: decor-out-e; animation-duration: 7.0s; animation-delay: -1.9s; }
.decor-cluster-b .d3 { animation-name: decor-out-c; animation-duration: 7.8s; animation-delay: -3.1s; }
.decor-cluster-c .d1 { animation-name: decor-out-d; animation-duration: 8.6s; animation-delay: -3.4s; }
.decor-cluster-c .d2 { animation-name: decor-out-b; animation-duration: 8.2s; animation-delay: -0.7s; }
.decor-cluster-c .d3 { animation-name: decor-out-f; animation-duration: 9.0s; animation-delay: -5.2s; }
.decor-cluster-d .d1 { animation-name: decor-out-e; animation-duration: 6.8s; animation-delay: -0.8s; }
.decor-cluster-d .d2 { animation-name: decor-out-f; animation-duration: 7.2s; animation-delay: -2.9s; }
.decor-cluster-d .d3 { animation-name: decor-out-a; animation-duration: 6.4s; animation-delay: -4.4s; }
.decor-cluster-e .d1 { animation-name: decor-out-c; animation-duration: 7.9s; animation-delay: -4.1s; }
.decor-cluster-e .d2 { animation-name: decor-out-d; animation-duration: 7.5s; animation-delay: -1.2s; }
.decor-cluster-e .d3 { animation-name: decor-out-b; animation-duration: 8.3s; animation-delay: -6.0s; }
.decor-cluster-f .d1 { animation-name: decor-out-b; animation-duration: 6.3s; animation-delay: -2.6s; }
.decor-cluster-f .d2 { animation-name: decor-out-a; animation-duration: 6.7s; animation-delay: -5.1s; }
.decor-cluster-f .d3 { animation-name: decor-out-e; animation-duration: 5.9s; animation-delay: -0.4s; }

@media (prefers-reduced-motion: reduce) {
  .decor-cluster img { animation: none; }
}

@media (max-width: 1180px) {
  .decor-cluster { display: none; }
}


/* ---------------------------------------------------------------
   CTA hover — the dot hands itself from the right side to the left
   while the label slides across and squashes on the way.
   Both dots are absolutely positioned, so the swap costs no layout.
   --------------------------------------------------------------- */

.btn-swap {
  position: relative;
  overflow: hidden;                     /* dots scale away, never spill */
}

.btn-swap .btn-dot-l,
.btn-swap .btn-dot-r {
  position: absolute;
  top: 50%;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-swap .btn-dot-r { right: var(--btn-pad, 12px);  transform: translateY(-50%) scale(1); }
.btn-swap .btn-dot-l { left:  var(--btn-pad, 12px);  transform: translateY(-50%) scale(0); }

.btn-swap:hover .btn-dot-r,
.btn-swap:focus-visible .btn-dot-r { transform: translateY(-50%) scale(0); transition-delay: 0s; }

.btn-swap:hover .btn-dot-l,
.btn-swap:focus-visible .btn-dot-l { transform: translateY(-50%) scale(1); transition-delay: 0.12s; }

/* label rests where it always was, and springs right on hover */
.btn-swap .btn-label {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-swap:hover .btn-label,
.btn-swap:focus-visible .btn-label {
  animation: btn-slide-bounce 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes btn-slide-bounce {
  0%   { transform: translateX(0) scale(1); }
  45%  { transform: translateX(var(--btn-shift, 14px)) scale(0.92); }
  100% { transform: translateX(var(--btn-shift, 14px)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-swap .btn-dot-l, .btn-swap .btn-dot-r, .btn-swap .btn-label { transition: none; }
  .btn-swap:hover .btn-label, .btn-swap:focus-visible .btn-label { animation: none; }
}

/* anchored sections clear the floating nav pill */
#services, #about { scroll-margin-top: 108px; }