/* Moncur site - "new look" sections from the ai-pages branch
   Homepage "What we do", plus the shared header, hero, services, work, insights, CTA/footer,
   brush/scribble motion and custom cursors used by Human-Built Brands and AI-Powered Activation.
   Defines its own :root tokens (--px, --blue, --f-*). Loaded after work.css, before motion.css and ai-pages.css. */

/* Homepage › "What we do" (new section) — Figma: Home page 185:300 › frames 185:386 (heading) + 185:755 (two columns).
   Shared tokens, buttons, cursor and motion come from moncur-site.css / moncur-motion.css. */

/* ---------- heading block ---------- */
.wwd-head {
  padding: max(64px, calc(100 * var(--px))) 20px;
  background: linear-gradient(1.56deg, #0064ff 27.4%, #0057e0 106.1%);
  color: #fff;
  text-align: center;
}
.wwd-head__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(24px, calc(41 * var(--px)));
}
.wwd-title {
  margin: 0;
  font:
    900 max(84px, calc(200 * var(--px)))/0.75 owners-xnarrow,
    var(--f-xnarrow);
  text-transform: uppercase;
  text-box: trim-both cap alphabetic;
}
.wwd-sub {
  margin: 0;
  max-width: max(300px, calc(696 * var(--px)));
  font: 500 max(22px, calc(40 * var(--px)))/1 var(--f-wide);
  letter-spacing: 0.06em;
  text-box: trim-both cap alphabetic;
}
/* brush underline: 622.5 x 66.5, centred, 112px below the top of the title (Figma) */
.wwd-underline {
  position: absolute;
  left: 50%;
  top: calc(112 * var(--px));
  width: max(260px, calc(622.5 * var(--px)));
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---------- two columns ---------- */
.wwd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.wwd-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: max(32px, calc(52 * var(--px)));
  padding: max(56px, calc(100 * var(--px))) var(--gx-lg);
}
.wwd-col--human {
  background: var(--cream);
}
.wwd-col--ai {
  background: var(--sand);
}
.wwd-col h3 {
  margin: 0;
  font: 700 max(24px, calc(32 * var(--px)))/1 var(--f-wide);
  letter-spacing: 0.06em;
  color: #000;
  text-box: trim-both cap alphabetic;
}
.wwd-col--human h3 {
  color: var(--blue);
}
.wwd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wwd-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  font: 600 max(18px, calc(22 * var(--px)))/1.16 var(--f-body);
  letter-spacing: -0.02em;
  color: #000;
}
.wwd-ring {
  width: 40px;
  height: 40px;
  flex: none;
  overflow: visible;
}
.wwd-ring circle {
  fill: none;
  stroke: #000;
  stroke-width: 2;
}
.wwd-check {
  position: absolute;
  left: 10px;
  top: 0;
  width: 30px;
  height: 37px;
  pointer-events: none;
}

/* ---------- motion ----------
   heading: words slam up out of a mask -> brush underline strokes on under them -> subhead rises
   columns: column title rises -> each row: ring draws round, check stamps through it, text slides in (rows stagger,
   the AI column trails the Human column slightly) -> button rises */
.js-motion .wwd-title .wi {
  transform: translate3d(0, 105%, 0) scale(1.08);
  transform-origin: 50% 100%;
}
.js-motion .wwd-title.is-in .wi {
  transform: none;
}
.wwd-underline {
  --ang: 90deg;
  --dd: 0.75s;
  --dur: 0.75s;
}

.js-motion .wwd-row .wwd-ring circle {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.55s var(--ease-io)
    calc(var(--d, 0s) + var(--i, 0) * 120ms);
}
.js-motion .wwd-row .wwd-check {
  transform: scale(0) rotate(-25deg);
  transform-origin: 30% 85%;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)
    calc(var(--d, 0s) + var(--i, 0) * 120ms + 0.4s);
}
.js-motion .wwd-row .wwd-label {
  opacity: 0;
  transform: translate3d(-14px, 0, 0);
  transition:
    opacity 0.5s ease calc(var(--d, 0s) + var(--i, 0) * 120ms + 0.2s),
    transform 0.6s var(--ease-out)
      calc(var(--d, 0s) + var(--i, 0) * 120ms + 0.2s);
}
.js-motion .wwd-row.is-in .wwd-ring circle {
  stroke-dashoffset: 0;
}
.js-motion .wwd-row.is-in .wwd-check {
  transform: none;
}
.js-motion .wwd-row.is-in .wwd-label {
  opacity: 1;
  transform: none;
}
.wwd-col--ai {
  --d: 0.25s;
}

@media (max-width: 900px) {
  .wwd-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .wwd-col {
    padding-inline: 20px;
  }
  .wwd-underline {
    top: 46px;
  }
}

:root {
  --px: min(1px, 0.05787vw); /* 1 Figma px (100vw / 1728) */
  --blue: #0064ff;
  --blue-nav: #0057e0; /* header "Let's talk" button */
  --lblue: #99aefd;
  --sand: #eae0d6;
  --cream: #faf7f0;
  --ink: #121212;
  --grey: #7e7e7e;
  --f-owners: "owners", "Owners", "Archivo", sans-serif;
  --f-wide: "owners-wide", "Owners Wide", "Archivo", sans-serif;
  --f-narrow: "owners-narrow", "Owners Narrow", "Archivo Narrow", sans-serif;
  --f-xnarrow:
    "owners-xnarrow", "Moncur XNarrow", "Big Shoulders Display", sans-serif;
  --f-body:
    "instrument-sans-variable", "Instrument Sans", system-ui, sans-serif;
  --gx: max(
    20px,
    calc(120 * var(--px)),
    calc((100vw - 1488px) / 2)
  ); /* 120px sections */
  --gx-lg: max(
    20px,
    calc(144 * var(--px)),
    calc((100vw - 1440px) / 2)
  ); /* 144px sections */
}

.sec {
  position: relative;
  overflow: hidden;
}

/* ---------- type ---------- */
.eyebrow-v2 {
  margin: 0;
  font: 600 max(14px, calc(20 * var(--px)))/1.2 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.h-sec {
  margin: 0;
  font: 700 max(30px, calc(48 * var(--px)))/1.208 var(--f-wide);
  color: var(--ink);
}
.copy {
  font: 400 max(16px, calc(18 * var(--px)))/1.778 var(--f-body);
  color: #000;
}
.copy p {
  margin: 0 0 1.778em;
}
.copy p:last-child {
  margin-bottom: 0;
}
.copy strong {
  font-weight: 700;
}

/* ---------- buttons ---------- */
.btn-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: max(36px, calc(39 * var(--px)));
  padding: 0 16px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font: 700 max(12px, calc(14 * var(--px)))/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.45s var(--ease-out);
}
.btn-v2:hover,
.btn-v2:focus-visible {
  background: #000;
  transform: translateY(-2px);
}
.btn-v2--white {
  background: #fff;
  color: var(--blue);
}
.btn-v2--white:hover,
.btn-v2--white:focus-visible {
  background: #000;
  color: #fff;
}

/* ---------- header (sits inside the hero) ---------- */
.site-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: max(16px, calc(32 * var(--px)));
  height: max(36px, calc(43 * var(--px)));
}
.site-nav__logo {
  margin-right: auto;
  width: max(64px, calc(81 * var(--px)));
}
.site-nav__logo img {
  width: 100%;
  height: auto;
}
.site-nav .btn-v2 {
  background: var(--blue-nav);
  width: max(118px, calc(142 * var(--px)));
}
.site-nav__menu {
  all: unset;
  cursor: pointer;
  width: max(26px, calc(31 * var(--px)));
  padding: 6px 0;
}
.site-nav__menu img {
  width: 100%;
  height: auto;
}
.site-nav__menu:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* ---------- hero ---------- */
.hero-v2 {
  @media (width >= 1280px) {
    min-height: max(560px, calc(723 * var(--px)));
  }

  box-sizing: border-box;
  background: var(--ink);
  color: #fff;
  padding: max(16px, calc(20 * var(--px))) var(--gx-lg)
    max(64px, calc(100 * var(--px)));
}
.hero-v2__body {
  position: relative;
  z-index: 1;
  max-width: max(320px, calc(870 * var(--px)));
  margin-top: 7rem;
  display: flex;
  flex-direction: column;
  gap: max(16px, calc(24 * var(--px)));
}
.hero-v2 .eyebrow-v2 {
  color: #fff;
}
.hero-v2__title {
  margin: 0;
  font: 700 max(44px, calc(100 * var(--px)))/1.1 var(--f-wide);
  color: #fff;
}
.hero-v2__title .accent {
  color: var(--blue);
}
.hero-v2__lede {
  margin: 0;
  max-width: max(300px, calc(750 * var(--px)));
  font: 400 max(17px, calc(22 * var(--px)))/1.4545 var(--f-body);
  color: #fff;
}

/* the hand-drawn brush circle around the key word ("human" / "knows") */
.brush-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate;
} /* circle sits BEHIND the word (Figma layer order), for legibility */
.brush-mark__art {
  z-index: -1;
  position: absolute;
  left: var(--l, -7%);
  top: var(--t, -23%);
  width: var(--w, 108%);
  height: var(--h, 145%);
  max-width: none;
  pointer-events: none;
}

/* outlined words drifting behind the hero */
.hero-v2__marquee {
  position: absolute;
  inset: 0;
  pointer-events: none;
  container-type: size;
}
.hero-v2__row {
  position: absolute;
  left: 0;
  display: flex;
  width: max-content;
  white-space: nowrap;
  font: 700 55.33cqh/1 var(--f-narrow);
  color: transparent;
  -webkit-text-stroke: max(1px, calc(1.5 * var(--px))) #333; /* lighter than Figma's 3px (feedback: reduce banner weight) */
  animation: marquee 110s linear infinite;
  will-change: transform;
}
.hero-v2__row span {
  padding-right: 0.3em;
}
.hero-v2__row--1 {
  top: 0.55cqh;
}
.hero-v2__row--2 {
  top: 52.84cqh;
  animation-direction: reverse;
  animation-duration: 130s;
  -webkit-text-stroke-width: 1px;
} /* Figma: 2px vs 3px on the top row */
.hero-v2__row--3 {
  display: none;
}
/* phones: three rows at a third of the hero each (two would mean ~280px letters showing only fragments) */
@media (max-width: 600px) {
  .hero-v2__row {
    font-size: 36cqh;
  }
  .hero-v2__row--1 {
    top: -2cqh;
  }
  .hero-v2__row--2 {
    top: 32cqh;
  }
  .hero-v2__row--3 {
    display: flex;
    top: 66cqh;
    animation-duration: 120s;
    -webkit-text-stroke-width: 1px;
  }
}

/* ---------- services ("What we build") ---------- */
.svc {
  background: #fff;
  padding: max(64px, calc(104 * var(--px))) var(--gx);
}
.svc .h-sec {
  margin-bottom: max(32px, calc(52 * var(--px)));
}
.svc__rows {
  display: flex;
  flex-direction: column;
  gap: max(20px, calc(52 * var(--px)));
}
.svc__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(20px, calc(52 * var(--px)));
}
.svc__row + .svc__row {
  column-gap: max(20px, calc(40 * var(--px)));
}
.svc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: max(8px, calc(12 * var(--px)));
  min-height: max(320px, calc(450 * var(--px)));
  padding: max(24px, calc(32 * var(--px)));
  overflow: hidden;
}
.svc__row + .svc__row .svc-tile {
  min-height: max(300px, calc(400 * var(--px)));
}
.svc-tile h3 {
  margin: 0;
  font: 700 max(24px, calc(32 * var(--px)))/1.5 var(--f-owners);
}
.svc-tile p {
  margin: 0;
  font: 400 max(16px, calc(18 * var(--px)))/1.778 var(--f-body);
}
/* icon sits top-left, aligned with the card text; the text block stays anchored to the bottom */
.svc-tile .tile__icon {
  position: static;
  align-self: flex-start;
  height: max(96px, calc(160 * var(--px)));
  width: auto;
  max-width: 100%;
  margin-bottom: auto;
  padding-bottom: max(16px, calc(24 * var(--px)));
  box-sizing: content-box;
}
/* spot illustrations (Figma 289:409 … 289:464): 200×200 art = back shape | photo cutout | front marks, sitting at the Figma offset */
.tile__spot {
  position: relative;
  flex: none;
  align-self: flex-start;
  width: max(120px, calc(200 * var(--px)));
  aspect-ratio: 1;
  margin: calc(var(--top, 0) * var(--px)) 0 auto;
}
.tile__spot img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  pointer-events: none;
}
/* plays once as the tile lands: shape springs in → photo arrives → front marks pop.  --sd = this tile's start, staggered with the row */
.js-motion .tile__spot {
  --sd: calc(0.25s + var(--i, 0) * 80ms);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js-motion .spot__back {
  opacity: 0;
  transform: scale(0.35) rotate(var(--spin, 0deg));
  transition:
    transform 0.9s var(--spring) var(--sd),
    opacity 0.3s linear var(--sd);
}
.js-motion .spot__photo {
  opacity: 0;
  transform: translate3d(0, 14%, 0) scale(0.94);
  transition:
    transform 0.85s var(--ease-out) calc(var(--sd) + 0.2s),
    opacity 0.4s linear calc(var(--sd) + 0.2s);
}
.js-motion .spot__front {
  opacity: 0;
  transform: scale(0) rotate(-18deg);
  transition:
    transform 0.6s var(--spring) calc(var(--sd) + 0.65s),
    opacity 0.2s linear calc(var(--sd) + 0.65s);
}
.js-motion .svc-tile.is-in .spot__back,
.js-motion .svc-tile.is-in .spot__photo,
.js-motion .svc-tile.is-in .spot__front {
  opacity: 1;
  transform: none;
}
/* per-illustration character */
.spot--strategy .spot__back {
  transform-origin: 49% 70%;
}
.js-motion .spot--strategy .spot__photo {
  transform: translate3d(0, -22%, 0);
  transition-timing-function: var(--spring), linear;
} /* blocks drop onto the triangle */
.js-motion .spot--messaging .spot__photo {
  transform: translate3d(-14%, 4%, 0) rotate(-8deg);
} /* lips slide into the bubble */
.js-motion .spot--identity .spot__photo {
  transform: scaleY(0.08);
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.15), linear;
} /* the eye opens */
.spot--website .spot__front {
  transform-origin: 40% 70%;
}
.js-motion .spot--website .spot__front {
  transform: translate3d(-12%, 10%, 0) scale(0.2);
} /* browser window pops out of the screen */
.spot--ai-strategy .spot__back {
  transform-origin: 50% 82%;
}
.js-motion .spot--ai-strategy .spot__back {
  transform: scaleX(0.15);
} /* pedestal slides open */
.js-motion .spot--ai-strategy .spot__photo {
  transform: translate3d(0, -26%, 0);
  transition-timing-function: var(--spring), linear;
} /* knight is set down on it */
.spot--ai-strategy .spot__front {
  transform-origin: 38% 22%;
}
.spot--ai-tools .spot__photo {
  transform-origin: 30% 30%;
}
.js-motion .spot--ai-tools .spot__photo {
  transform: rotate(-35deg) scale(0.9);
  transition-timing-function: var(--spring), linear;
} /* wrench swings in */
.js-motion .spot--demand-gen .spot__photo {
  transform: translate3d(-22%, 6%, 0);
} /* hand reaches in with the magnet */
.js-motion .spot--demand-gen .spot__front {
  transform: none;
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 260%
    100% no-repeat;
  mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 260% 100%
    no-repeat;
  transition:
    -webkit-mask-position 0.7s var(--ease-out) calc(var(--sd) + 0.75s),
    mask-position 0.7s var(--ease-out) calc(var(--sd) + 0.75s),
    opacity 0.1s linear calc(var(--sd) + 0.75s);
}
.js-motion .svc-tile.is-in .spot--demand-gen .spot__front {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
} /* …and the dots are pulled in, one after another */
.js-motion .spot--collateral .spot__photo {
  transform: translate3d(0, 16%, 0) rotate(6deg);
}
/* hover: the art leans in a touch (a transition, not a replay) */
.js-motion .svc-tile.is-in:hover .spot__photo {
  transform: translate3d(0, -3%, 0);
  transition: transform 0.5s var(--ease-out) 0s;
}
.js-motion .svc-tile.is-in:hover .spot__back {
  transform: rotate(-4deg) scale(1.03);
  transition: transform 0.6s var(--ease-out) 0s;
}
.js-motion .svc-tile.spot-done .tile__spot img {
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .tile__spot img {
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }
}
.svc-tile--blue {
  background: var(--blue);
  color: #fff;
}
.svc-tile--lblue {
  background: var(--lblue);
  color: #262626;
}
.svc-tile--sand {
  background: var(--sand);
  color: #262626;
}
.svc-tile--black {
  background: #000;
  color: #fff;
}
.svc-tile--lblue p,
.svc-tile--sand p {
  color: #000;
}
.js-motion .svc-tile.is-in:hover {
  transform: translate3d(0, -6px, 0);
  transition: transform 0.5s var(--ease-out);
}
.svc__cta {
  position: relative;
  display: inline-block;
  margin-top: max(32px, calc(52 * var(--px)));
}

/* ---------- video slot (Figma: video fill on a dotted black frame) ---------- */
.reel {
  background: #000;
}
.reel__frame {
  position: relative;
  width: min(100%, 88vh * 16 / 9);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: #000 url("../assets/video/moncur-manifesto-poster.webp") center /
    contain no-repeat;
}
.reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- selected work ---------- */
.work-v2 {
  background: var(--sand);
  padding: max(64px, calc(100 * var(--px))) var(--gx);
}
.work-v2 .h-sec {
  margin-bottom: max(24px, calc(32 * var(--px)));
}
.work-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: max(16px, calc(24 * var(--px)));
}
.work-v2__card {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: max(10px, calc(16 * var(--px)));
  text-decoration: none;
}
.work-v2__img {
  aspect-ratio: 480 / 303.16;
  overflow: hidden;
}
.work-v2__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.work-v2__card:hover .work-v2__img img,
.work-v2__card:focus-visible .work-v2__img img {
  transform: scale(1.05);
}
.work-v2__card h3 {
  margin: 0;
  font: 500 max(18px, calc(22 * var(--px)))/1.2 var(--f-wide);
  color: #262626;
}
.work-v2__card p {
  margin: 0;
  font: 400 max(16px, calc(18 * var(--px)))/1.778 var(--f-body);
}

/* ---------- related insights ---------- */
.insights-v2 {
  background: #f5f5f5;
  padding: max(64px, calc(100 * var(--px))) var(--gx);
}
.insights-v2 .h-sec {
  margin-bottom: max(8px, calc(24 * var(--px)));
}
.insights-v2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.insights-v2 a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: max(96px, calc(238 * var(--px)));
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px solid var(--grey);
  text-decoration: none;
  color: #000;
  font: 700 max(19px, calc(30 * var(--px)))/1.25 var(--f-wide);
}
.ins-title {
  transition: color 0.3s;
}
/* hover image: 352 x 198, right edge, vertically centred (Figma Variant2) */
.ins-img {
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(352 * var(--px));
  aspect-ratio: 352 / 198;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(50% 0 50% 0);
  transform: translateY(-50%);
  transition: clip-path 0.55s var(--ease-out);
}
.ins-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 0.9s var(--ease-out);
}
.insights-v2 a:hover .ins-title,
.insights-v2 a:focus-visible .ins-title {
  color: #4a75ff;
}
.insights-v2 a:hover .ins-img,
.insights-v2 a:focus-visible .ins-img {
  clip-path: inset(0 0 0 0);
}
.insights-v2 a:hover .ins-img img,
.insights-v2 a:focus-visible .ins-img img {
  transform: none;
}
@media (hover: none), (max-width: 900px) {
  .ins-img {
    display: none;
  }
}

/* video sound toggle */
.reel__sound {
  position: absolute;
  right: max(16px, calc(32 * var(--px)));
  bottom: max(16px, calc(32 * var(--px)));
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 700 12px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    background-color 0.25s,
    border-color 0.25s;
}
.reel__sound:hover,
.reel__sound:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
}
.reel__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.reel__bars i {
  width: 2px;
  height: 30%;
  background: currentColor;
}
.reel__sound[aria-pressed="true"] .reel__bars i {
  animation: eq 0.9s ease-in-out infinite;
}
.reel__sound[aria-pressed="true"] .reel__bars i:nth-child(2) {
  animation-delay: -0.3s;
}
.reel__sound[aria-pressed="true"] .reel__bars i:nth-child(3) {
  animation-delay: -0.6s;
}
.reel__sound[aria-pressed="true"] .reel__bars i:nth-child(4) {
  animation-delay: -0.15s;
}
@keyframes eq {
  0%,
  100% {
    height: 30%;
  }
  50% {
    height: 100%;
  }
}

/* ---------- CTA + footer ---------- */
.cta-v2 {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  height: max(420px, calc(681 * var(--px)));
  box-sizing: border-box;
  padding-top: max(56px, calc(72 * var(--px)));
  text-align: center;
}
.cta-v2__script {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(1733 * var(--px));
  height: auto;
  max-width: none;
  transform: translate(
    -50%,
    29%
  ); /* % of its own height: the letters' feet dip just under the footer at every width */
  pointer-events: none;
}
.cta-v2__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(32px, calc(52 * var(--px)));
  padding: 0 20px;
}
.cta-v2__inner p {
  max-width: 28rem;
  font-size: 1.25rem;
}
.cta-v2 h2 {
  margin: 0;
  font: 500 max(30px, calc(50 * var(--px)))/1 var(--f-wide);
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.foot-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: max(24px, calc(32 * var(--px))) max(20px, calc(100 * var(--px)));
  background: #000;
  color: var(--grey);
  font: 700 14px/1.2 var(--f-body);
}
.foot-v2__social {
  display: flex;
  gap: 8px;
}
.foot-v2__social a {
  display: block;
  width: 40px;
  height: 40px;
  transition: opacity 0.25s;
}
.foot-v2__social a:hover {
  opacity: 0.7;
}
.foot-v2__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.foot-v2__links a {
  text-decoration: none;
}
.foot-v2__links a:hover {
  color: #fff;
}
.foot-v2__phone {
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
}

/* ==========================================================================
   Motion (only with JS + motion allowed; see moncur-motion.js)
   ========================================================================== */
/* Brush art "draws" along its own stroke direction (no hard edge-to-edge wipes):
   .reveal        soft-edged linear reveal from the stroke's tail to its tip at angle --ang
   .reveal--loop  sweeps around a closed loop (conic) starting at --from, like a pen going round
   --p animates 0% -> 100% (registered with @property so it can transition; older browsers just show the art). */
@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
.js-motion .reveal {
  --p: 0%;
  -webkit-mask-image: linear-gradient(
    var(--ang, 90deg),
    #000 calc(var(--p) * 1.15 - 15%),
    transparent calc(var(--p) * 1.15)
  );
  mask-image: linear-gradient(
    var(--ang, 90deg),
    #000 calc(var(--p) * 1.15 - 15%),
    transparent calc(var(--p) * 1.15)
  );
  transition: --p var(--dur, 0.9s) var(--ease-io) var(--dd, 0s);
}
.js-motion .reveal--loop {
  -webkit-mask-image: conic-gradient(
    from var(--from, 0deg) at var(--cx, 50%) var(--cy, 50%),
    #000 calc(var(--p) * 1.06 - 6%),
    transparent calc(var(--p) * 1.06)
  );
  mask-image: conic-gradient(
    from var(--from, 0deg) at var(--cx, 50%) var(--cy, 50%),
    #000 calc(var(--p) * 1.06 - 6%),
    transparent calc(var(--p) * 1.06)
  );
}
.js-motion .is-in .reveal,
.js-motion .reveal.is-in {
  --p: 100%;
}

/* brush underline under a phrase: grows left to right, follows line wraps */
.brush-line {
  background: url("../assets/figma/underline-brush.svg") left
    calc(100% + 0.1em) / 100% 0.42em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.12em;
}
.js-motion .brush-line {
  background-size: 0% 0.42em;
  transition: background-size 1s var(--ease-io) var(--dd, 0.5s);
}
.js-motion .is-in .brush-line {
  background-size: 100% 0.42em;
}

/* scribble struck through a phrase (stroked SVG: real pen draw) */
.scribble-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.scribble-mark svg {
  position: absolute;
  left: var(--l, -4%);
  top: var(--t, 22%);
  width: var(--w, 108%);
  height: var(--h, 58%);
  overflow: visible;
  pointer-events: none;
}
.scribble-mark path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.js-motion .scribble-mark path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.8s var(--ease-io) var(--dd, 0.6s);
}
.js-motion .is-in .scribble-mark path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2__row {
    animation: none;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .svc__row,
  .work-v2__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot-v2 {
    flex-direction: column;
    text-align: center;
  }
  .hero-v2__title br,
  .cta-v2 h2 br {
    display: none;
  }
  .svc-tile,
  .svc__row + .svc__row .svc-tile,
  .svc .svc-tile,
  .svc .svc__row + .svc__row .svc-tile {
    min-height: 0;
  }
  .btn-v2 {
    white-space: normal;
    height: auto;
    min-height: 39px;
    padding: 10px 16px;
    line-height: 1.3;
    text-align: center;
  }
}

/* ---------- custom cursor: the Moncur blue dot (mouse / trackpad only) ---------- */
.has-dot-cursor,
.has-dot-cursor * {
  cursor: none;
}
.has-dot-cursor input,
.has-dot-cursor textarea {
  cursor: text;
}
.dot-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px #fff; /* white ring keeps it visible on blue sections */
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition:
    opacity 0.2s,
    width 0.25s var(--ease-out),
    height 0.25s var(--ease-out),
    margin 0.25s var(--ease-out),
    box-shadow 0.25s;
}
.dot-cursor.is-visible {
  opacity: 1;
}
.dot-cursor.is-text {
  opacity: 0;
}
.dot-cursor.is-down {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}

/* hand-drawn circle scribbled around the link/button under the cursor (drawn by moncur-site.js) */
.hover-loop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  overflow: visible;
  pointer-events: none;
}
.hover-loop path {
  fill: none;
  stroke: var(--loop-c, var(--blue));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* dot grids: dots near the cursor turn blue — the one that stands apart */
.grid-dot {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.5s ease,
    transform 0.5s var(--ease-out);
}
.grid-dot.is-near {
  fill: var(--blue);
  transform: scale(2.2);
  transition-duration: 0.15s;
}

/* CTA that closes the philosophy / case copy (added in Figma) */
.phil__btn {
  align-self: flex-start;
}

/* page cursors: ink trail (Human-Built Brands), sparkles + pixel trail (AI-Powered Activation) */
.cursor-trail {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9997;
  pointer-events: none;
}
.dot-cursor--art {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: none;
  box-shadow: none;
}
.dot-cursor--art.is-down {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}
.cursor-stars {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--blue);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.js-motion .cursor-stars path {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 2.4s ease-in-out infinite;
}
.js-motion .cursor-stars path + path {
  animation-delay: -1.2s;
}
@keyframes twinkle {
  0%,
  60%,
  100% {
    transform: none;
  }
  25% {
    transform: scale(0.6) rotate(45deg);
  }
  40% {
    transform: scale(1.1) rotate(90deg);
  }
}