/* AI-Powered Activation page — Figma: AI Pages › 194:1686 (1728px frame).
   Shared pieces (header, hero, services, video, insights, CTA/footer) are in moncur-site.css. */

/* ---------- The case: copy left, checklist in a hand-drawn box right ---------- */
.case2 {
  background: var(--cream);
  padding: max(64px, calc(100 * var(--px))) var(--gx-lg);
  display: grid;
  grid-template-columns: minmax(0, 640.5fr) minmax(0, 704.5fr);
  gap: max(40px, calc(95 * var(--px)));
}
.case2__text {
  display: flex;
  flex-direction: column;
  gap: max(14px, calc(20 * var(--px)));
}
.case2__art {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.case2__dots {
  position: absolute;
  left: max(16px, calc(32 * var(--px)));
  top: 0;
  width: calc(100% - 2 * max(16px, calc(32 * var(--px))));
  height: 100%;
  overflow: visible;
}
.js-motion .case2__dots {
  opacity: 0;
  transition: opacity 1s linear 0.1s;
}
.js-motion .case2__art:has(.checks.is-in) .case2__dots {
  opacity: 1;
}
.checks {
  position: relative;
  width: 100%;
  margin-top: calc(218.5 * var(--px));
} /* Figma: list starts 218.5px below the column top */
.checks__list {
  list-style: none;
  margin: 0;
  padding: 0 max(16px, calc(32 * var(--px)));
  display: flex;
  flex-direction: column;
  gap: max(12px, calc(20 * var(--px)));
}
.checks li {
  display: flex;
  align-items: center;
  gap: max(6px, calc(9 * var(--px))); /* row dividers removed in Figma */
  font: 700 max(20px, calc(30 * var(--px)))/1.25 var(--f-wide);
}
.checks li img {
  height: auto;
  flex: none;
}
/* the four brush sides of the box, placed in % of the list box (Figma: 672.5 × 370) */
.checks__side {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  max-width: none;
  pointer-events: none;
}
/* each check stamps in with its own line of text (same stagger as the row reveal) */
.js-motion .checks li img {
  transform: scale(0) rotate(-20deg);
  transition: transform 0.55s var(--ease-out) calc(0.3s + var(--i, 0) * 80ms);
}
.js-motion .checks li.is-in img {
  transform: none;
}

/* ---------- What we build: this page's tiles are taller in Figma (474 / 444 vs 450 / 400) ---------- */
.svc .svc-tile {
  min-height: max(320px, calc(474 * var(--px)));
}
.svc .svc__row + .svc__row .svc-tile {
  min-height: max(300px, calc(444 * var(--px)));
}

/* ---------- Our technology: rolling verb over an outlined "OUR TEAM" ---------- */
.tech {
  background: var(--sand);
  padding: max(64px, calc(100 * var(--px))) var(--gx);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: max(32px, calc(32 * var(--px)));
  overflow: visible;
}
.tech__text {
  display: flex;
  flex-direction: column;
  gap: max(18px, calc(32 * var(--px)));
}
/* "Try the Moncur AI Advisor" + hand-drawn arrow curving down toward the advisor (Figma 276:144 / 276:150) */
.tech__cta {
  position: relative;
  align-self: flex-start;
}
.tech__arrow {
  z-index: 10;
  position: absolute;
  left: calc(100% + 8 * var(--px));
  top: 0;
  width: clamp(180px, 14vw, 200px);
  max-width: none;
  pointer-events: none;
  --ang: 70deg;
  --dd: 0.55s;
  --dur: 0.8s;
}
.tech__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  min-height: max(160px, calc(220 * var(--px)));
}
.tech__outline {
  position: absolute;
  left: 8.3%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
  font: 900 min(calc(207 * var(--px)), 28cqw)/1 var(--f-xnarrow);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--cream);
}
.tech__roll {
  position: relative;
  display: flex;
  align-items: center;
  gap: min(calc(32 * var(--px)), 4cqw);
}
.tech__roll img {
  height: auto;
  flex: none;
  margin-right: -1.5rem;
}
.tech__win {
  height: 1em;
  overflow: hidden;
  font: 900 var(--roll-size, min(calc(90 * var(--px)), 9cqw))/1 var(--f-xnarrow); /* --roll-size set by moncur-site.js so the longest phrase fits */
  text-transform: uppercase;
  color: #000;
}
.tech__track {
  display: flex;
  flex-direction: column;
  animation: techRoll 7.5s var(--ease-io) infinite;
}
.tech__track span {
  height: 1em;
  white-space: nowrap;
}
.js-motion .tech__roll img {
  animation: techCheck 7.5s var(--ease-out) infinite;
}
@keyframes techRoll {
  /* 3 phrases + the first repeated: each holds ~2s */
  0%,
  26.67% {
    transform: translateY(0);
  }
  33.33%,
  60% {
    transform: translateY(-1em);
  }
  66.67%,
  93.33% {
    transform: translateY(-2em);
  }
  100% {
    transform: translateY(-3em);
  }
}
@keyframes techCheck {
  /* the check re-stamps as each phrase lands */
  0%,
  33.33%,
  66.67%,
  100% {
    transform: scale(0.4) rotate(-15deg);
    opacity: 0;
  }
  5%,
  26%,
  38.33%,
  59.3%,
  71.67%,
  92.6% {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tech__win {
    height: auto;
  }
  .tech__track span:last-child {
    display: none;
  }
}

@media (max-width: 900px) {
  .checks {
    margin: 40px 0;
  }
  .case2,
  .tech {
    grid-template-columns: minmax(0, 1fr);
  }
  .tech__art {
    order: -1;
  }
}

/* Human-Built Brands page — Figma: AI Pages › 185:826 (1728px frame).
   Shared pieces (header, hero, services, video, work, insights, CTA/footer) are in moncur-site.css. */

/* ---------- Philosophy: copy left, hand-drawn eye on a dot field right ---------- */
.phil {
  background: var(--cream);
  padding: max(64px, calc(100 * var(--px))) var(--gx-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: max(40px, calc(95 * var(--px)));
}
.phil__text {
  display: flex;
  flex-direction: column;
  gap: max(14px, calc(20 * var(--px)));
}

/* the illustration box is the Figma right column (672.5 × 553); every piece is placed in % of it */
.phil__art {
  position: relative;
  align-self: start;
  width: 100%;
  aspect-ratio: 672.5 / 553;
}
.phil__art > * {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  max-width: none;
}
.phil__dots {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.phil__dot {
  border-radius: 50%;
  background: var(--blue);
}

/* motion: dots settle in, the eye is drawn, the pupil pops in, arrows strike at it */
.js-motion .phil__dots {
  opacity: 0;
  transition: opacity 1s linear 0.1s;
}
.js-motion .phil__art.is-in .phil__dots {
  opacity: 1;
}
.js-motion .phil__dot {
  transform: scale(0);
  transition: transform 0.6s var(--ease-out) 1.15s;
}
.js-motion .phil__art.is-in .phil__dot {
  transform: none;
} /* pops in, then stays put */

@media (max-width: 900px) {
  .phil {
    grid-template-columns: minmax(0, 1fr);
  }
  .phil__art {
    max-width: 520px;
  }
}

:is(.btn-v2, .work-v2__card):hover {
  text-decoration: none;
}