/* ============================================================
   LEADLY — STAGING OVERRIDES v3 — BENTO GRID
   Why Section: 5-card interactive bento grid
   ============================================================ */

/* ----------------------------------------------------------
   SECTION PARALLAX — subtle cross-section depth
   ---------------------------------------------------------- */
.hero-section,
.ps-section,
.services-section,
.testimonial-spotlight,
.products-section,
.cta-section,
.site-footer {
  --section-parallax-y: 0px;
}

.hero-backdrop,
.hero-copy,
.hero-cluster,
.ps-shell,
.services-header,
.services-stack,
.testimonial-spotlight-shell,
.products-shell,
.cta-shell,
.footer-shell,
.footer-wordmark-shell,
.footer-bottom-shell {
  will-change: transform, translate, opacity;
}

.hero-backdrop {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.22);
}

.hero-copy {
  translate: 0 calc(var(--section-parallax-y, 0px) * -0.12);
}

.hero-cluster {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.18);
}

.ps-shell {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.16);
}

.services-header {
  translate: 0 calc(var(--section-parallax-y, 0px) * -0.24);
}

.services-stack {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.22);
}

.testimonial-spotlight-shell {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.26);
}

.products-shell {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.24);
}

.cta-shell {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.3);
}

.footer-shell {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.24);
}

.footer-wordmark-shell {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.16);
}

.footer-bottom-shell {
  translate: 0 calc(var(--section-parallax-y, 0px) * 0.1);
}

body.page-v2 .site-footer {
  min-height: auto;
  padding-bottom: 0;
}

body.page-v2 {
  --body-copy-weight: 310;
  background: var(--bg);
}

body.page-v2 main {
  background: var(--bg);
}

body.page-v2 .footer-bottom {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .hero-backdrop,
  .hero-copy,
  .hero-cluster,
  .ps-shell,
  .services-header,
  .services-stack,
  .testimonial-spotlight-shell,
  .products-shell,
  .cta-shell,
  .footer-shell,
  .footer-wordmark-shell,
  .footer-bottom-shell {
    translate: 0 0 !important;
    will-change: auto;
  }
}

/* ----------------------------------------------------------
   PANEL — clean block container
   ---------------------------------------------------------- */

/* CTA centering left to base styles */

/* FAQ CTA — redesigned as a clear, calm card */
.faq-cta {
  --faq-cta-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,250,252,0.98));
  --faq-cta-accent: var(--pink);
  display: grid;
  gap: 0.8rem;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: clamp(1.4rem, 2.2vw, 2.2rem);
  border-radius: 18px;
  background: var(--faq-cta-bg);
  border: 1px solid rgba(46,46,46,0.06);
  box-shadow: 0 18px 40px rgba(46,46,46,0.06);
  max-width: 44rem;
  margin: 2rem auto 0;
}

.faq-cta p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(46,46,46,0.66);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
}

.faq-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  line-height: 1.05;
  color: #171717;
  font-weight: 700;
}

.faq-cta .contact-primary-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--faq-cta-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(136,73,252,0.12);
  transition: transform 160ms var(--ease-snappy), box-shadow 160ms var(--ease-snappy);
}

.faq-cta .contact-primary-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(136,73,252,0.18);
}

/* Desktop: restore original FAQ two-column layout (CTA on left, Q&A on right) */
@media (min-width: 980px) {
  .faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.58fr) minmax(28rem, 0.82fr);
    grid-template-areas:
      "copy list"
      "cta list";
    align-items: start;
    gap: clamp(1rem, 2.5vw, 3.5rem);
  }

  .faq-copy { grid-area: copy; }
  .faq-accordion { grid-area: list; }
  .faq-cta { grid-area: cta; position: static; margin: 0; }
}

  /* Nudge FAQ headline and questions down slightly for improved rhythm */
  .faq-copy {
    margin-top: clamp(1.2rem, 2.8vw, 2.4rem) !important;
  }

  .faq-accordion {
    margin-top: clamp(0.8rem, 2vw, 1.6rem) !important;
  }

/* leave CTA heading to base styles on large screens */

@media (max-width: 979px) {
  .faq-cta {
    margin-top: 1.5rem;
    padding: clamp(1rem, 2.6vw, 1.6rem);
  }
}
.why-panel-staging {
  min-height: auto !important;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem) !important;
  display: block !important;
  align-items: unset !important;
  overflow: visible;
  position: relative;
}

/* ----------------------------------------------------------
   BENTO GRID — 3 cols × 2 rows
   ---------------------------------------------------------- */
.why-bento {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.85fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 560px;
}

/* ----------------------------------------------------------
   BASE CARD
   ---------------------------------------------------------- */
.why-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: visible;
  /* Entrance state — JS adds .in-view to trigger transition */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity    0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s ease,
    box-shadow   0.28s ease;
}

.why-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.why-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.why-card.in-view:hover {
  transform: translateY(-5px);
}

/* ----------------------------------------------------------
   CARD A — tall headline (left, spans 2 rows)
   ---------------------------------------------------------- */
.why-card-a {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.045);
}

/* Slow-morphing ambient blob */
.why-card-a-blob {
  position: absolute;
  width: 80%;
  height: 55%;
  top: 8%;
  right: -12%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 0, 153, 0.14) 0%,
    rgba(136, 73, 252, 0.07) 50%,
    transparent 72%
  );
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  animation: wb-blob 9s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes wb-blob {
  0%   { transform: translate(0, 0)    scale(1);    opacity: 0.8; }
  50%  { transform: translate(-8%, 8%) scale(1.15); opacity: 1;   }
  100% { transform: translate(-4%, 14%) scale(0.95); opacity: 0.7; }
}

/* Pill badge */
.why-panel-staging .why-pill {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  align-self: flex-start !important;
  opacity: 1 !important;
  animation: none !important;
  flex-shrink: 0;
  z-index: 0;
}

/* Headline area — centred vertically, fills remaining space */
.why-card-a-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2.5rem 0 2rem;
  position: relative;
  z-index: 1;
}

.why-card-a-headline {
  font-size: clamp(1.65rem, 2.5vw, 2.45rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/* Word-reveal colour states — original JS still fires */
.why-panel-staging .why-copy-strong {
  color: rgba(255, 255, 255, 0.2);
}
.why-panel-staging .why-copy-muted {
  color: rgba(255, 255, 255, 0.14);
}
.why-panel-staging .why-word.is-revealed {
  color: rgba(255, 255, 255, 1) !important;
  filter: blur(0) !important;
}

/* CTA button */
.why-panel-staging .why-button {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  align-self: flex-start !important;
  margin: 0 !important;
  opacity: 1 !important;
  animation: none !important;
  z-index: 2 !important;
  flex-shrink: 0;
}

.why-panel-staging .why-button:hover,
.why-panel-staging .why-button:focus-visible {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------
   CARD B — image / visual (top centre)
   ---------------------------------------------------------- */
.why-card-b {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18);
}

.why-card-b-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 65%,
    rgba(255, 0, 153, 0.16) 0%,
    rgba(136, 73, 252, 0.08) 45%,
    transparent 70%
  );
  pointer-events: none;
  animation: wb-glow 5s ease-in-out infinite alternate;
}

@keyframes wb-glow {
  from { opacity: 0.7; transform: scale(0.94); }
  to   { opacity: 1;   transform: scale(1.08); }
}

.why-card-b-img {
  width: 90%;
  max-width: 300px;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(1.08) contrast(1.02);
  animation: wb-float 6s ease-in-out infinite alternate;
  will-change: transform;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

@keyframes wb-float {
  0%   { transform: translateY(0px)   rotate(-0.3deg); }
  100% { transform: translateY(-12px) rotate(0.4deg);  }
}

/* ----------------------------------------------------------
   CARD C — The challenge (top right)
   ---------------------------------------------------------- */
.why-card-c {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ----------------------------------------------------------
   CARD D — The Leadly way (bottom centre)
   ---------------------------------------------------------- */
.why-card-d {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}

/* ----------------------------------------------------------
   CARD E — The outcome (bottom right)
   ---------------------------------------------------------- */
.why-card-e {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(255, 0, 153, 0.04);
  border-color: rgba(255, 0, 153, 0.1);
}

.why-card-e:hover {
  border-color: rgba(255, 0, 153, 0.22) !important;
}

/* ----------------------------------------------------------
   SHARED INNER ELEMENTS
   ---------------------------------------------------------- */
.why-card-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #FF0099;
  opacity: 0.9;
}

.why-card-c-copy,
.why-card-d-copy {
  font-size: clamp(0.8rem, 0.92vw, 0.9rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  flex: 1;
}

/* Fragmentation tags */
.why-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.why-tag {
  font-size: 0.71rem;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.03);
  letter-spacing: 0.02em;
  transition: border-color 0.22s ease, color 0.22s ease;
}

.why-card-c:hover .why-tag {
  border-color: rgba(255, 0, 153, 0.28);
  color: rgba(255, 255, 255, 0.65);
}

.why-card-e-headline {
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.why-card-e-sub {
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.36);
  margin: 0;
}

/* ----------------------------------------------------------
   STAGGER DELAYS (JS resets these to 0ms after entrance)
   ---------------------------------------------------------- */
.why-card-a { --card-i: 0; }
.why-card-b { --card-i: 1; }
.why-card-c { --card-i: 2; }
.why-card-d { --card-i: 3; }
.why-card-e { --card-i: 4; }

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 960px) {
  .why-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    min-height: auto;
  }
  .why-card-a { grid-column: 1 / 3; grid-row: auto; min-height: 280px; }
  .why-card-b { grid-column: 1;     grid-row: auto; min-height: 240px; }
  .why-card-c { grid-column: 2;     grid-row: auto; }
  .why-card-d { grid-column: 1;     grid-row: auto; }
  .why-card-e { grid-column: 2;     grid-row: auto; }
}

@media (max-width: 560px) {
  .why-bento {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .why-card-a,
  .why-card-b,
  .why-card-c,
  .why-card-d,
  .why-card-e { grid-column: 1; grid-row: auto; }
  .why-card-b { min-height: 220px; }
}


/* ============================================================
   NAV LOGO ANIMATION
   Hover: left-to-right letter wave, 5-second loop
   Dot:   persistent soft scale pulse (always on)
   ============================================================ */

/* Let letters float above the SVG clip boundary */
.site-header .brand {
  overflow: visible;
}

.brand-logo-inline {
  overflow: visible;
  display: block;
}

/* Each letter path: animate from its own centre */
.brand-logo-inline .nv-letter {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
}

/* ── Dot: always-on soft scale pulse, no glow ── */
.brand-logo-inline .nv-dot {
  transform-box: fill-box;
  transform-origin: center center;
  animation: nv-dot-idle 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes nv-dot-idle {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.22); }
}

/* ── Letter wave: triggered on hover, loops every 5s ── */
.site-header .brand:hover .nv-letter {
  animation: nv-letter-wave 5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Stagger each letter 55ms apart → full wave completes in ~330ms */
.site-header .brand:hover .nv-l1 { animation-delay:   0ms; }
.site-header .brand:hover .nv-l2 { animation-delay:  55ms; }
.site-header .brand:hover .nv-l3 { animation-delay: 110ms; }
.site-header .brand:hover .nv-l4 { animation-delay: 165ms; }
.site-header .brand:hover .nv-l5 { animation-delay: 220ms; }
.site-header .brand:hover .nv-l6 { animation-delay: 275ms; }

/* Letter: rises 4.5px quickly, eases back — then rests for the remaining 4.5s */
@keyframes nv-letter-wave {
  0%   { transform: translateY(0px); }
  4%   { transform: translateY(-4.5px); }
  9%   { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}

/* ── Dot on hover: scale pulse only, no glow, fires after last letter ── */
.site-header .brand:hover .nv-dot {
  animation: nv-dot-hover 5s ease-in-out infinite;
  animation-delay: 330ms;
}

@keyframes nv-dot-hover {
  0%, 100% { transform: scale(1); }
  6%        { transform: scale(1.45); }
  12%       { transform: scale(1); }
}

/* ── Dark nav mode: letters flip to near-white ── */
body[data-nav-theme="dark"] .brand-logo-inline .nv-letter {
  fill: rgba(244, 244, 244, 0.92);
}



/* ============================================================
   CTA SECTION — REFINED TYPEWRITER
   ============================================================ */

/* Replace harsh steps(1) blink with a smooth ease pulse */
.cta-cursor {
  background: #FF0099 !important;
  border-radius: 1px !important;
  animation: cta-cursor-pulse 0.62s ease-in-out infinite !important;
}

@keyframes cta-cursor-pulse {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.05; }
}


/* ============================================================
   UNIFIED CTA HOVER — all buttons share one consistent style:
   subtle lift (translateY -2px, scale 1.02), no pink glow.
   Background gradient shift kept — it's a shimmer, not a glow.
   ============================================================ */

/* Nav "Get Started" — remove box-shadow glow + radial overlay */
.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: none !important;
  filter: none !important;
}

.nav-cta:hover::before,
.nav-cta:focus-visible::before {
  opacity: 0 !important;
}

/* Hero section button — maintain centering transform, add lift */
.hero-button:hover,
.hero-button:focus-visible {
  transform: translateX(-50%) translateY(-2px) scale(1.02) !important;
  box-shadow: none !important;
  filter: none !important;
}

.hero-button:hover::before,
.hero-button:focus-visible::before {
  opacity: 0 !important;
}

/* CTA section "Let's Talk" — add lift, remove glow */
.cta-hero-button:hover,
.cta-hero-button:focus-visible {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: none !important;
}

/* ============================================================
   STAGING CLIENT PROOF BENTO
   ============================================================ */

.testimonial-section {
  padding: 8.5rem 0 9rem;
}

.testimonial-shell {
  display: grid;
  gap: 2.4rem;
}

.testimonial-intro {
  max-width: 52rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.35rem;
}

.testimonial-card {
  position: relative;
  padding: 1.55rem;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(46, 46, 46, 0.08);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 560ms var(--ease-soft),
    transform 560ms var(--ease-soft),
    filter 420ms ease,
    box-shadow var(--motion-base) ease,
    border-color var(--motion-fast) ease;
  transition-delay: var(--testimonial-delay, 0ms);
  will-change: transform, opacity, filter;
}

.testimonial-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0ms;
}

.testimonial-card:hover,
.testimonial-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(46, 46, 46, 0.14);
  box-shadow:
    0 26px 54px rgba(46, 46, 46, 0.12),
    0 14px 30px rgba(46, 46, 46, 0.06);
}

.testimonial-card-quote {
  grid-column: span 5;
  min-height: 24rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at top right, rgba(255, 0, 153, 0.2), transparent 38%),
    linear-gradient(180deg, #383838 0%, #1f1f1f 100%);
  color: var(--white);
}

.testimonial-card-stats {
  grid-column: span 3;
  background:
    radial-gradient(circle at top right, rgba(255, 0, 153, 0.16), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #fff4fa 100%);
}

.testimonial-card-growth {
  grid-column: span 4;
}

.testimonial-card-difference {
  grid-column: span 7;
}

.testimonial-card-channels {
  grid-column: span 5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 246, 248, 0.98));
}

.testimonial-card-structure {
  grid-column: span 12;
  background:
    linear-gradient(135deg, rgba(255, 0, 153, 0.08), rgba(255, 255, 255, 0.92)),
    rgba(255, 255, 255, 0.92);
}

.testimonial-label {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 0, 153, 0.92);
}

.testimonial-card-quote .testimonial-label {
  color: rgba(255, 255, 255, 0.7);
}

.testimonial-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.85vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.testimonial-attribution {
  display: grid;
  gap: 0.18rem;
}

.testimonial-attribution strong {
  font-size: 1rem;
  font-weight: 600;
}

.testimonial-attribution span {
  color: rgba(244, 244, 244, 0.64);
}

.testimonial-card-stats strong {
  display: block;
  font-size: clamp(3.2rem, 5vw, 4.8rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
  color: #232323;
}

.testimonial-card-stats > span {
  display: block;
  margin-top: 0.7rem;
  color: rgba(46, 46, 46, 0.7);
}

.testimonial-metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.testimonial-metric-row div {
  padding: 0.8rem 0.9rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(46, 46, 46, 0.06);
}

.testimonial-metric-row small {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(46, 46, 46, 0.46);
}

.testimonial-metric-row b {
  font-size: 1rem;
  font-weight: 600;
  color: #2a2a2a;
}

.testimonial-mini-trend {
  display: flex;
  align-items: end;
  gap: 0.45rem;
  height: 4.5rem;
  margin-top: 1.1rem;
}

.testimonial-mini-trend span {
  flex: 1 1 0;
  border-radius: 999px;
  height: var(--mini-bar);
  background: linear-gradient(180deg, rgba(255, 0, 153, 0.92), rgba(255, 0, 153, 0.22));
}

.testimonial-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.testimonial-card-head > span {
  font-size: 0.85rem;
  color: rgba(46, 46, 46, 0.52);
}

.testimonial-chart {
  position: relative;
  height: 16.5rem;
  margin-top: 1rem;
  padding: 1rem 0 0.6rem;
}

.testimonial-chart-grid {
  position: absolute;
  inset: 0 0 1.75rem;
  display: grid;
  gap: 0;
}

.testimonial-chart-grid span {
  border-top: 1px solid rgba(46, 46, 46, 0.08);
}

.testimonial-chart-bars {
  position: absolute;
  inset: 1rem 0 1.75rem;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 0.75rem;
}

.testimonial-chart-bars span {
  border-radius: 999px 999px 0 0;
  height: var(--bar);
  background: linear-gradient(180deg, rgba(46, 46, 46, 0.14), rgba(46, 46, 46, 0.03));
}

.testimonial-chart-line {
  position: absolute;
  inset: 0 0 1.75rem;
  width: 100%;
  height: auto;
  color: #ff0099;
  pointer-events: none;
}

.testimonial-axis {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: rgba(46, 46, 46, 0.5);
}

.testimonial-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.testimonial-compare-col {
  padding: 1rem;
  border-radius: 20px;
  background: rgba(246, 246, 248, 0.88);
  border: 1px solid rgba(46, 46, 46, 0.06);
}

.testimonial-compare-col.is-leadly {
  background:
    radial-gradient(circle at top right, rgba(255, 0, 153, 0.14), transparent 42%),
    #2f2f2f;
  border-color: rgba(255, 0, 153, 0.14);
  color: var(--white);
}

.testimonial-compare-col h3 {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.testimonial-compare-col ul,
.testimonial-bullets {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.testimonial-compare-col li,
.testimonial-bullets li {
  position: relative;
  padding-left: 1rem;
  color: rgba(46, 46, 46, 0.72);
}

.testimonial-compare-col li::before,
.testimonial-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #ff0099;
}

.testimonial-compare-col.is-leadly li {
  color: rgba(244, 244, 244, 0.8);
}

.testimonial-channel-list {
  display: grid;
  gap: 0.8rem;
}

.testimonial-channel-list div {
  position: relative;
  padding: 0.9rem 1rem 1.1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(46, 46, 46, 0.06);
  overflow: hidden;
}

.testimonial-channel-list div::after {
  content: "";
  position: absolute;
  left: 1rem;
  bottom: 0.7rem;
  height: 0.34rem;
  width: var(--channel-width, 74%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 0, 153, 0.92), rgba(255, 0, 153, 0.22));
}

.testimonial-channel-list div:nth-child(1) { --channel-width: 82%; }
.testimonial-channel-list div:nth-child(2) { --channel-width: 74%; }
.testimonial-channel-list div:nth-child(3) { --channel-width: 61%; }
.testimonial-channel-list div:nth-child(4) { --channel-width: 68%; }

.testimonial-channel-list strong {
  display: block;
  margin-bottom: 0.22rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #262626;
}

.testimonial-channel-list span,
.testimonial-card-structure p {
  color: rgba(46, 46, 46, 0.72);
}

.testimonial-card-structure p:first-of-type {
  margin-top: 0;
}

.testimonial-card-structure p:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .testimonial-card-quote,
  .testimonial-card-structure {
    grid-column: span 12;
  }

  .testimonial-card-stats {
    grid-column: span 5;
  }

  .testimonial-card-growth {
    grid-column: span 7;
  }

  .testimonial-card-difference {
    grid-column: span 7;
  }

  .testimonial-card-channels {
    grid-column: span 5;
  }
}

@media (max-width: 780px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card,
  .testimonial-card-quote,
  .testimonial-card-stats,
  .testimonial-card-growth,
  .testimonial-card-difference,
  .testimonial-card-channels,
  .testimonial-card-structure {
    grid-column: 1;
  }

  .testimonial-compare {
    grid-template-columns: 1fr;
  }

  .testimonial-chart {
    height: 14rem;
  }

  .testimonial-card blockquote {
    font-size: clamp(1.75rem, 7.5vw, 2.2rem);
  }
}

/* ============================================================
   V2: TESTIMONIAL SPOTLIGHT
   ============================================================ */

.testimonial-spotlight {
  padding: clamp(1.35rem, 2.1vw, 2.2rem) 0 clamp(4.5rem, 6vw, 5.6rem);
}

.testimonial-spotlight-shell {
  position: relative;
  width: var(--boxed-guide-width);
  display: grid;
  gap: clamp(1.2rem, 2vw, 1.8rem);
  overflow: visible;
}

.ts-balloon {
  position: absolute;
  left: clamp(-8rem, -9vw, -5.1rem);
  top: clamp(-2.35rem, -3.2vw, -1.25rem);
  width: clamp(12.875rem, calc(21vw - 10px), 17.875rem);
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 26px 34px rgba(255, 0, 153, 0.14));
  animation: ts-balloon-float 7.2s ease-in-out infinite;
}

.ts-header {
  display: grid;
  justify-items: center;
  gap: 0;
}

.ts-pill {
  margin: 0 0 1.25rem;
  padding: 0.55rem 1.25rem 0.5rem;
  border: 1px solid rgba(46, 46, 46, 0.22);
  border-radius: 999px;
  color: rgba(46, 46, 46, 0.82);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 310;
  line-height: 1;
}

.ts-header h2 {
  max-width: 15ch;
  color: #2e2e2e;
  text-align: center;
  font-family: "Grift Variable", "Grift", "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(2.25rem, 3.45vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.ts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(17.75rem, 26vw, 21rem);
  gap: clamp(1rem, 1.6vw, 1.35rem);
  align-items: stretch;
}

.ts-quote-card {
  padding: clamp(1.45rem, 2.35vw, 2rem) clamp(1.55rem, 2.9vw, 2.75rem);
  border-radius: 35px;
  background: #2e2e2e;
  box-shadow: 0 28px 58px rgba(46, 46, 46, 0.12);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  text-align: center;
  height: 100%;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1220ms var(--ease-soft),
    transform 1220ms var(--ease-soft),
    box-shadow var(--motion-base) ease;
  will-change: opacity, transform;
}

.ts-logo {
  width: clamp(4.9rem, 7vw, 6.1rem);
  height: auto;
  opacity: 0.98;
  transform: translateY(8px);
}

.ts-quote-copy {
  width: 100%;
  max-width: 42rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.62rem;
  margin-top: 0.15rem;
}

.ts-quote-body {
  width: 100%;
  max-width: 39rem;
  color: #fff;
  font-family: "Sequel Sans", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 14.2px;
  font-weight: 310;
  letter-spacing: 0;
  line-height: 22.5px;
}

.ts-quote-strong {
  width: 100%;
  max-width: 39rem;
  margin-top: 0.25rem;
  color: #fff;
  font-family: "Sequel Sans", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 14.2px;
  font-weight: 600;
  line-height: 22.5px;
  letter-spacing: 0;
}

.ts-quote-signoff {
  color: #fff;
  font-family: "Sequel Sans", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 14.2px;
  font-weight: 310;
  letter-spacing: 0;
  line-height: 22.5px;
}

.ts-person {
  display: grid;
  justify-items: center;
  gap: 0.52rem;
}

.ts-person-photo {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
}

.ts-person-meta {
  display: grid;
  justify-items: center;
  gap: 0.12rem;
}

.ts-person-meta strong,
.ts-person-meta span {
  color: rgba(255, 255, 255, 0.92);
  font-family: "Grift Variable", "Grift", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 0.98rem;
  line-height: 1.12;
}

.ts-person-meta strong {
  font-weight: 700;
}

.ts-person-meta span {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}

.ts-sidecards {
  display: grid;
  gap: 0.75rem;
}

.ts-card {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(46, 46, 46, 0.08);
  box-shadow: 0 18px 42px rgba(46, 46, 46, 0.08);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1220ms var(--ease-soft),
    transform 1220ms var(--ease-soft),
    box-shadow var(--motion-base) ease;
  will-change: opacity, transform;
}

.ts-growth-card {
  padding: 1rem 0.9rem 0.82rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 12.4rem;
}

.ts-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ts-card-label {
  margin: 0;
  color: rgba(255, 0, 153, 0.92);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 315;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 1.58px;
}

.ts-card-head > span {
  color: rgba(46, 46, 46, 0.46);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 310;
  line-height: 1.35;
}

.ts-growth-chart {
  position: relative;
  min-height: 8.55rem;
  margin-top: 0.45rem;
}

.ts-growth-grid {
  position: absolute;
  inset: 0.25rem 0.1rem 1.7rem;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
}

.ts-growth-grid span {
  border-top: 1px solid rgba(46, 46, 46, 0.08);
}

.ts-growth-bars {
  position: absolute;
  inset: 1.35rem 0.55rem 1.65rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 0.48rem;
}

.ts-growth-bars span {
  height: var(--bar-height);
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(46, 46, 46, 0.16), rgba(46, 46, 46, 0.03));
  transform-origin: center bottom;
  transform: scaleY(0.08);
  opacity: 0.35;
}

.ts-growth-bars span:nth-child(1) { --bar-order: 0; }
.ts-growth-bars span:nth-child(2) { --bar-order: 1; }
.ts-growth-bars span:nth-child(3) { --bar-order: 2; }
.ts-growth-bars span:nth-child(4) { --bar-order: 3; }
.ts-growth-bars span:nth-child(5) { --bar-order: 4; }
.ts-growth-bars span:nth-child(6) { --bar-order: 5; }

.ts-growth-curve {
  position: absolute;
  inset: 0.35rem 0.45rem 1.9rem 0.3rem;
  width: calc(100% - 0.75rem);
  height: calc(100% - 2.25rem);
  color: var(--pink);
  overflow: visible;
}

.ts-growth-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 3px 9px rgba(255, 0, 153, 0.16));
}

.ts-growth-axis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.48rem;
  padding: 0 0.55rem;
  color: rgba(46, 46, 46, 0.5);
  font-family: var(--font-body);
  font-size: 5px;
  font-weight: 310;
  line-height: 1;
  text-align: center;
}

.ts-growth-axis span {
  display: block;
  min-width: 0;
}

.ts-roles-card {
  padding: 0.82rem 0.82rem 0.8rem;
  display: grid;
  gap: 0.55rem;
  min-height: 10.3rem;
}

.ts-role-list {
  display: grid;
  gap: 0.45rem;
}

.ts-role-item {
  padding: 0.58rem 0.68rem 0.52rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(46, 46, 46, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ts-role-item strong {
  display: block;
  color: #262626;
  font-family: "Grift Variable", "Grift", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.ts-role-item span {
  display: block;
  margin-top: 0.18rem;
  color: rgba(46, 46, 46, 0.72);
  font-family: var(--font-body);
  font-size: 12.66px;
  font-weight: 310;
  line-height: 1.35;
}

.ts-role-item::after {
  content: "";
  display: block;
  width: var(--role-width);
  height: 2px;
  margin-top: 0.38rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 0, 153, 0.92), rgba(255, 0, 153, 0.24));
  transform-origin: left center;
  transform: scaleX(0);
}

.ts-role-item:nth-child(1) { --role-order: 0; }
.ts-role-item:nth-child(2) { --role-order: 1; }
.ts-role-item:nth-child(3) { --role-order: 2; }
.ts-role-item:nth-child(4) { --role-order: 3; }

.ts-growth-card {
  transition-delay: 220ms;
}

.ts-roles-card {
  transition-delay: 420ms;
}

.testimonial-spotlight.is-visible .ts-growth-bars span {
  animation: ts-grow-bar 2200ms var(--ease-soft) forwards;
  animation-delay: calc(400ms + var(--bar-order) * 280ms);
}

.testimonial-spotlight.is-visible .ts-quote-card,
.testimonial-spotlight.is-visible .ts-card {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-spotlight.is-visible .ts-role-item::after {
  animation: ts-grow-line 2200ms var(--ease-soft) forwards;
  animation-delay: calc(1600ms + var(--role-order) * 350ms);
}

@keyframes ts-balloon-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }

  50% {
    transform: translate3d(0, -14px, 0) rotate(1.6deg);
  }
}

@keyframes ts-grow-bar {
  0% {
    transform: scaleY(0.08);
    opacity: 0.28;
  }

  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes ts-grow-line {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

@media (max-width: 1160px) {
  .ts-balloon {
    left: -1rem;
    top: -0.75rem;
    width: clamp(9rem, 17vw, 12rem);
  }

  .ts-layout {
    grid-template-columns: minmax(0, 1fr) 18.5rem;
  }

}

@media (max-width: 940px) {
  .ts-balloon {
    position: relative;
    left: auto;
    top: auto;
    justify-self: start;
    width: clamp(9rem, 30vw, 12rem);
    margin-bottom: -1rem;
  }

  .ts-layout {
    grid-template-columns: 1fr;
  }

  .ts-sidecards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (max-width: 680px) {
  .testimonial-spotlight {
    padding: 6.25rem 0 7rem;
  }

  .ts-balloon {
    justify-self: center;
    margin-bottom: -0.5rem;
  }

  .ts-header {
    margin-top: 0;
  }

  .ts-header h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  .ts-quote-card {
    min-height: auto;
    padding: 1.85rem 1.25rem;
    border-radius: 28px;
  }

  .ts-quote-copy {
    max-width: 100%;
    gap: 0.9rem;
    margin-top: 0.65rem;
  }

  .ts-quote-strong {
    font-size: clamp(1.05rem, 5.4vw, 1.25rem);
  }

  .ts-sidecards {
    grid-template-columns: 1fr;
  }

  .ts-card {
    border-radius: 22px;
  }
}

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

  .ts-quote-card,
  .ts-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ts-growth-bars span {
    transform: scaleY(1);
    opacity: 1;
  }

  .ts-role-item::after {
    transform: scaleX(1);
  }
}


/* ============================================================
   PROBLEM / SOLUTION SECTION — Figma node 380-6728
   Two stacked dark cards with physics-falling pill tags
   ============================================================ */

.ps-section {
  --ps-card1-progress: 0;
  --ps-stack-progress: 0;
  --ps-card1-lighten: 0;
  --ps-stack-card-height: clamp(36rem, 39vw, 37rem);
  --ps-stack-peek: clamp(4.8rem, 6.5vw, 6.25rem);
  background: var(--bg, #F4F4F0);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6.5rem);
  position: relative;
  /* Own stacking context + raised z-index so the services section
     below can't bleed up over the ps card stack. */
  isolation: isolate;
  z-index: 5;
}

.ps-shell {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Individual card ── */
.ps-card {
  position: relative;
  background: #252525;
  border-radius: 30px;
  padding-block: clamp(2.5rem, 4.5vw, 3.625rem);
  padding-inline: calc((100vw - var(--shell)) / 2);
  display: grid;
  grid-template-columns: calc(42% + 70px) 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  overflow: hidden;
}

.ps-card-problem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--ps-card1-lighten));
  pointer-events: none;
  transition: background 240ms ease;
}

.ps-card-solution {
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.14);
}

/* ── Left column ── */
.ps-card-left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: calc(0.25rem + 50px);
  padding-left: clamp(1rem, 2.5vw, 2.5rem);
  padding-right: clamp(1rem, 2vw, 2rem);
}

.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: flex-start;
}

.ps-heading {
  color: #fff;
  font-family: "Grift", var(--font-display);
  font-size: 50px;
  font-weight: 700;
  line-height: 59px;
  margin: 0;
  overflow-wrap: break-word;
}

.ps-sub {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--body-copy-weight);
  letter-spacing: 0;
  line-height: 1.65;
  margin: 0;
  overflow-wrap: break-word;
  max-width: calc(30rem + 100px);
}

.ps-card-solution .ps-heading {
  font-size: 28px !important;
  line-height: 1.2 !important;
  max-width: calc(29rem + 70px) !important;
  font-weight: 700 !important;
}

.ps-card-solution .ps-sub {
  max-width: calc(29rem + 100px);
}

.ps-body {
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.48);
  margin: 0;
}

.ps-body-bold {
  font-size: clamp(0.92rem, 1.06vw, 1.06rem);
  line-height: 1.55;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* ── Right column ── */
.ps-card-right {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ps-card-problem .ps-visual-label {
  transform: translateY(90px);
}

.ps-card-problem .ps-physics-stage,
.ps-card-problem .ps-visual-desc {
  transform: translateY(-20px);
}

/* Lift the whole right column so its visual centre lines up with the
   heading block on the left (desktop only — mobile stacks the columns). */
@media (min-width: 881px) {
  .ps-card-problem .ps-card-right {
    transform: translateY(-30px);
  }
}

.ps-visual-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
}

/* ── Physics stage ── */
.ps-physics-stage {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 255, 255, 1);
}

/* ── Decorative shapes (static, behind pills) ── */
.ps-shape {
  position: absolute;
  width: var(--s-w);
  height: var(--s-h, auto);
  aspect-ratio: var(--s-ratio, auto);
  left: var(--s-x);
  top: var(--s-y, auto);
  bottom: var(--s-bottom, auto);
  background: var(--shape-fill, #717171);
  pointer-events: none;
  z-index: 0;
  transform-origin: center bottom;
  opacity: 0; /* GSAP animates in */
}

.ps-shape-circle { border-radius: 50%; }

.ps-shape-triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.ps-shape-hex {
  clip-path: polygon(50% 0%, 87% 16%, 100% 58%, 78% 100%, 22% 100%, 0% 58%, 13% 16%);
}

/* ── Pill tags ── */
.ps-pill {
  position: absolute;
  left: var(--pill-left, 0%);
  top: 0;
  background: var(--pill-bg);
  color: var(--pill-c, #fff);
  border-radius: 100px;
  padding: 0.52rem 1.35rem;
  font-size: 1.19rem;
  font-weight: 500;
  letter-spacing: 0em;
  white-space: nowrap;
  transform-origin: center center;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  opacity: 0; /* GSAP animates in */
}

/* Animation handled entirely by GSAP in the page script */

/* ── Visual description text ── */
.ps-visual-desc {
  font-size: 0.78rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin: 0;
  padding: 0 0.5rem;
}

/* ── Responsive ── */
@media (min-width: 881px) {
  .ps-section {
    min-height: 235vh;
    padding-top: clamp(1rem, 2vw, 1.4rem);
  }

  .ps-shell {
    position: sticky;
    top: calc(var(--nav-height) + 1.45rem);
    height: calc(var(--ps-stack-card-height) + var(--ps-stack-peek));
    min-height: calc(var(--ps-stack-card-height) + var(--ps-stack-peek));
    overflow: hidden;
    display: block;
  }

  .ps-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ps-stack-card-height);
    min-height: 0;
  }

  .ps-card-problem {
    z-index: 1;
    will-change: transform;
    transform:
      translate3d(
        calc(var(--ps-card1-progress) * 9px + var(--ps-card1-progress) * 0.88%),
        calc(var(--ps-card1-progress) * 9px + var(--ps-card1-progress) * 0.18%),
        0
      )
      rotate(calc(var(--ps-card1-progress) * 0.82deg));
    transform-origin: center center;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.09);
  }

  .ps-card-solution {
    z-index: 2;
    will-change: transform, opacity;
    opacity: var(--ps-stack-progress);
    transform:
      translate3d(
        0,
        calc(var(--ps-stack-peek) + (1 - var(--ps-stack-progress)) * 92%),
        0
      )
      scale(calc(0.992 + var(--ps-stack-progress) * 0.008));
    transform-origin: center top;
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.22);
  }

  .ps-section.ps-section-single {
    min-height: auto;
  }

  .ps-section.ps-section-single .ps-shell {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
  }

  .ps-section.ps-section-single .ps-card {
    position: relative;
    height: auto;
    min-height: var(--ps-stack-card-height);
  }

  .ps-section.ps-section-single .ps-card-problem {
    transform: none;
  }
}

@media (max-width: 880px) {
  .ps-card {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
    height: auto;
    min-height: auto;
    transform: none !important;
    opacity: 1 !important;
  }

  .ps-card-left {
    padding-top: 0.25rem;
  }

  .ps-physics-stage {
    height: 260px;
  }
}

@media (max-width: 520px) {
  .ps-physics-stage {
    height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-section {
    --ps-stack-progress: 1;
    --ps-card1-lighten: 0.06;
  }

  .ps-shape,
  .ps-pill {
    opacity: 1;
    filter: none;
  }

  .ps-shape {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scale(1);
  }

  .ps-pill {
    transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg)) scale(1);
  }

  .ps-physics-stage.ps-animated .ps-shape,
  .ps-physics-stage.ps-animated .ps-pill {
    animation: none;
  }
}

/* ----------------------------------------------------------
   WHY LEADLY — pink folder scene with tags + decorative bursts
   ---------------------------------------------------------- */
.ps-physics-stage.sol-folder-scene {
  position: relative;
  height: auto;
  min-height: clamp(24rem, 37.5vw, 37.5rem);
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-folder-stage {
  position: relative;
  width: min(100%, 36rem);
  aspect-ratio: 540 / 380;
  margin-inline: auto;
}

.sol-folder-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sol-folder-back {
  z-index: 1;
  filter: drop-shadow(0 22px 36px rgba(255, 0, 153, 0.32));
}

.sol-folder-front {
  z-index: 3;
}

.sol-folder-title {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
}

.sol-burst {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.sol-burst-pink {
  width: 16%;
  height: auto;
  left: 4%;
  top: 60%;
}

.sol-burst-green {
  width: 14%;
  height: auto;
  right: -2%;
  top: 28%;
}

.sol-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 700;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0;
  user-select: none;
  pointer-events: none;
}

.sol-tag-inside {
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background: #c9559e;
  color: #ffffff;
  z-index: 2;
  font-weight: 800;
}

.sol-tag-white {
  background: #fff;
  color: #2e2e2e;
  z-index: 5;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

.sol-tag-green {
  background: #3dff63;
  color: #2e2e2e;
  z-index: 5;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.sol-tag-good {
  left: 12%;
  top: 8%;
  transform: rotate(-8deg);
}

.sol-tag-shirt {
  right: 6%;
  top: 18%;
  transform: rotate(38deg);
}

.sol-tag-onepiece {
  left: 4%;
  bottom: 6%;
  transform: rotate(-10deg);
}

@media (max-width: 880px) {
  .ps-physics-stage.sol-folder-scene {
    min-height: min(78vw, 30rem);
  }
  .sol-folder-stage {
    width: min(100%, 28rem);
  }
}

@media (max-width: 520px) {
  .ps-physics-stage.sol-folder-scene {
    min-height: min(84vw, 24rem);
  }
}

/* ----------------------------------------------------------
   WHY LEADLY — collaborative cursors selecting service tags (legacy)
   ---------------------------------------------------------- */
.ps-physics-stage.sol-collab {
  position: relative;
  height: auto;
  min-height: clamp(24rem, 37.5vw, 37.5rem);
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}

.sol-collab-stage {
  position: relative;
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 1.28 / 1;
  margin-inline: auto;
}

.sol-tag {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, auto);
  height: 15.2%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  border-radius: 999px;
  padding: 0 1rem;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  letter-spacing: -0.005em;
  text-align: center;
  pointer-events: none;
  user-select: none;
  transition:
    background 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-cursor.is-clicking .sol-cursor-pointer {
  animation: sol-cursor-click 240ms cubic-bezier(0.32, 0, 0.18, 1);
}

@keyframes sol-cursor-click {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.78); }
}

.sol-tag.is-selected {
  background: var(--selected-color, var(--pink, #ff0099));
  border-color: var(--selected-color, var(--pink, #ff0099));
  color: #1a1a1a;
}

.sol-cursor {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  z-index: 5;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.sol-cursor-pointer {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.sol-cursor-label {
  display: inline-block;
  margin-top: -2px;
  margin-left: 18px;
  background: var(--cursor-color);
  color: #fff;
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.28rem 0.7rem;
  border-radius: 7px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sol-cursor-mia {
  --cursor-color: #FFC23C;
  color: #FFC23C;
}

.sol-cursor-theo {
  --cursor-color: #13C49A;
  color: #13C49A;
}

.sol-cursor-ren {
  --cursor-color: #FF5C2E;
  color: #FF5C2E;
}

.sol-cursor-eve {
  --cursor-color: #E58FE0;
  color: #E58FE0;
}

.sol-cursor-kai {
  --cursor-color: #B7DCD8;
  color: #4a4a4a;
}

.sol-cursor-kai .sol-cursor-label {
  color: #1a1a1a;
}

@media (max-width: 880px) {
  .ps-physics-stage.sol-collab {
    min-height: min(78vw, 30rem);
  }
  .sol-collab-stage {
    width: min(100%, 27rem);
  }
}

@media (max-width: 520px) {
  .ps-physics-stage.sol-collab {
    min-height: min(84vw, 24rem);
  }
  .sol-tag {
    font-size: 0.78rem;
    padding: 0.42rem 0.85rem;
  }
}

/* ----------------------------------------------------------
   WHY LEADLY — dotconnect-style services canvas (legacy, unused)
   ---------------------------------------------------------- */
.ps-physics-stage.sol-dotconnect {
  position: relative;
  height: auto;
  min-height: clamp(24rem, 37.5vw, 37.5rem);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  overflow: visible;
}

.ps-dotconnect-shell {
  width: min(100%, 33rem);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  transform: translateY(-32px) scale(0.89);
  transform-origin: center center;
}

.ps-dotconnect-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
}

@media (max-width: 880px) {
  .ps-physics-stage.sol-dotconnect {
    min-height: min(78vw, 30rem);
  }

  .ps-dotconnect-shell {
    width: min(100%, 27rem);
    transform: translateY(-22px) scale(0.92);
  }
}

@media (max-width: 520px) {
  .ps-physics-stage.sol-dotconnect {
    min-height: min(84vw, 24rem);
  }

  .ps-dotconnect-shell {
    transform: translateY(-16px) scale(0.94);
  }
}

/* (why-v2 styles removed — replaced by .ps-* section above) */


/* ============================================================
   V2: REDUCE GAP ABOVE SERVICES SECTION
   ============================================================ */

/* Tighten the services header top position in v2 */
body.page-v2 .services-header {
  top: calc(var(--nav-height) + 0.6rem - 50px);
  transform:
    translateX(-50%)
    translateY(calc(var(--services-intro-progress) * -460px));
  opacity: 1;
}

body.page-v2 .services-header .section-intro h2 {
  max-width: 18ch;
  font-size: clamp(2.45rem, 4.55vw, 4.35rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
}

/* ============================================================
   V2: SERVICES REDESIGN
   Keeps the scroll stack, turns each card into a visual system tile
   ============================================================ */

body.page-v2 .services-stack {
  width: min(1180px, calc(100vw - 2.5rem));
  min-height: min(74vh, 790px);
}

body.page-v2 .service-card {
  --service-paper: #f7f0e6;
  grid-template-columns: minmax(0, 1.14fr) minmax(22rem, 0.86fr);
  gap: 0;
  padding: clamp(0.78rem, 1.05vw, 1rem);
  border: 1px solid rgba(46, 46, 46, 0.1);
  border-radius: clamp(2rem, 3vw, 2.75rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.28)),
    var(--service-paper);
  box-shadow:
    0 34px 76px rgba(46, 46, 46, 0.14),
    0 18px 44px rgba(var(--service-accent-rgb, 46, 46, 46), 0.1);
  isolation: isolate;
}

body.page-v2 .service-card:nth-child(2) {
  --service-paper: #edf2ff;
}

body.page-v2 .service-card:nth-child(3) {
  --service-paper: #fff0e7;
}

body.page-v2 .service-card:nth-child(4) {
  --service-paper: #eafff9;
}

body.page-v2 .service-card:nth-child(5) {
  --service-paper: #fff5d9;
}

body.page-v2 .service-card:nth-child(6) {
  --service-paper: #edfbf2;
}

body.page-v2 .service-card:nth-child(7) {
  --service-paper: #f2edff;
}

body.page-v2 .service-card::before {
  inset: auto auto 1.45rem 1.45rem;
  width: clamp(5rem, 10vw, 8rem);
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(var(--service-accent-rgb, 46, 46, 46), 0.22);
}

body.page-v2 .service-card::after {
  right: -8%;
  top: auto;
  bottom: -32%;
  width: clamp(16rem, 28vw, 28rem);
  height: clamp(16rem, 28vw, 28rem);
  border-radius: 34% 66% 58% 42%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.74), transparent 32%),
    rgba(var(--service-accent-rgb, 46, 46, 46), 0.14);
  filter: none;
  opacity: 0.75;
  transform: rotate(-13deg);
  z-index: 0;
}

body.page-v2 .service-visual {
  min-width: 0;
}

body.page-v2 .service-visual-panel {
  min-height: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(0.55rem, 1vw, 0.85rem);
  padding: clamp(1.3rem, 2vw, 2rem);
  border-radius: clamp(1.55rem, 2.4vw, 2.25rem);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.16), transparent 29%),
    radial-gradient(circle at 80% 18%, rgba(var(--service-accent-rgb, 255, 0, 153), 0.34), transparent 31%),
    linear-gradient(145deg, #2b2b2b 0%, #191919 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.page-v2 .service-visual-panel::before {
  right: -10%;
  top: 20%;
  width: min(19rem, 48%);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle, transparent 56%, rgba(255, 255, 255, 0.12) 57%, transparent 59%),
    conic-gradient(from 40deg, rgba(var(--service-accent-rgb, 255, 0, 153), 0.52), transparent 34%, rgba(255, 255, 255, 0.18), transparent 78%);
  filter: blur(0);
  border-radius: 50%;
}

body.page-v2 .service-visual-panel::after {
  left: -13%;
  bottom: -20%;
  width: min(22rem, 62%);
  height: auto;
  aspect-ratio: 1.35;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.2) 1px, transparent 1.35px);
  background-size: 18px 18px;
  opacity: 0.58;
}

body.page-v2 .service-visual-top {
  position: relative;
  z-index: 4;
}

body.page-v2 .service-index {
  font-size: clamp(5.2rem, 8.8vw, 8.6rem);
  line-height: 0.76;
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: -0.08em;
}

body.page-v2 .service-visual-stage {
  margin-top: 0;
  padding: 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

body.page-v2 .service-visual-rail {
  position: absolute;
  z-index: 1;
  inset: 27% 13% 35% 11%;
  display: block;
  pointer-events: none;
}

body.page-v2 .service-visual-rail::before {
  content: "";
  position: absolute;
  inset: 3% 9% 7%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  transform: rotate(-13deg);
}

body.page-v2 .service-visual-rail::after {
  content: "";
  position: absolute;
  left: 48%;
  top: 52%;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent);
  transform: rotate(-22deg);
  transform-origin: left center;
}

body.page-v2 .service-visual-rail span {
  position: absolute;
  display: block;
  border-radius: clamp(1rem, 2vw, 1.7rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.76));
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(46, 46, 46, 0.06);
}

body.page-v2 .service-visual-rail span::before,
body.page-v2 .service-visual-rail span::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

body.page-v2 .service-visual-rail span::before {
  left: 14%;
  top: 18%;
  width: 26%;
  height: 0.42rem;
  background: rgba(var(--service-accent-rgb, 255, 0, 153), 0.86);
}

body.page-v2 .service-visual-rail span::after {
  left: 14%;
  right: 16%;
  bottom: 18%;
  height: 0.32rem;
  background: rgba(46, 46, 46, 0.13);
}

body.page-v2 .service-visual-rail span:nth-child(1) {
  left: 2%;
  top: 8%;
  width: 30%;
  height: 32%;
  transform: rotate(-8deg);
}

body.page-v2 .service-visual-rail span:nth-child(2) {
  left: 38%;
  top: 0;
  width: 44%;
  height: 24%;
  transform: rotate(5deg);
}

body.page-v2 .service-visual-rail span:nth-child(3) {
  left: 24%;
  bottom: 9%;
  width: 36%;
  height: 30%;
  transform: rotate(7deg);
}

body.page-v2 .service-visual-rail span:nth-child(4) {
  right: 0;
  bottom: 18%;
  width: 31%;
  height: 42%;
  border-radius: 999px 999px clamp(1rem, 2vw, 1.7rem) clamp(1rem, 2vw, 1.7rem);
  transform: rotate(-4deg);
}

body.page-v2 .service-visual-tags {
  position: relative;
  z-index: 4;
  left: auto;
  bottom: auto;
  align-self: end;
  max-width: min(27rem, 100%);
  gap: 0.5rem;
}

body.page-v2 .service-visual-tags span {
  min-height: 2rem;
  padding: 0.38rem 0.72rem;
  background: rgba(var(--service-accent-rgb, 255, 0, 153), 0.9);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

body.page-v2 .service-visual-tags span:nth-child(even) {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}

body.page-v2 .service-visual-note {
  position: relative;
  z-index: 4;
  left: auto;
  right: auto;
  bottom: auto;
  padding: clamp(0.82rem, 1.25vw, 1.05rem);
  border-radius: clamp(1.25rem, 2vw, 1.7rem);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
}

body.page-v2 .service-visual-note strong {
  max-width: 28ch;
  font-size: clamp(1rem, 1.36vw, 1.28rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

body.page-v2 .service-visual-note p {
  display: none;
}

body.page-v2 .service-card-body {
  position: relative;
  max-width: none;
  align-content: center;
  gap: clamp(0.85rem, 1.35vw, 1.25rem);
  padding: clamp(2rem, 3.4vw, 3.4rem);
  overflow: hidden;
}

body.page-v2 .service-card-body::before {
  content: "";
  position: absolute;
  right: clamp(1.2rem, 2.4vw, 2.5rem);
  bottom: clamp(1rem, 2vw, 2rem);
  width: clamp(5.75rem, 10vw, 8.75rem);
  aspect-ratio: 1;
  border-radius: 42% 58% 48% 52%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.76), transparent 28%),
    rgba(var(--service-accent-rgb, 46, 46, 46), 0.12);
  opacity: 0.7;
  transform: rotate(12deg);
  pointer-events: none;
}

body.page-v2 .service-copy-top {
  position: relative;
  z-index: 1;
  align-items: center;
}

body.page-v2 .service-pill {
  padding: 0.54rem 0.9rem;
  background: rgba(46, 46, 46, 0.06);
  color: rgba(46, 46, 46, 0.7);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

body.page-v2 .service-count {
  color: rgba(46, 46, 46, 0.42);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

body.page-v2 .service-card-body h3 {
  position: relative;
  z-index: 1;
  max-width: 9ch;
  font-size: clamp(2rem, 3.65vw, 3.5rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
}

body.page-v2 .service-card-body h3::after {
  content: "";
  display: block;
  width: clamp(3.5rem, 7vw, 5.5rem);
  height: 0.36rem;
  margin-top: 0.72rem;
  border-radius: 999px;
  background: var(--service-accent);
}

body.page-v2 .service-card-body > p {
  position: relative;
  z-index: 1;
  max-width: 27rem;
  color: rgba(46, 46, 46, 0.68);
  font-size: clamp(0.96rem, 1.05vw, 1.06rem);
  line-height: 1.56;
}

body.page-v2 .service-card-body > p + p {
  display: none;
}

@media (max-width: 1080px) {
  body.page-v2 .services-stack {
    min-height: min(74vh, 720px);
  }

  body.page-v2 .service-card {
    grid-template-columns: minmax(0, 1.04fr) minmax(19rem, 0.96fr);
  }

  body.page-v2 .service-card-body {
    padding: clamp(1.4rem, 2.5vw, 2.2rem);
  }

  body.page-v2 .service-card-body h3 {
    font-size: clamp(1.82rem, 3.55vw, 2.8rem);
  }
}

@media (max-width: 720px) {
  body.page-v2 .services-stack {
    min-height: auto;
  }

  body.page-v2 .service-card {
    grid-template-columns: 1fr;
    padding: 0.75rem;
    border-radius: 30px;
  }

  body.page-v2 .service-visual-panel {
    min-height: 17rem;
    border-radius: 24px;
    padding: 1.1rem;
  }

  body.page-v2 .service-index {
    font-size: 3.35rem;
  }

  body.page-v2 .service-visual-stage {
    font-size: 0.58rem;
  }

  body.page-v2 .service-visual-rail {
    inset: 30% 10% 36% 10%;
  }

  body.page-v2 .service-visual-tags {
    left: auto;
    bottom: auto;
    max-width: 100%;
  }

  body.page-v2 .service-visual-tags span {
    min-height: 1.75rem;
    font-size: 0.7rem;
  }

  body.page-v2 .service-visual-note {
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0.8rem;
    border-radius: 18px;
  }

  body.page-v2 .service-visual-note strong {
    font-size: 0.98rem;
  }

  body.page-v2 .service-card-body {
    padding: 1.15rem 0.35rem 0.45rem;
  }

  body.page-v2 .service-card-body::before {
    display: none;
  }

  body.page-v2 .service-copy-top {
    align-items: flex-start;
  }

  body.page-v2 .service-card-body h3 {
    max-width: 11ch;
    font-size: 1.65rem;
    line-height: 1;
  }

  body.page-v2 .service-card-body > p {
    max-width: none;
    font-size: 1rem;
  }
}


/* ============================================================
   V2: PRODUCTS SECTION REFINEMENT
   Smaller logos + subtle Column-inspired dot field
   ============================================================ */

body.page-v2 .products-shell {
  overflow: visible;
}

body.page-v2 .products-section {
  /* clip (not visible) - the floater image bleeds off its right edge by
     design, and since this section spans the full viewport width,
     leaving it unclipped lets that bleed become real page-level
     horizontal overflow at every screen size. */
  overflow: hidden;
  z-index: 5;
  isolation: isolate;
  padding-bottom: 2.85rem;
}

body.page-v2 .products-heading {
  font-weight: 700;
  margin-bottom: 1.1rem;
}

body.page-v2 .products-card {
  position: relative;
  overflow: visible;
  isolation: isolate;
  padding: 24px 26px 22px;
  gap: 1.05rem;
  margin-bottom: 0.2rem;
  z-index: 2;
}

body.page-v2 .products-card::before {
  content: "";
  position: absolute;
  inset: 18px 18px 18px 52%;
  border-radius: 24px;
  background-image: radial-gradient(circle at 1px 1px, rgba(46, 46, 46, 0.18) 1px, transparent 1.25px);
  background-size: 18px 18px;
  opacity: 0.26;
  mask-image: radial-gradient(circle at 64% 46%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.72) 38%, rgba(0, 0, 0, 0.22) 72%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

body.page-v2 .products-tabs,
body.page-v2 .products-frame {
  position: relative;
  z-index: 1;
}

body.page-v2 .products-frame {
  align-items: center;
  gap: 1.35rem;
}

body.page-v2 .product-panel {
  align-self: center;
  justify-content: center;
  overflow: visible;
  padding: 0.65rem 1.4rem;
}

body.page-v2 .product-link {
  position: relative;
  z-index: 2;
}

body.page-v2 .product-showcase {
  min-height: 27.5rem;
}

body.page-v2 .product-showcase-bloom {
  top: 0.75rem;
  left: auto;
  right: 0.75rem;
  width: min(23.75rem, calc(100% - 1.5rem));
  background:
    radial-gradient(circle at 27% 26%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0.72) 31%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(
      ellipse at 68% 18%,
      rgba(247, 220, 238, 0.88) 0%,
      rgba(249, 229, 242, 0.7) 45%,
      rgba(255, 255, 255, 0.42) 70%,
      rgba(255, 255, 255, 0) 90%
    );
}

body.page-v2 .product-showcase-stage {
  min-height: 27.5rem;
  aspect-ratio: 569 / 514;
}

body.page-v2 .product-showcase.is-swoppa .product-showcase-pattern {
  display: none;
}

body.page-v2 .product-showcase.is-qa .product-showcase-pattern {
  display: none;
}

body.page-v2 .product-showcase.is-loaneo .product-showcase-pattern {
  display: none;
}

body.page-v2 .product-showcase.is-swoppa .product-showcase-stage {
  width: min(100%, 32rem);
  min-height: 27.5rem;
  aspect-ratio: 569 / 514;
}

.product-swoppa-shot,
.product-qa-shot,
.product-loaneo-shot {
  position: absolute;
  margin: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}

.product-swoppa-shot img,
.product-qa-shot img,
.product-loaneo-shot img {
  display: block;
  width: 100%;
  height: auto;
}

body.page-v2 .product-showcase.is-swoppa .product-swoppa-shot-gauge {
  top: 7%;
  left: 8%;
  width: 41%;
  z-index: 1;
  animation: product-float-main 11.8s var(--ease-soft) infinite;
  animation-delay: -2.4s;
}

body.page-v2 .product-showcase.is-swoppa .product-swoppa-shot-score {
  right: 7%;
  bottom: 20%;
  width: 50%;
  z-index: 2;
  animation: product-float-soft 9.6s var(--ease-soft) infinite;
}

body.page-v2 .product-showcase.is-qa .product-showcase-stage {
  width: min(100%, 32rem);
  min-height: 27.5rem;
  aspect-ratio: 569 / 514;
}

body.page-v2 .product-showcase.is-qa .product-qa-shot-journey {
  top: 9%;
  left: 5%;
  width: 56%;
  z-index: 1;
  animation: product-float-soft 9.6s var(--ease-soft) infinite;
}

body.page-v2 .product-showcase.is-qa .product-qa-shot-uptime {
  right: 4%;
  bottom: 13%;
  width: 49%;
  z-index: 2;
  animation: product-float-main 11.8s var(--ease-soft) infinite;
  animation-delay: -2.4s;
}

body.page-v2 .product-showcase.is-loaneo .product-showcase-stage {
  width: min(100%, 32rem);
  min-height: 27.5rem;
  aspect-ratio: 569 / 514;
}

body.page-v2 .product-showcase.is-loaneo .product-loaneo-shot-quote {
  top: 14%;
  left: 4%;
  width: 61%;
  z-index: 1;
  animation: product-float-soft 9.6s var(--ease-soft) infinite;
}

body.page-v2 .product-showcase.is-loaneo .product-loaneo-shot-approved {
  right: 7%;
  bottom: 9%;
  width: 35%;
  z-index: 2;
  animation: product-float-main 11.8s var(--ease-soft) infinite;
  animation-delay: -2.4s;
}

body.page-v2 .product-tab-logo {
  width: min(168px, calc(100% - 1.35rem));
  height: 26px;
}

body.page-v2 .product-tab,
body.page-v2 .product-tab:hover,
body.page-v2 .product-tab:focus-visible,
body.page-v2 .product-tab.is-active {
  transform: none;
}

body.page-v2 .product-tab img.product-tab-logo-reduced {
  height: 19px;
  transform: translateY(-4px);
}

body.page-v2 .product-tab img.product-tab-logo-swoppa {
  transform: translateY(1px) scale(1.1);
}

body.page-v2 .product-tab img.product-tab-logo-endevr {
  transform: translateY(-2px);
}

body.page-v2 .product-tab img.product-tab-logo-viewthru {
  transform: translateY(-2px) scale(0.91);
}

body.page-v2 .product-tab img.product-tab-logo-loaneo {
  transform: translateY(-3px) scale(0.82);
}

.product-tab-text-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b8b8b8;
  font-family: "Grift Variable", "Grift", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  transition: color var(--motion-base) ease;
}

.product-tab-logo-qa {
  font-size: 1.72rem;
}

.product-tab:not(.is-active):hover .product-tab-text-logo,
.product-tab:not(.is-active):focus-visible .product-tab-text-logo {
  color: #adadad;
}

.product-tab.is-active .product-tab-text-logo {
  color: #fff;
}

body.page-v2 .product-showcase-pattern {
  display: none;
}

@media (max-width: 1024px) {
  body.page-v2 .products-card::before {
    inset: 16px 16px 16px 44%;
    opacity: 0.22;
  }
}

@media (max-width: 640px) {
  body.page-v2 .products-card {
    padding: 1rem;
    gap: 1rem;
  }

  body.page-v2 .product-panel {
    padding: 1.4rem 0.35rem 0.4rem;
  }

  body.page-v2 .products-card::before {
    inset: 14px;
    background-size: 14px 14px;
    opacity: 0.16;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.16) 36%, transparent 82%);
  }

  body.page-v2 .product-showcase {
    min-height: auto;
  }

  body.page-v2 .product-showcase-bloom {
    top: -0.85rem;
    left: auto;
    right: 0;
    width: min(18.75rem, calc(94% + 0.75rem));
  }

  body.page-v2 .product-showcase-stage {
    min-height: auto;
  }

  body.page-v2 .product-tab-logo {
    width: min(100%, 7rem);
    height: 1.05rem;
  }

  body.page-v2 .product-tab img.product-tab-logo-reduced {
    height: 0.92rem;
    transform: translateY(-2px);
  }

  body.page-v2 .product-tab img.product-tab-logo-swoppa {
    transform: translateY(3px) scale(1.1);
  }

  body.page-v2 .product-tab img.product-tab-logo-endevr {
    transform: translateY(0);
  }

  body.page-v2 .product-tab img.product-tab-logo-viewthru {
    transform: translateY(0) scale(0.91);
  }
}

/* ============================================================
   SERVICES — v3 TABBED NAVIGATOR
   Neutralises the legacy scroll-stacked card layout and
   introduces a two-column navigator (desktop) that collapses
   to an accordion on small screens.
   ============================================================ */

/* Reset the legacy stacked-scroll sizing on the section */
.services-section.services-v3 {
  min-height: auto;
  padding: 6.5rem 0 7rem;
}

/* Header / intro */
.services-v3 .svc-shell {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.75rem);
}

.services-v3 .svc-intro {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}

.services-v3 .svc-intro h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  margin: 0;
}

.services-v3 .svc-intro p {
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  letter-spacing: var(--body-copy-letter-spacing);
  line-height: var(--body-copy-line-height);
  color: rgba(46, 46, 46, 0.68);
  margin: 0;
}

.services-v3 .svc-intro .services-pill {
  margin-inline: 0;
}

/* Two-column grid: trigger in col 1, detail panels overlap in col 2 */
.services-v3 .svc-stack {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;
  align-items: start;
}

/* Left column — navigator items */
.services-v3 .svc-item-trigger {
  grid-column: 1;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding: 1.05rem 1rem 1.05rem 1.1rem;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  opacity: 0.55;
  transition: opacity var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard);
}

.services-v3 .svc-item-trigger + .svc-item-trigger {
  border-top: 1px solid rgba(46, 46, 46, 0.08);
}

.services-v3 .svc-item-trigger:hover {
  opacity: 0.9;
  background: rgba(46, 46, 46, 0.03);
}

.services-v3 .svc-item-trigger:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  opacity: 1;
}

.services-v3 .svc-item-trigger.is-active {
  opacity: 1;
  border-left-color: var(--pink);
  background: transparent;
}

.services-v3 .svc-item-num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pink);
}

.services-v3 .svc-item-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Right column — detail panels (stacked, fade-swapped) */
.services-v3 .svc-item-body {
  grid-column: 2;
  grid-row: 1 / span 7;
  position: relative;
  overflow: hidden;
  padding: 2.5rem 2.75rem 2.75rem;
  border-radius: var(--radius-lg);
  background: #ffffff;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-left: 4px solid var(--svc-accent, var(--pink));
  box-shadow: 0 18px 44px rgba(46, 46, 46, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    visibility var(--motion-base) var(--ease-standard);
  min-height: 22rem;
  align-self: stretch;
}

.services-v3 .svc-item-body.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.services-v3 .svc-detail-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--svc-accent, var(--pink));
}

.services-v3 .svc-detail-watermark {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(7rem, 14vw, 12rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.08em;
  color: rgba(var(--svc-accent-rgb, 46, 46, 46), 0.08);
  pointer-events: none;
  user-select: none;
}

.services-v3 .svc-detail-category {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  padding: 0.4rem 0.85rem;
  margin: 0 0 1.4rem;
  border-radius: 999px;
  background: rgba(var(--svc-accent-rgb, 46, 46, 46), 0.1);
  color: rgba(var(--svc-accent-rgb, 46, 46, 46), 1);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

.services-v3 .svc-detail-title {
  position: relative;
  z-index: 1;
  margin: 0 0 1.4rem;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
}

.services-v3 .svc-detail-copy {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  max-width: 44ch;
  color: rgba(46, 46, 46, 0.72);
}

.services-v3 .svc-detail-copy:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   TABLET — tighten the layout
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .services-v3 .svc-stack {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 2rem;
  }

  .services-v3 .svc-item-body {
    padding: 2rem 2rem 2.25rem;
  }
}

/* ----------------------------------------------------------
   MOBILE — accordion
   ---------------------------------------------------------- */
@media (max-width: 720px) {
  .services-section.services-v3 {
    padding: 4.5rem 0 5rem;
  }

  .services-v3 .svc-shell {
    gap: 2rem;
  }

  .services-v3 .svc-intro h2 {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }

  .services-v3 .svc-stack {
    display: block;
    border-top: 1px solid rgba(46, 46, 46, 0.1);
  }

  .services-v3 .svc-item-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1.1rem 0.25rem;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(46, 46, 46, 0.1);
    border-radius: 0;
    opacity: 1;
    position: relative;
  }

  .services-v3 .svc-item-trigger + .svc-item-trigger {
    border-top: 0;
  }

  .services-v3 .svc-item-trigger::after {
    content: "";
    margin-left: auto;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 1.5px solid var(--text);
    border-bottom: 1.5px solid var(--text);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--motion-base) var(--ease-standard);
  }

  .services-v3 .svc-item-trigger.is-active::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .services-v3 .svc-item-trigger:hover {
    background: transparent;
  }

  .services-v3 .svc-item-trigger.is-active {
    border-left: 0;
  }

  .services-v3 .svc-item-name {
    font-size: 1.05rem;
  }

  .services-v3 .svc-item-body {
    grid-column: auto;
    grid-row: auto;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding: 1.5rem 1.25rem 1.75rem;
    margin: 0 0 0;
    border-radius: 0;
    border: 0;
    border-left: 4px solid var(--svc-accent, var(--pink));
    border-bottom: 1px solid rgba(46, 46, 46, 0.1);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    min-height: 0;
  }

  .services-v3 .svc-item-body.is-active {
    display: block;
  }

  .services-v3 .svc-detail-bar {
    display: none;
  }

  .services-v3 .svc-detail-watermark {
    font-size: 5rem;
    top: 0.5rem;
    right: 0.75rem;
  }

  .services-v3 .svc-detail-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .services-v3 .svc-detail-category {
    margin-bottom: 0.9rem;
  }
}

/* Reduced motion — drop the swap transitions */
@media (prefers-reduced-motion: reduce) {
  .services-v3 .svc-item-trigger,
  .services-v3 .svc-item-body {
    transition: none;
  }
}

/* ============================================================
   PS-STAGE-PROBLEM — Matter.js physics drop
   Shapes fall with gravity, collide, and settle. JS writes
   transform: translate() rotate() on each frame.
   ============================================================ */

.ps-stage-matter {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  /* Narrower column so the pile grows vertically rather than spreading. */
  width: clamp(320px, 38vw, 460px);
  height: clamp(340px, 38vw, 440px);
  margin-left: 100px;
  cursor: default;
}

/* Neutralise the legacy CSS-positioned shape rules for the physics stage.
   JS positions via transform; starting position is above the viewport. */
.ps-stage-matter .ps-shape,
.ps-stage-matter .ps-pill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  margin: 0;
  opacity: 0;
  transform: translate3d(-200px, -400px, 0);
  transform-origin: center center;
  will-change: transform, opacity;
  pointer-events: auto;
  cursor: grab;
  transition: opacity 220ms ease-out;
}

.ps-stage-matter .ps-shape.is-live,
.ps-stage-matter .ps-pill.is-live {
  opacity: 1;
}

.ps-stage-matter .ps-shape:active,
.ps-stage-matter .ps-pill:active {
  cursor: grabbing;
}

/* ── Shape skins ── */
.ps-stage-matter .ps-shape {
  width: var(--size, 80px);
  height: var(--size, 80px);
  background: var(--fill, #2e2e2e);
  /* Remove the legacy --s-w/--s-h inputs */
  aspect-ratio: auto;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.ps-stage-matter .ps-square {
  width: var(--w, 80px);
  height: var(--h, 80px);
  border-radius: 6px;
}

.ps-stage-matter .ps-circle {
  border-radius: 50%;
}

.ps-stage-matter .ps-triangle {
  background: transparent;
  box-shadow: none;
  width: var(--size, 80px);
  height: var(--size, 80px);
  /* Visual centroid sits at ~65.3% down the box, not the centre.
     Matching transform-origin keeps CSS rotation aligned with Matter.js. */
  transform-origin: 50% 65.3%;
}
.ps-stage-matter .ps-triangle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fill, #2e2e2e);
  clip-path: polygon(50% 4%, 96% 96%, 4% 96%);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.ps-stage-matter .ps-hex {
  background: transparent;
  box-shadow: none;
  width: var(--size, 80px);
  height: var(--size, 80px);
}
.ps-stage-matter .ps-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fill, #2e2e2e);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.ps-stage-matter .ps-ring {
  background: transparent;
  border: 6px solid var(--fill, #ff0099);
  box-shadow: none;
  border-radius: 50%;
}

/* Dotted pattern overlay */
.ps-stage-matter .ps-dotted {
  background-color: var(--fill, #2e2e2e);
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.26) 1.6px,
    transparent 2.2px
  );
  background-size: 11px 11px;
}
.ps-stage-matter .ps-hex.ps-dotted::before,
.ps-stage-matter .ps-triangle.ps-dotted::before {
  background-color: var(--fill, #2e2e2e);
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.26) 1.6px,
    transparent 2.2px
  );
  background-size: 11px 11px;
}

/* Striped pattern (45-degree) */
.ps-stage-matter .ps-striped {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.12) 0 3px,
    transparent 3px 10px
  );
  background-color: var(--fill, #f4f4f4);
}

/* ── Pill styling inside Matter stage ── */
.ps-stage-matter .ps-pill {
  background: var(--pill-bg);
  color: var(--pill-c, #fff);
  border-radius: 100px;
  padding: 0.55rem 1.25rem;
  font-family: var(--font-display), "Grift", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

/* Reduced motion — show shapes in a simple scattered static layout */
@media (prefers-reduced-motion: reduce) {
  .ps-stage-matter .ps-shape,
  .ps-stage-matter .ps-pill {
    transition: none;
  }
}

/* Mobile tweak — full-width column, no right offset, fewer cursor hints */
@media (max-width: 720px) {
  .ps-stage-matter {
    width: 100%;
    height: clamp(280px, 72vw, 380px);
    margin-left: 0;
  }
  .ps-stage-matter .ps-shape,
  .ps-stage-matter .ps-pill {
    cursor: default;
  }
}

/* ============================================================
   SERVICES — v4 STACKING SCROLL CARDS
   Each service is a full-viewport slide whose inner wrap gets
   pinned by GSAP ScrollTrigger. As you scroll past, the card
   tilts / scales / fades out; the next card slides in underneath.
   ============================================================ */

.services-section.svc-scroll {
  min-height: auto;
  padding: 0;
  background: var(--bg, #f6f6f8);
  position: relative;
  /* Contain the per-slide z-indexes so they can't leak above the
     ps-section / why-leadly card stack. */
  isolation: isolate;
  z-index: 0;
}

/* Intro header sits above the stack, before the pinned region. */
.svc-scroll-intro {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(4rem, 7vw, 6.5rem);
  text-align: center;
}

.svc-scroll-intro .services-pill {
  margin-inline: auto;
}

.svc-scroll-intro h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  margin: 0;
}

.svc-scroll-intro p {
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  letter-spacing: var(--body-copy-letter-spacing);
  line-height: var(--body-copy-line-height);
  color: rgba(46, 46, 46, 0.68);
  margin: 0;
}

body.page-v2 .services-section.svc-scroll .svc-scroll-intro {
  justify-items: center;
  text-align: center;
}

body.page-v2 .services-section.svc-scroll .svc-scroll-intro .services-pill,
body.page-v2 .services-section.svc-scroll .svc-scroll-intro h2,
body.page-v2 .services-section.svc-scroll .svc-scroll-intro p {
  position: relative;
  z-index: 2;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.svc-scroll-stack {
  position: relative;
  /* Each slide is 100vh; pin overlaps the next slide on top (pinSpacing:false) */
}

.svc-scroll-anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--nav-height, 109px) + 0.75rem);
}

.svc-slide {
  position: relative;
  min-height: 100vh;
  /* Ascending z-index so later slides render on top during the
     pinSpacing:false overlap. Scoped inside the section's
     stacking context (isolation: isolate on .services-section). */
}
.svc-slide:nth-child(1) { z-index: 1; }
.svc-slide:nth-child(2) { z-index: 2; }
.svc-slide:nth-child(3) { z-index: 3; }
.svc-slide:nth-child(4) { z-index: 4; }
.svc-slide:nth-child(5) { z-index: 5; }
.svc-slide:nth-child(6) { z-index: 6; }
.svc-slide:nth-child(7) { z-index: 7; }

.svc-slide-wrap {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height, 109px) + 0.5rem) clamp(1rem, 3vw, 2.5rem) 2rem;
  box-sizing: border-box;
  /* 3D perspective so the rotationX tilt reads */
  perspective: 1800px;
}

.svc-card {
  --card-radius: clamp(22px, 2.2vw, 30px);
  position: relative;
  display: grid;
  grid-template-columns: 58% 42%;
  width: min(100%, 1240px);
  height: min(78vh, 640px);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #252525;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.26),
    0 10px 30px rgba(0, 0, 0, 0.14);
  /* Pivot near the top-centre so the card tilts away like it's being
     tucked behind the card coming up from below. */
  transform-origin: center 10%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* ── Dark (left) side ── */
.svc-card-dark {
  position: relative;
  padding: clamp(1.75rem, 2.8vw, 3rem);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1.5rem, 2.4vw, 2.4rem);
  color: #f4f4f4;
  min-width: 0;
}

.svc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.svc-card-brand {
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f4f4f4;
}

.svc-card-brand-dot {
  color: var(--pink, #ff0099);
}

.svc-card-num {
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}

.svc-card-num em {
  color: var(--svc-accent, var(--pink));
  font-style: normal;
  font-weight: 700;
}

.svc-card-copy {
  display: grid;
  gap: clamp(0.8rem, 1vw, 1.15rem);
  align-content: start;
  max-width: 40rem;
}

.svc-card-category {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: rgba(var(--svc-accent-rgb), 0.16);
  color: var(--svc-accent);
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
  line-height: 1;
}

.svc-card-category::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--svc-accent);
}

.svc-card-title {
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: clamp(2.1rem, 3.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0.4rem 0 0.6rem;
  color: #f4f4f4;
}

.svc-card-para {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body, sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  max-width: 40ch;
}

.svc-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  background: #f4f4f4;
  color: #2e2e2e;
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  margin-top: 1.1rem;
  transition: transform 200ms ease;
}

.svc-card-cta:hover {
  transform: translateY(-2px);
}

.svc-card-cta-arrow {
  font-size: 0.95em;
  display: inline-block;
  transition: transform 200ms ease;
}

.svc-card-cta:hover .svc-card-cta-arrow {
  transform: translate(2px, -2px);
}

/* ── Accent (right) side ── */
.svc-card-accent {
  position: relative;
  background: var(--svc-accent);
  overflow: hidden;
  padding: clamp(1.75rem, 2.8vw, 3rem);
  min-width: 0;
}

.svc-card-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: clamp(18rem, 32vw, 32rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.svc-card-foot {
  position: absolute;
  left: clamp(1.75rem, 2.8vw, 3rem);
  right: clamp(1.75rem, 2.8vw, 3rem);
  bottom: clamp(1.75rem, 2.8vw, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  z-index: 1;
}

.svc-card-tagline {
  display: grid;
  gap: 0.75rem;
  max-width: 18ch;
}

.svc-card-tagline-dash {
  width: 1.75rem;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.8);
}

.svc-card-tagline p {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.svc-card-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-end;
}

.svc-card-pills li {
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.svc-card-pills li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
}

/* ── Yellow CRO card: dark text on the yellow side so pills read ── */
.svc-card[data-svc="05"] .svc-card-pills li {
  background: rgba(255, 255, 255, 0.32);
}

/* ── Tablet: shrink the card slightly ── */
@media (max-width: 1024px) {
  .svc-card {
    grid-template-columns: 54% 46%;
    height: min(80vh, 620px);
  }
  .svc-card-watermark {
    font-size: clamp(14rem, 34vw, 26rem);
  }
}

/* ── Mobile: collapse to a single column, no pinning ── */
@media (max-width: 768px) {
  .svc-slide {
    min-height: auto;
    margin-block: 0.75rem;
  }
  .svc-slide-wrap {
    height: auto;
    padding: 0 1rem;
    perspective: none;
  }
  .svc-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: auto;
    max-height: none;
  }
  .svc-card-dark {
    padding: 1.4rem 1.25rem 1.6rem;
  }
  .svc-card-accent {
    min-height: 260px;
    padding: 1.4rem 1.25rem 5rem;
  }
  .svc-card-watermark {
    top: 55%;
    font-size: 14rem;
    right: -6%;
    left: auto;
    transform: translateY(-50%);
  }
  .svc-card-foot {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
  }
  .svc-card-title {
    font-size: 1.8rem;
  }
  .svc-card-pills {
    gap: 0.4rem;
  }
}

/* ── Reduced motion: disable tilts and fades ── */
@media (prefers-reduced-motion: reduce) {
  .svc-card {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ============================================================
   SOLUTION STAGE — Leadly product dashboard (Framer-inspired)
   Brand-disciplined: near-black surface, Leadly pink as the
   only accent, Gilroy typography, hairline borders, folder
   tree sidebar + canvas preview.
   ============================================================ */

.sol-dash {
  --d-bg:        #0a0a0a;
  --d-surface:   rgba(255, 255, 255, 0.025);
  --d-border:    rgba(255, 255, 255, 0.07);
  --d-border-2:  rgba(255, 255, 255, 0.11);
  --d-text:      #f4f4f4;
  --d-text-2:    rgba(244, 244, 244, 0.62);
  --d-text-3:    rgba(244, 244, 244, 0.4);
  --d-text-4:    rgba(244, 244, 244, 0.26);
  --d-accent:    #ff0099;
  --d-accent-2:  rgba(255, 0, 153, 0.12);
  --d-accent-3:  rgba(255, 0, 153, 0.28);
}

.ps-physics-stage.sol-system {
  position: relative;
  height: auto;
  min-height: 460px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.ps-card-solution .ps-visual-label { display: none; }

.sol-dash .dash {
  position: relative;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  background: var(--d-bg);
  border: 1px solid var(--d-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  isolation: isolate;
  font-family: var(--font-display, "Grift", system-ui, sans-serif);
  color: var(--d-text);
}

/* Topbar */
.dash-topbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--d-border);
  min-height: 40px;
  flex-shrink: 0;
}

.dash-brand {
  display: inline-flex;
  align-items: center;
  color: var(--d-text);
}

.dash-brand-logo {
  height: 15px;
  width: auto;
  display: block;
}

.dash-tabs {
  display: inline-flex;
  gap: 0.1rem;
  padding: 0.14rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--d-border);
  border-radius: 8px;
  margin-left: 0.25rem;
}

.dash-tab {
  padding: 0.28rem 0.6rem;
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--d-text-2);
  line-height: 1;
  user-select: none;
  cursor: default;
}

.dash-tab.is-active {
  background: rgba(255, 255, 255, 0.09);
  color: var(--d-text);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.dash-top-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.dash-cmd {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.22rem 0.34rem 0.22rem 0.42rem;
  border: 1px solid var(--d-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
  color: var(--d-text-3);
  font-size: 0.6rem;
  font-weight: 500;
  cursor: default;
}

.dash-cmd svg { width: 10px; height: 10px; }

.dash-kbd {
  font-family: inherit;
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.32rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--d-text-2);
  line-height: 1;
}

.dash-live {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.48rem 0.22rem 0.42rem;
  border-radius: 999px;
  background: var(--d-accent-2);
  border: 1px solid var(--d-accent-3);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-accent);
  line-height: 1;
}

.dash-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--d-accent);
  box-shadow: 0 0 0 0 rgba(255, 0, 153, 0.5);
  animation: dash-pulse 2.2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes dash-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 0, 153, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 0, 153, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(255, 0, 153, 0);   }
}

/* Body grid */
.dash-body {
  flex: 1;
  display: grid;
  grid-template-columns: 42% 1fr;
  min-height: 0;
}

/* Sidebar */
.dash-side {
  padding: 0.6rem 0.55rem 0.55rem;
  border-right: 1px solid var(--d-border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.dash-side-tabs {
  display: flex;
  gap: 0.05rem;
  padding: 0.14rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.dash-side-tab {
  flex: 1;
  text-align: center;
  padding: 0.26rem 0.3rem;
  border-radius: 4px;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--d-text-2);
  line-height: 1;
  user-select: none;
  cursor: default;
}

.dash-side-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--d-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.dash-search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.36rem 0.5rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--d-border);
  border-radius: 6px;
  font-size: 0.63rem;
  color: var(--d-text-3);
  font-weight: 500;
}

.dash-search svg { width: 10px; height: 10px; color: var(--d-text-4); }

.dash-tree {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.1rem;
}

.dash-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.4rem;
}

.dash-tree-head span {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-text-3);
}

.dash-tree-add {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--d-border);
  border-radius: 4px;
  background: transparent;
  color: var(--d-text-2);
  cursor: pointer;
  padding: 0;
}
.dash-tree-add svg { width: 7px; height: 7px; }

.dash-tree-group {
  display: flex;
  flex-direction: column;
}

.dash-row {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.34rem 0.42rem;
  border-radius: 5px;
  color: var(--d-text);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: default;
  user-select: none;
  border: 1px solid transparent;
  min-height: 24px;
}

.dash-row-leaf {
  padding-left: 1.5rem;
  color: var(--d-text-2);
}

.dash-row.is-selected {
  background: var(--d-accent-2);
  border-color: var(--d-accent-3);
  color: var(--d-text);
  box-shadow: inset 2px 0 0 var(--d-accent);
}

.dash-row.is-selected .dash-doc { color: var(--d-accent); }

.dash-chev {
  width: 9px;
  height: 9px;
  color: var(--d-text-3);
  transition: transform 160ms ease;
  flex-shrink: 0;
}
.dash-chev.is-open { transform: rotate(90deg); color: var(--d-text-2); }

.dash-folder,
.dash-doc {
  width: 11px;
  height: 11px;
  color: var(--d-text-2);
  flex-shrink: 0;
}

.dash-row-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.dash-row-count {
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--d-text-3);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}

.dash-tree-children {
  display: none;
  flex-direction: column;
}
.dash-tree-group.is-open > .dash-tree-children { display: flex; }

/* Canvas */
.dash-canvas {
  padding: 0.6rem 0.7rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.dash-canvas-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-canvas-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--d-accent);
  letter-spacing: -0.005em;
  line-height: 1;
}

.dash-canvas-dot {
  width: 7px;
  height: 7px;
  color: var(--d-accent);
}

.dash-canvas-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--d-text-3);
  line-height: 1;
}

.dash-canvas-action svg { width: 7px; height: 7px; }

.dash-frame {
  flex: 1;
  background: #141414;
  border: 1px solid var(--d-border);
  border-radius: 10px;
  padding: 0.85rem 0.9rem 0.7rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dash-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}

.dash-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.dash-preview-kicker {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-text-3);
  line-height: 1;
}

.dash-preview-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.42rem;
  border-radius: 5px;
  background: var(--d-accent-2);
  border: 1px solid var(--d-accent-3);
  color: var(--d-accent);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
}

.dash-preview-trend svg { width: 9px; height: 9px; }

.dash-preview-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--d-text);
  line-height: 1;
}

.dash-preview-chart {
  position: relative;
  flex: 1;
  min-height: 60px;
  display: flex;
}

.dash-preview-chart svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* End-of-line marker as a real HTML circle (SVG circle goes oval when
   the parent uses preserveAspectRatio="none") */
.dash-preview-end {
  position: absolute;
  top: 4.88%; /* = 4 / 82 in the SVG viewBox */
  right: 0;
  transform: translate(50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--d-accent);
  box-shadow:
    0 0 0 4px rgba(255, 0, 153, 0.2),
    0 0 10px rgba(255, 0, 153, 0.5);
  pointer-events: none;
}

.dash-preview-foot {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--d-border);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-text-3);
  line-height: 1;
}

.dash-preview-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--d-accent);
  box-shadow: 0 0 0 0 rgba(255, 0, 153, 0.55);
  animation: dash-pulse 2.2s ease-out infinite;
  flex-shrink: 0;
}

.dash-preview-sep { color: var(--d-text-4); }

/* Cursors */
.sol-cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.22rem;
  pointer-events: none;
  z-index: 5;
  will-change: transform, top, left;
}

.sol-cursor-arrow {
  width: 16px;
  height: 19px;
  fill: var(--cursor-bg, #ff0099);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
}

.sol-cursor-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.72rem;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--cursor-bg, #ff0099);
  color: var(--cursor-c, #fff);
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.sol-cursor-lucas { animation: sol-cursor-lucas 17s ease-in-out infinite; }
.sol-cursor-cath  { animation: sol-cursor-cath  19s ease-in-out -4s infinite; }
.sol-cursor-sam   { animation: sol-cursor-sam   15s ease-in-out -9s infinite; }

/* Lucas (purple) drifts in the upper area near a service marker */
@keyframes sol-cursor-lucas {
  0%   { top: 28%; left: 28%; }
  25%  { top: 26%; left: 36%; }
  50%  { top: 35%; left: 24%; }
  75%  { top: 30%; left: 38%; }
  100% { top: 28%; left: 28%; }
}
/* Cath (pink) drifts in the lower-right area near the converged dot */
@keyframes sol-cursor-cath {
  0%   { top: 60%; left: 62%; }
  25%  { top: 56%; left: 70%; }
  50%  { top: 64%; left: 58%; }
  75%  { top: 58%; left: 68%; }
  100% { top: 60%; left: 62%; }
}
/* Sam keyframe kept (unused now — only Lucas + Cath are rendered) */
@keyframes sol-cursor-sam {
  0%, 100% { top: 50%; left: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-cursor-lucas,
  .sol-cursor-cath,
  .sol-cursor-sam,
  .dash-live-dot,
  .dash-preview-pulse {
    animation: none;
  }
}

@media (max-width: 960px) {
  .dash-cmd { display: none; }
}

@media (max-width: 720px) {
  .ps-physics-stage.sol-system { min-height: 420px; }
  .dash-body { grid-template-columns: 46% 1fr; }
  .dash-side-tab:nth-child(3) { display: none; }
  .dash-preview-value { font-size: 1.55rem; }
}

/* ============================================================
   SOLUTION STAGE — Channel Mix
   Visualises how each service contributes to the combined
   growth result. Two team cursors: Lucas (purple, ECRM)
   + Cath (pink, chart).
   ============================================================ */

.sol-mix {
  --m-bg:        #0c0c0d;
  --m-surface:   rgba(255, 255, 255, 0.025);
  --m-border:    rgba(255, 255, 255, 0.07);
  --m-text:      #f4f4f4;
  --m-text-2:    rgba(244, 244, 244, 0.6);
  --m-text-3:    rgba(244, 244, 244, 0.38);
  --m-accent:    #ff0099;
  --m-accent-2:  rgba(255, 0, 153, 0.12);
  --m-accent-3:  rgba(255, 0, 153, 0.28);
}

/* The mix overrides the previous dashboard sizing on the same stage class */
.ps-physics-stage.sol-system.sol-mix {
  position: relative;
  height: auto;
  min-height: 440px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.sol-mix .mix {
  position: relative;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: 0.95rem 1rem 1.05rem;
  box-shadow:
    0 26px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  isolation: isolate;
  font-family: var(--font-display, "Grift", system-ui, sans-serif);
  color: var(--m-text);
}

/* ── Header ── */
.sol-mix .mix-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--m-border);
}

.sol-mix .mix-head-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--m-accent);
  box-shadow: 0 0 8px rgba(255, 0, 153, 0.6);
}

.sol-mix .mix-head-label {
  flex: 1;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-text-2);
  line-height: 1;
}

.sol-mix .mix-head-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: var(--m-accent-2);
  border: 1px solid var(--m-accent-3);
  color: var(--m-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

.sol-mix .mix-head-stat svg {
  width: 9px;
  height: 9px;
}

/* ── Channel rows ── */
.sol-mix .mix-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.4rem 0;
}

.sol-mix .mix-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.32rem 0.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}

.sol-mix .mix-row.is-highlight {
  background: var(--m-accent-2);
  border-color: var(--m-accent-3);
}

.sol-mix .mix-row-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--m-text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-mix .mix-row-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.sol-mix .mix-row-fill {
  position: absolute;
  inset: 0;
  width: var(--w, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(255, 0, 153, 0.55) 0%,
    rgba(255, 0, 153, 0.95) 100%);
  box-shadow: 0 0 10px rgba(255, 0, 153, 0.35);
  transform-origin: left center;
  animation: mix-bar-fill 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--row-delay, 0ms);
}

.sol-mix .mix-row:nth-child(1) .mix-row-fill { --row-delay: 80ms; }
.sol-mix .mix-row:nth-child(2) .mix-row-fill { --row-delay: 200ms; }
.sol-mix .mix-row:nth-child(3) .mix-row-fill { --row-delay: 320ms; }
.sol-mix .mix-row:nth-child(4) .mix-row-fill { --row-delay: 440ms; }
.sol-mix .mix-row:nth-child(5) .mix-row-fill { --row-delay: 560ms; }

@keyframes mix-bar-fill {
  from { transform: scaleX(0); opacity: 0.4; }
  to   { transform: scaleX(1); opacity: 1;   }
}

.sol-mix .mix-row-pct {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--m-text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sol-mix .mix-row.is-highlight .mix-row-pct,
.sol-mix .mix-row.is-highlight .mix-row-name {
  color: var(--m-accent);
}

/* ── Combined growth chart ── */
.sol-mix .mix-chart {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--m-border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sol-mix .mix-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-text-3);
  line-height: 1;
}

.sol-mix .mix-chart-canvas {
  position: relative;
  height: 56px;
}

.sol-mix .mix-chart-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sol-mix .mix-chart-end {
  position: absolute;
  top: 3.57%; /* matches y=2 in viewBox 56 high */
  right: 0;
  transform: translate(50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--m-accent);
  box-shadow:
    0 0 0 4px rgba(255, 0, 153, 0.18),
    0 0 14px rgba(255, 0, 153, 0.55);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sol-mix .mix-row-fill { animation: none; transform: scaleX(1); }
}


/* ============================================================
   SOLUTION STAGE — CONVERGENCE
   Replicates dotconnect.vc visual (services → dots → big pink
   dot + arrow). Transform-only animation = no var-interpolation
   issues, runs reliably in every browser.
   ============================================================ */

.ps-physics-stage.sol-system.sol-conv {
  position: relative;
  height: auto;
  min-height: 460px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.sol-conv .conv {
  position: relative;
  width: 100%;
  min-height: 460px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 0, 153, 0.06) 0%, transparent 60%),
    #0c0c0d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--font-display, "Grift", sans-serif);
}

/* Each marker is centred and translated to its perimeter spot via
   per-nth-child --tx/--ty offsets in pixels (no percentage maths). */
.sol-conv .conv-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)));
  animation: conv-travel 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
  z-index: 1;
}

.sol-conv .conv-marker:nth-child(1) { --tx:    0px; --ty: -180px; }
.sol-conv .conv-marker:nth-child(2) { --tx: -160px; --ty: -110px; }
.sol-conv .conv-marker:nth-child(3) { --tx:  160px; --ty: -110px; }
.sol-conv .conv-marker:nth-child(4) { --tx: -200px; --ty:    0px; }
.sol-conv .conv-marker:nth-child(5) { --tx:  200px; --ty:    0px; }
.sol-conv .conv-marker:nth-child(6) { --tx: -140px; --ty:  130px; }
.sol-conv .conv-marker:nth-child(7) { --tx:  140px; --ty:  130px; }

@keyframes conv-travel {
  0%, 26%   { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))); }
  52%, 80%  { transform: translate(-50%, -50%); }
  100%      { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))); }
}

/* Card pill — collapses from full pill to just the dot, then vanishes */
.sol-conv .conv-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  animation: conv-card 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes conv-card {
  0%, 18% { padding: 0.4rem 0.75rem; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
  28%     { padding: 0.18rem; background: transparent; border-color: transparent; }
  52%, 64% { padding: 0.18rem; background: transparent; border-color: transparent; transform: scale(0.6); opacity: 1; }
  72%, 80% { padding: 0.18rem; background: transparent; border-color: transparent; transform: scale(0); opacity: 0; }
  92%, 100% { padding: 0.4rem 0.75rem; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); transform: scale(1); opacity: 1; }
}

.sol-conv .conv-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff0099;
  box-shadow: 0 0 0 1px rgba(255, 0, 153, 0.3), 0 0 8px rgba(255, 0, 153, 0.5);
  flex-shrink: 0;
}

.sol-conv .conv-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.005em;
  animation: conv-label 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes conv-label {
  0%, 18%   { opacity: 1; max-width: 200px; }
  28%, 80%  { opacity: 0; max-width: 0; margin-left: -0.5rem; }
  92%, 100% { opacity: 1; max-width: 200px; margin-left: 0; }
}

/* ── The central core (big pink dot + halo + arrow) ── */
.sol-conv .conv-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}

.sol-conv .conv-core-glow {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 153, 0.55) 0%, rgba(255, 0, 153, 0) 65%);
  opacity: 0;
  animation: conv-core-glow 6.5s ease-in-out infinite;
}

.sol-conv .conv-core-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff66c4 0%, #ff0099 55%, #c10079 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 32px rgba(255, 0, 153, 0.55);
  transform: scale(0);
  animation: conv-core-grow 6.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.sol-conv .conv-core-arrow {
  position: absolute;
  width: 38px;
  height: 38px;
  color: #fff;
  opacity: 0;
  transform: translate(-30%, 30%) scale(0.4);
  animation: conv-core-arrow 6.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

@keyframes conv-core-grow {
  0%, 48%   { transform: scale(0);   opacity: 0; }
  60%       { transform: scale(1.15); opacity: 1; }
  66%, 80%  { transform: scale(1);   opacity: 1; }
  90%, 100% { transform: scale(0);   opacity: 0; }
}

@keyframes conv-core-glow {
  0%, 48%   { opacity: 0;   transform: scale(0.5); }
  60%, 80%  { opacity: 0.95; transform: scale(1);  }
  90%, 100% { opacity: 0;   transform: scale(0.5); }
}

@keyframes conv-core-arrow {
  0%, 62%   { opacity: 0; transform: translate(-30%, 30%) scale(0.3); }
  72%       { opacity: 1; transform: translate(0, 0) scale(1); }
  82%       { opacity: 1; transform: translate(0, 0) scale(1); }
  90%, 100% { opacity: 0; transform: translate(-30%, 30%) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .sol-conv .conv-marker,
  .sol-conv .conv-card,
  .sol-conv .conv-card-label,
  .sol-conv .conv-core-glow,
  .sol-conv .conv-core-dot,
  .sol-conv .conv-core-arrow { animation: none !important; }
  .sol-conv .conv-core-dot { transform: scale(1); opacity: 1; }
  .sol-conv .conv-core-arrow { opacity: 1; transform: translate(0,0) scale(1); }
}

/* ============================================================
   PRODUCTS — brand-aligned typography + Pruuv text wordmark
   ============================================================ */

/* Nav dropdowns — slightly smaller than the original sizing. */
.nav-about-panel {
  width: clamp(15rem, 22vw, 18.5rem);
  padding: 0.7rem;
  gap: 0.7rem;
  grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 1fr);
}

.nav-about-media {
  height: 5.6rem;
}

.nav-about-links {
  gap: 0.45rem;
}

.nav-about-subpage {
  padding: 0.7rem 0.85rem;
  font-size: 0.86rem;
  border-radius: 14px;
}

/* Services nav dropdown — reuses the About panel styling but with 3 category
   buttons. The image fills the height of the buttons column exactly: the
   image is absolutely positioned so its natural aspect ratio doesn't push
   the row taller than the buttons. */
.nav-services-wrap .nav-about-panel {
  align-items: stretch;
}

.nav-services-wrap .nav-about-media {
  position: relative;
  height: auto;
  min-height: 0;
  align-self: stretch;
}

.nav-services-wrap .nav-about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Services intro floating padel — overlay on the right side of the viewport,
   pinned to the intro region of the services section. Critical: z-index is
   below the .svc-slide cards (which are z-index 1-7) so cards always render
   on top, and the section uses overflow: clip to prevent the image from
   visually bleeding into the products section below. */
.svc-floater {
  position: absolute;
  /* Anchored to the viewport's right edge using calc — extends past
     the centered intro container so it sits on the right side of the
     SCREEN (not the right side of the centered text block). */
  right: calc((100% - 100vw) / 2 + 1rem);
  top: calc(clamp(14rem, 39vh, 21rem) - 120px);
  width: clamp(6.75rem, 9vw, 9rem);
  height: auto;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 28px 36px rgba(46, 46, 46, 0.18));
  animation: svc-floater-float 8.4s ease-in-out infinite;
  transform-origin: center center;
}

.services-section.svc-scroll.is-horizontal-active .svc-floater {
  animation: none;
  transform: translate3d(0, 0, 0) rotate(-2deg);
}

@keyframes svc-floater-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  50% {
    transform: translate3d(0, -12px, 0) rotate(1.6deg);
  }
}

/* On narrower viewports the centered title block leaves less right-side
   room — bleed the chess piece slightly off-screen so it doesn't crash
   into the title. */
@media (max-width: 1100px) {
  .svc-floater {
    right: -6vw;
    top: calc(clamp(14rem, 39vh, 20rem) - 60px);
    width: clamp(6.1rem, 10.8vw, 8.1rem);
  }
}

@keyframes svc-floater-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotate(2deg);
  }
}

@media (max-width: 900px) {
  .svc-floater {
    width: clamp(5.4rem, 13.5vw, 7.2rem);
    right: clamp(0.5rem, 2vw, 2rem);
    top: calc(clamp(13rem, 37vh, 18rem) - 60px);
  }
}

@media (max-width: 640px) {
  .svc-floater {
    display: block;
    right: -3.75rem;
    top: calc(clamp(11rem, 33vh, 15rem) - 60px);
    width: clamp(4.5rem, 16.2vw, 5.6rem);
  }
}

/* ----------------------------------------------------------
   PRODUCTS — wide racket image floats above the products card
   ---------------------------------------------------------- */
body.page-v2 .products-section {
  position: relative;
  overflow: hidden;
}

.products-floater {
  position: absolute;
  right: -2vw;
  top: clamp(1.8rem, 3vw, 2.7rem);
  width: 18.48vw;
  max-width: 22rem;
  height: auto;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(46, 46, 46, 0.18));
  animation: products-floater-drift 9s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

/* Prevent the products heading lines from wrapping to more than two lines */
.products-heading .products-line {
  display: block;
  white-space: nowrap;
}

/* Ensure products heading keeps the original font size and line-height */
.products-heading .products-line {
  font-size: clamp(2.5rem, 4vw, 55px);
  /* match testimonial titles' tighter line spacing */
  line-height: 0.95;
}

/* Center the products intro block on screen and centre-align text */
.products-shell,
.products-intro {
  display: grid;
  justify-items: center;
  text-align: center;
}

.products-intro {
  margin-bottom: 2rem;
}

.products-heading {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Allow the products heading to size naturally and remain centered on-screen */
.products-heading {
  max-width: none !important;
  width: auto;
}

@media (max-width: 640px) {
  /* Below this width the heading no longer fits on one line per span -
     let it wrap naturally instead of forcing page-wide horizontal overflow */
  .products-heading .products-line {
    white-space: normal;
  }

  .products-heading {
    max-width: 92vw !important;
  }
}

/* Ensure product panels keep left-aligned copy (override intro centering) */
.product-panel,
.product-panel .product-title,
.product-panel .product-copy {
  text-align: left;
}
.product-panel {
  justify-items: start;
}

/* Product tag: pill that reuses why-tag colour variables but remains static */
.product-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding: 0.36rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-body, "Sequel Sans", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #000;
  background: var(--tag-bg, #ffd1ec);
  border: 0.9px dashed var(--tag-border, #ff94d4);
}

/* Constrain and centre the intro paragraph so it aligns with the heading and screen */
.products-overview {
  max-width: 640px;
  margin: -15px auto 0; /* lift paragraph 15px closer to heading */
  color: rgba(46, 46, 46, 0.68);
  text-align: center;
}

.products-floater {
  top: clamp(1.2rem, 2.2vw, 1.8rem);
}

/* Ensure contact intro paragraph uses the same body copy size/style as products overview */
.contact-copy p:not(.eyebrow) {
  font-size: var(--body-copy-size);
  line-height: var(--body-copy-line-height);
  color: var(--text-soft);
}

@keyframes products-floater-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  50% {
    transform: translate3d(0, -8px, 0) rotate(2deg);
  }
}

@media (max-width: 900px) {
  /* Once the intro copy and tabs stack to full-width/centered on
     tablet, this floater's bleed lands on top of the heading text and
     the tab row itself instead of floating clear beside them. */
  .products-floater {
    display: none;
  }
}

/* ----------------------------------------------------------
   SERVICES — horizontal scroll (cards slide left as user scrolls down)
   ---------------------------------------------------------- */
.svc-h-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  background: var(--bg, #f6f6f8);
}

.svc-h-track {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  /* Padding tuned so the user lands on cards 1, 2 + half of 3. */
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: 6rem;
  padding-top: clamp(2.25rem, 5vh, 3.5rem);
  height: auto;
  width: max-content;
  will-change: transform;
}

.svc-h-card {
  flex: 0 0 auto;
  width: clamp(360px, 40vw, 600px);
  height: clamp(340px, 34vw, 480px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  border-radius: 26px;
  padding: clamp(1.5rem, 2.2vw, 2.1rem);
  box-sizing: border-box;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.18);
  position: relative;
  /* 2.5px gradient stroke that catches light along the top-left edge —
     the card body is the inner #2e2e2e fill clipped to padding-box; the
     accent gradient lives between border-box and padding-box. */
  background:
    linear-gradient(#2e2e2e, #2e2e2e) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--svc-accent, #fff) 60%, #fff 40%) 0%,
      var(--svc-accent, #fff) 35%,
      var(--svc-accent, #fff) 65%,
      color-mix(in srgb, var(--svc-accent, #fff) 65%, #000 35%) 100%
    ) border-box;
  border: 2.5px solid transparent;
}

.svc-h-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.svc-h-card-num {
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.svc-h-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-accent, #fff);
}

.svc-h-card-cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--svc-accent, currentColor);
  box-shadow: 0 0 8px var(--svc-accent, transparent);
}

.svc-h-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  padding-top: 1rem;
}

.svc-h-card-title {
  margin: 0;
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 700;
  font-size: clamp(1.85rem, 2.6vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

.svc-h-card-copy {
  margin: 0;
  font-family: var(--font-body, "Sequel Sans", sans-serif);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 92%;
}

.svc-h-card-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.svc-h-card-list li {
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.svc-h-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 240ms cubic-bezier(0.32, 0, 0.18, 1);
}

.svc-h-card-cta:hover {
  color: var(--svc-accent, #fff);
}

.svc-h-card-arrow {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--svc-accent, #fff);
  transition: transform 240ms cubic-bezier(0.32, 0, 0.18, 1);
}

.svc-h-card-cta:hover .svc-h-card-arrow {
  transform: translate(2px, -2px);
}

/* Compact intro: cards can peek beneath before their own pin starts. */
body.page-v2 .services-section.svc-scroll .svc-scroll-intro {
  position: relative;
  min-height: clamp(440px, 64vh, 620px);
  align-content: end;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4.75rem, 9vh, 7rem);
}

/* Keep the services preview horizontal on narrow screens too. */
@media (max-width: 768px) {
  .svc-h-stage {
    height: 100vh;
    overflow: hidden;
    padding: 0;
  }
  .svc-h-track {
    flex-direction: row;
    width: max-content;
    height: auto;
    padding: clamp(2rem, 6vh, 3rem) 3rem 0 1.25rem;
    gap: 1rem;
  }
  .svc-h-card {
    width: min(82vw, 360px);
    height: clamp(340px, 58vh, 440px);
    min-height: 0;
  }
}

/* Pruuv tab logo — sized to match the visual height the wordmark had. */
body.page-v2 .product-tab img.product-tab-logo-pruuv {
  height: 24px;
  width: auto;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  body.page-v2 .product-tab img.product-tab-logo-pruuv {
    height: 18px;
    transform: translateY(0);
  }
}

/* ============================================================
   WHY LEADLY → SERVICES SYSTEM
   Scattered service tags resolve into three organized service areas.
   ============================================================ */

.why-services-flow {
  position: relative;
  margin-top: -110px;
  overflow: visible;
  background: var(--bg, #f4f4f0);
  isolation: isolate;
}

.why-system-section {
  position: relative;
  min-height: clamp(520px, 68vh, 650px);
  display: grid;
  align-items: center;
  padding: clamp(4rem, 5.5vw, 5.4rem) 0 clamp(1rem, 2.5vw, 2rem);
  overflow: visible;
}

.why-system-shell {
  position: relative;
  min-height: clamp(430px, 54vh, 540px);
  display: grid;
  place-items: center;
}

.why-system-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(0.82rem, 1vw, 1rem);
  max-width: 43rem;
  margin-inline: auto;
  text-align: center;
}

.why-system-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin-bottom: 1.25rem;
  padding: 0.55rem 1.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(46, 46, 46, 0.22);
  background: transparent;
  color: rgba(46, 46, 46, 0.82);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 310;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.why-system-copy h2 {
  max-width: 18ch;
  margin: 0;
  font-family: "Grift Variable", "Grift", "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(2.25rem, 3.45vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--ink, #2e2e2e);
  text-wrap: balance;
}

.why-system-copy p {
  max-width: 36rem;
  margin: 0;
  color: rgba(46, 46, 46, 0.68);
  font-family: var(--font-body, "Sequel Sans", sans-serif);
  font-size: clamp(0.98rem, 1.08vw, 1.06rem);
  font-weight: var(--body-copy-weight, 360);
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}

.why-system-copy p:nth-of-type(1) {
  max-width: 34rem;
}

.why-system-copy p:nth-of-type(2) {
  max-width: 38rem;
  color: rgba(46, 46, 46, 0.76);
}

.why-system-copy p:nth-of-type(3) {
  max-width: 32rem;
  margin-top: 0.25rem;
  color: #2e2e2e;
  font-size: clamp(1.08rem, 1.22vw, 1.18rem);
  font-weight: 760;
  line-height: 1.38;
}

.why-floating-tags {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.why-service-tag,
.service-system-tags li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding: 0.36rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-body, "Sequel Sans", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.why-service-tag {
  position: absolute;
  left: var(--tag-x);
  top: var(--tag-y);
  color: #000;
  background: var(--tag-bg, #ffd1ec);
  border: 0.9px dashed var(--tag-border, #ff94d4);
  box-shadow: none;
  transform:
    translate3d(0, 0, 0)
    rotate(var(--tag-rot, 0deg));
  will-change: transform, opacity;
}

.why-services-flow.is-tag-transfer-active .why-service-tag {
  z-index: 80;
  box-shadow: none;
}

.why-service-tag-1 {
  --tag-x: -1.5rem;
  --tag-y: 28%;
  --tag-rot: -13deg;
  --tag-bg: #ffd1ec;
  --tag-border: #ff94d4;
}

.why-service-tag-2 {
  --tag-x: 7%;
  --tag-y: 12%;
  --tag-rot: 7deg;
  --tag-bg: #ffd1ec;
  --tag-border: #ff94d4;
}

.why-service-tag-3 {
  --tag-x: auto;
  --tag-y: 13%;
  --tag-rot: -8deg;
  --tag-bg: #ffd1ec;
  --tag-border: #ff94d4;
  right: 7%;
}

.why-service-tag-4 {
  --tag-x: auto;
  --tag-y: 29%;
  --tag-rot: 9deg;
  --tag-bg: #ffd1ec;
  --tag-border: #ff94d4;
  right: -1.6rem;
}

.why-service-tag-5 {
  display: none;
}

.why-service-tag-6 {
  display: none;
}

.why-service-tag-7 {
  --tag-x: -2rem;
  --tag-y: 56%;
  --tag-rot: -6deg;
  --tag-bg: #dacaff;
  --tag-border: #8b5cf6;
}

.why-service-tag-8 {
  --tag-x: auto;
  --tag-y: 79%;
  --tag-rot: 6deg;
  --tag-bg: #dacaff;
  --tag-border: #8b5cf6;
  right: 11%;
}

.why-service-tag-9 {
  --tag-x: auto;
  --tag-y: 56%;
  --tag-rot: -4deg;
  --tag-bg: #dacaff;
  --tag-border: #8b5cf6;
  right: -1.5rem;
}

.why-service-tag-10 {
  --tag-x: 8%;
  --tag-y: 80%;
  --tag-rot: 7deg;
  --tag-bg: #dacaff;
  --tag-border: #8b5cf6;
}

.why-service-tag-11 {
  --tag-x: 23%;
  --tag-y: 92%;
  --tag-rot: 5deg;
  --tag-bg: #ffcf9a;
  --tag-border: #fdac53;
}

.why-service-tag-13 {
  --tag-x: auto;
  --tag-y: 91%;
  --tag-rot: -8deg;
  --tag-bg: #ffcf9a;
  --tag-border: #fdac53;
  right: 27%;
}

.why-service-tag-data-left {
  --tag-x: 2%;
  --tag-y: 33%;
  --tag-rot: -8deg;
  --tag-bg: #ffcf9a;
  --tag-border: #fdac53;
}

.why-tag-safe-a {
  --tag-x: 3%;
  --tag-y: 16%;
  --tag-rot: -8deg;
  --tag-bg: #ffd1ec;
  --tag-border: #ff94d4;
}

.why-tag-safe-b {
  --tag-x: auto;
  --tag-y: 27%;
  --tag-rot: 8deg;
  --tag-bg: #ffd1ec;
  --tag-border: #ff94d4;
  right: -1.5rem;
}

.why-tag-safe-c {
  --tag-x: -3rem;
  --tag-y: 48%;
  --tag-rot: -7deg;
  --tag-bg: #dacaff;
  --tag-border: #8b5cf6;
}

.why-tag-safe-d {
  --tag-x: auto;
  --tag-y: 56%;
  --tag-rot: 7deg;
  --tag-bg: #dacaff;
  --tag-border: #8b5cf6;
  right: 10%;
}

.why-tag-safe-e {
  --tag-x: 4%;
  --tag-y: 82%;
  --tag-rot: -6deg;
  --tag-bg: #ffcf9a;
  --tag-border: #fdac53;
}

.why-tag-safe-f {
  --tag-x: auto;
  --tag-y: 14%;
  --tag-rot: -8deg;
  --tag-bg: #ffcf9a;
  --tag-border: #fdac53;
  right: -1rem;
}

.why-service-tag-12 {
  --tag-x: auto;
  --tag-y: 6%;
  --tag-rot: 10deg;
  --tag-bg: #ffcf9a;
  --tag-border: #fdac53;
  right: 25%;
}

.services-system-section {
  position: relative;
  z-index: 1;
  min-height: auto;
  margin-top: -160px;
  padding: clamp(0.75rem, 1.8vw, 1.75rem) 0 calc(clamp(3rem, 5vw, 4.25rem) + 70px);
  background: var(--bg, #f4f4f0);
}

.services-system-shell {
  display: grid;
  gap: clamp(2rem, 3.5vw, 3.25rem);
}

.services-system-header {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.services-system-header .services-pill {
  margin-inline: auto;
}

.services-system-header h2 {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(3rem, 4.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.services-system-header p {
  max-width: 34rem;
  margin: 0;
  color: rgba(46, 46, 46, 0.66);
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  line-height: var(--body-copy-line-height);
  letter-spacing: 0;
}

.services-system-precopy {
  max-width: 41rem;
  margin-inline: auto;
  text-align: center;
}

.services-system-precopy p {
  margin: 0;
  color: rgba(46, 46, 46, 0.68);
  font-family: var(--font-body, "Sequel Sans", sans-serif);
  font-size: clamp(0.98rem, 1.08vw, 1.06rem);
  font-weight: var(--body-copy-weight, 360);
  line-height: 1.62;
  letter-spacing: 0;
  text-wrap: pretty;
}

.services-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1188px;
  margin-inline: auto;
}

.service-system-card {
  --service-card-accent: #ff0099;
  --service-chip-bg: #ffd1ec;
  --service-chip-border: #ff94d4;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: space-between;
  gap: clamp(1.05rem, 1.6vw, 1.35rem);
  min-height: 340px;
  padding: clamp(2rem, 2.9vw, 2.55rem) clamp(1.75rem, 2.7vw, 2.5rem) clamp(1.35rem, 1.9vw, 1.85rem);
  border-radius: 28px;
  color: #fff;
  background: var(--service-card-accent);
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.service-system-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 3px;
  right: 3px;
  top: 17px;
  bottom: 3px;
  border-radius: 28px;
  background: #2e2e2e;
}

.service-system-card[data-service-card="creative-performance"] {
  --service-card-accent: #7b61ff;
  --service-chip-bg: #dacaff;
  --service-chip-border: #8b5cf6;
}

.service-system-card[data-service-card="sales-crm"] {
  --service-card-accent: #fdac53;
  --service-chip-bg: #ffcf9a;
  --service-chip-border: #fdac53;
}

.service-system-card-top {
  display: none;
}

.service-system-role {
  color: rgba(255, 255, 255, 0.48);
}

.service-system-card h3 {
  position: relative;
  z-index: 1;
  max-width: 10ch;
  margin: 0;
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-size: 39px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.011em;
  color: #fff;
  text-wrap: balance;
}

.service-system-card p {
  position: relative;
  z-index: 1;
  align-self: start;
  max-width: 295px;
  margin: 0;
  padding-top: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body, "Sequel Sans", sans-serif);
  font-size: clamp(0.82rem, 0.96vw, 0.9rem);
  font-weight: var(--body-copy-weight);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.service-system-tags {
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 12px 10px;
  min-height: 48px;
  margin: 0;
  padding: 0;
}

.service-system-tags li {
  min-height: 33px;
  padding: 0.36rem 0.9rem;
  color: transparent;
  text-shadow: none;
  background: rgba(244, 244, 240, 0.14);
  border: 1px dashed rgba(244, 244, 240, 0.46);
  opacity: 1;
  transition:
    color 260ms ease,
    opacity 260ms ease,
    background 260ms ease,
    border-color 260ms ease;
}

.service-system-card[data-service-card="creative-performance"] .service-system-tags {
  align-items: flex-end;
}

.service-system-card[data-service-card="creative-performance"] .service-system-tags li[data-service-target="cro"] {
  order: 1;
}

.service-system-card[data-service-card="creative-performance"] .service-system-tags li[data-service-target="performance-creative"] {
  order: 2;
}

.service-system-card[data-service-card="creative-performance"] .service-system-tags li[data-service-target="ad-creative"] {
  order: 3;
}

.service-system-card[data-service-card="creative-performance"] .service-system-tags li[data-service-target="landing-pages"] {
  order: 4;
}

.service-system-tags li.is-lit {
  opacity: 1;
  color: #000;
  background: var(--service-chip-bg);
  border-color: var(--service-chip-border);
}

.service-system-card:hover .service-system-tags li:not(.is-lit) {
  color: transparent;
  background: rgba(244, 244, 240, 0.18);
  border-color: rgba(244, 244, 240, 0.58);
}

@media (max-width: 960px) {
  .why-system-section {
    min-height: auto;
    padding-top: clamp(4.25rem, 12vw, 6rem);
    overflow: hidden;
  }

  .why-system-shell {
    min-height: 0;
    gap: 2rem;
  }

  .why-floating-tags {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    max-width: 42rem;
    margin-inline: auto;
  }

  .why-service-tag {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    font-size: 0.82rem;
    box-shadow: none;
  }

  .services-system-grid {
    grid-template-columns: 1fr;
  }

  .services-system-section {
    margin-top: calc(-3rem - 160px);
    padding-top: clamp(5.5rem, 14vw, 7rem);
  }

  /* On mobile the floating tags above flow in normal document layout
     (see .why-floating-tags override) instead of being absolutely
     positioned, so this section needs extra clearance to avoid
     colliding with them. */
  .services-system-precopy {
    margin-top: 4.5rem;
  }

  .service-system-card {
    min-height: auto;
  }

  .service-system-card h3 {
    max-width: 15ch;
    margin-top: 1.5rem;
  }

  .service-system-tags li {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .why-system-section {
    padding-bottom: 3rem;
  }

  .why-system-copy {
    gap: 0.9rem;
  }

  .why-system-copy h2,
  .services-system-header h2 {
    letter-spacing: -0.015em;
  }

  .why-system-copy h2 {
    letter-spacing: -0.04em;
  }

  .why-system-copy p,
  .services-system-header p {
    font-size: 1rem;
  }

  .why-service-tag,
  .service-system-tags li {
    min-height: 2.2rem;
    padding: 0.55rem 0.8rem;
  }

  .service-system-card {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-service-tag {
    transform: none !important;
    opacity: 1 !important;
  }

  .service-system-tags li {
    opacity: 1;
  }
}

/* Brand fonts on product card text (labels + headings → Gilroy display;
   body copy → Sequel Sans, which it inherits already) */
.product-label {
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-title {
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
}

.product-copy {
  font-family: var(--font-body, "Sequel Sans", sans-serif);
}

.product-link {
  font-family: var(--font-display, "Grift", "Gilroy", sans-serif);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ----------------------------------------------------------
   FOOTER COMPACTION — trim empty vertical space
   ---------------------------------------------------------- */
body.page-v2 .footer-shell {
  padding-top: 110px;
}

body.page-v2 .footer-wordmark-shell {
  margin-top: 32px;
  padding-bottom: 56px;
}

body.page-v2 .footer-bottom {
  margin-top: -88px;
}

body.page-v2 .footer-bottom-shell {
  min-height: 84px;
}

@media (max-width: 1024px) {
  body.page-v2 .footer-shell {
    padding-top: 80px;
  }
  body.page-v2 .footer-wordmark-shell {
    margin-top: 24px;
    padding-bottom: 40px;
  }
  body.page-v2 .footer-bottom {
    margin-top: -64px;
  }
  body.page-v2 .footer-bottom-shell {
    min-height: 72px;
  }
}

@media (max-width: 720px) {
  /* Lifts the mark ~56px: it was sitting under 117px of dead space at
     the top of the footer. Has to live after the block above, which
     sets the same properties at the same specificity. This file loads
     last on the inner pages, so the homepage's copy of this rule is not
     enough on its own. */
  body.page-v2 .footer-shell {
    padding-top: 1.5rem;
    /* Same treatment as the homepage: the shell's box is centred, but
       the link columns are far wider than the words in them, so the ink
       sat 36px left of the screen's centre. Sizing the columns to their
       content and letting the shell shrink-to-fit centres the ink with
       no box overhanging — and the mark, sharing the shell's left edge,
       stays aligned with the first column. */
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: max-content;
  }

  body.page-v2 .footer-links {
    grid-template-columns: max-content max-content;
    column-gap: 4.25rem;
  }

  /* The review panel sits on its own narrower grid — min(50rem, 100% -
     3rem) resolves to 327px against the form's 335 — so the two boxes
     did not line up down the page. Same base specificity as that rule,
     so it has to live in this file, which loads last on contact. */
  body.contact-page .contact-review .section-shell {
    width: var(--shell);
  }

  /* The quote ran at 18.4px — larger than the 16px body copy the rest
     of the site uses — in a 687px-tall block, which made the review
     the heaviest thing on the page. Brought down to the case-study
     body size, and the card pulled in off the shell so the box reads
     narrower than the form above it rather than matching it edge to
     edge. */
  body.contact-page .contact-review-quote p {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  body.contact-page .contact-review-card {
    width: min(100%, 19.5rem);
    margin-inline: auto;
  }

  /* Pulls the review up under the form: 48px of section margin plus
     64px of panel padding sat above it, on top of the space the object
     already occupies. */
  body.contact-page .contact-review {
    margin-top: 0;
  }

  body.contact-page .contact-review-panel {
    padding-top: 2.5rem;
  }

  /* The form came to 607px — 75% of the viewport — on 59px inputs and a
     163px textarea. Trimmed to phone-sized controls; still a
     comfortable 44px+ tap target on every field. */
  body.contact-page .contact-field input,
  body.contact-page .contact-field select {
    min-height: 0;
    height: 48px;
    padding-block: 0;
  }

  body.contact-page .contact-field textarea {
    min-height: 0;
    height: 104px;
  }

  body.contact-page .contact-form {
    gap: 0.75rem;
  }

  body.contact-page .contact-form button,
  body.contact-page .contact-form [type="submit"] {
    min-height: 0;
    height: 56px;
  }

  /* The height that comes off the top goes back around the wordmark, so
     the footer reads as a bigger block rather than a shorter one. */
  body.page-v2 .footer-wordmark-shell {
    margin-top: 5rem;
    padding-bottom: 4.25rem;
  }

  /* Rides up over the very tail of the "y" so the bar's translucent
     background reads as translucent — it sat 4px clear of the wordmark
     here, over nothing but flat dark, so it looked solid.

     Matched to desktop, which covers 10% of the glyph. The bar's
     position is (wordmark bottom + shell padding-bottom + this margin),
     and the mobile "y" is 108px tall, so -79px clips ~11px off its
     tail. -98px covered 30px, nearly a third of the letter. */
  body.page-v2 .footer-bottom {
    margin-top: -79px;
    /* Desktop's 0.71 + blur(16px) reads as translucent because the "y"
       there is 324px tall with thick strokes. The same values over a
       108px glyph smear it away completely — a 16px blur is most of the
       stroke width at this size. Lighter fill and a much smaller blur
       give the same "you can just see it" effect at mobile scale. */
    background: rgba(32, 32, 32, 0.56);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* Smooth, slow visible fill on the "About us page" progress bar so the user
   sees the animation play even when scrolling quickly to the bottom. */
body.page-v2 .footer-progress span {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 961px) {
  .hero-copy {
    top: calc(50% - 50px);
  }

  .hero-title {
    font-size: 102px;
    line-height: 100px;
  }

  .hero-button {
    top: clamp(632px, calc(83.6vh - 40px), 681px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-v2 .footer-progress span {
    transition: none;
  }
}

/* ----------------------------------------------------------
   OPEN SLOT — empty reserved space under the hero.
   Holds the page rhythm (and the #why / #services anchors)
   until the next section goes in here.
   ---------------------------------------------------------- */
/* The section runs two viewports tall while an inner sticky wrapper
   holds the copy centred on screen for the first one. That keeps the
   text alone in the viewport — nothing below it creeps into view —
   until the sweep has finished and the pin releases. */
.hero-slot {
  position: relative;
  min-height: 200vh;
  margin-top: -110px;
  background: var(--bg, #f4f4f0);
}

.hero-slot-pin {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  padding: clamp(2rem, 5vw, 90px) 0;
}

.hero-slot-shell {
  width: min(1040px, 100% - 3rem);
  margin-inline: auto;
  padding-inline: 12px;
}

/* ----------------------------------------------------------
   SCROLL-SCRUBBED TEXT REVEAL
   Modelled on the text panel under the Embryo hero. script.js
   splits the copy into per-letter spans: each letter carries a
   running index (--i), the block carries the letter count
   (--total) and a scroll progress value (--reveal-progress, 0
   to 1). Letters rest at --reveal-rest opacity and fill to 1 as
   the leading edge of the sweep passes over them.
   --reveal-fade is how many letters sit mid-fade at once, which
   is what softens the edge instead of it reading as a hard wipe.
   ---------------------------------------------------------- */

[data-reveal-block] {
  --reveal-progress: 0;
  --reveal-fade: 18;
  --reveal-rest: 0.1;
  --total: 1;
}

[data-reveal-block] .reveal-text {
  /* The measure is set in ch so it tracks the type size: at every
     width this lands one sentence per line, three lines deep, rather
     than two long lines with a short tail. */
  max-width: min(31ch, 100%);
  margin: 0 auto;
  font-family: "Grift Variable", "Grift", "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(1.75rem, 3.6vw, 48px);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #2e2e2e;
  text-align: center;
  /* Even out the three lines rather than letting the last one run
     short — the copy is written to break sentence by sentence. */
  text-wrap: balance;
}

/* A blank line's worth of air before "That's the range." */
[data-reveal-block] .reveal-text-break {
  margin-top: 1.25em;
}

/* "That's the range. / That's Leadly." reads as a big closing
   statement, well above the paragraph size above it. Tracking stays
   tight and negative — same convention as .hero-title — since
   negative tracking on large type reads as bold, not cramped. */
[data-reveal-block] .reveal-text[data-dot-highlight] {
  font-size: clamp(2.25rem, 6vw, 68px);
  letter-spacing: -0.03em;
}

/* The split spans must be told to inherit type explicitly — a global
   span rule elsewhere in the sheet sets its own font-size, and any
   explicit declaration beats inheritance, which left the letters
   rendering at 16px inside an 80px paragraph. */
[data-reveal-block] .reveal-word,
[data-reveal-block] .reveal-letter {
  font: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-transform: inherit;
}

/* Words hold their letters together so lines still break on
   spaces; letters are blocks so they sit tight in the flex row. */
[data-reveal-block] .reveal-word {
  display: inline-flex;
  white-space: nowrap;
}

[data-reveal-block] .reveal-letter {
  display: block;
  flex: 0 0 auto;
  --sweep: calc(
    (var(--reveal-progress) * (var(--total) + var(--reveal-fade)) - var(--i)) /
      var(--reveal-fade)
  );
  opacity: clamp(var(--reveal-rest), var(--sweep), 1);
  will-change: opacity;
}

@media (max-width: 900px) {
  [data-reveal-block] {
    --reveal-fade: 12;
  }
}

@media (max-width: 560px) {
  .hero-slot-shell {
    width: min(1400px, 100% - 2rem);
  }

  [data-reveal-block] {
    --reveal-fade: 9;
  }

  [data-reveal-block] .reveal-text {
    font-size: 2rem;
    letter-spacing: -0.02em;
  }

  [data-reveal-block] .reveal-text[data-dot-highlight] {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
  }
}

/* No sweep for readers who've asked motion to stop — show it all. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-block] .reveal-letter {
    opacity: 1;
  }
}

/* ----------------------------------------------------------
   SHOWREEL — dot morphs into the video card, card zooms out
   Same architecture as the copy section above: a 200vh section
   with a sticky 100vh stage. Card geometry is written from
   script.js so the morph can be driven off one scroll value.
   ---------------------------------------------------------- */
.video-reveal {
  position: relative;
  min-height: 240vh;
  /* Breathing room under the film before the next section starts. */
  padding-bottom: clamp(7rem, 16vh, 14rem);
  background: var(--bg, #f4f4f0);
}

.video-reveal-pin {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
}

.video-reveal-card {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-pink, #ff0099);
  /* Hidden until the travelling dot actually arrives — otherwise it
     sits here as a second pink dot waiting to be met. */
  opacity: var(--video-card-opacity, 0);
  will-change: width, height, border-radius;
}

.video-reveal-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Held back until the card is big enough to read as a video
     rather than a pink dot with a picture squeezed into it. */
  opacity: var(--video-media-opacity, 0);
}

.video-reveal-play {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.5rem 0.85rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 244, 240, 0.92);
  color: #2e2e2e;
  font-family: var(--font-display, "Grift", sans-serif);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  opacity: var(--video-play-opacity, 0);
  pointer-events: var(--video-play-events, none);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.video-reveal-play:hover {
  background: #ffffff;
  transform: translateX(-50%) translateY(-2px);
}

.video-reveal-play-icon {
  width: 0;
  height: 0;
  margin-left: 0.2rem;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid var(--color-pink, #ff0099);
}

/* Once the full film is playing the card stops being a scroll toy. */
.video-reveal.is-playing .video-reveal-card {
  opacity: 1 !important;
  width: min(1120px, 86vw) !important;
  height: min(630px, 70vh) !important;
  border-radius: 18px !important;
}

.video-reveal.is-playing .video-reveal-play {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  .video-reveal {
    min-height: 180vh;
    padding-bottom: clamp(4rem, 10vh, 7rem);
  }

  .video-reveal-play {
    font-size: 0.9rem;
    padding: 0.7rem 1.2rem 0.7rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-reveal {
    min-height: 0;
  }

  .video-reveal-pin {
    position: static;
    height: auto;
    padding: clamp(3rem, 8vh, 6rem) 1.5rem;
  }

  .video-reveal-card {
    opacity: 1 !important;
    width: min(1100px, 100%) !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 24px !important;
  }

  .video-reveal-media {
    opacity: 1 !important;
  }

  .video-reveal-play {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Nav: with the FAQ link gone the links sat left of centre. The menu now
   starts at the logo (the -16px cancels the shell's gap) and the links
   centre in the space between the logo and the CTA. */
@media (min-width: 1241px) {
  .nav-menu {
    margin-left: -16px;
  }

  .nav-links {
    margin-inline: auto;
  }

  /* The links used fixed widths set by position, so removing FAQ shifted
     "Contact us" into a 63px slot and clipped it, and the gaps between
     links were uneven. Each link now sizes to its text with equal padding. */
  .nav-links > a:nth-child(n),
  .nav-links > .nav-about-wrap > a:nth-child(n) {
    width: auto;
    padding-inline: 9px;
  }
}

/* Ported from the inline CSS in index.html so every page gets the
   homepage footer reveal. Keep the two in step. */
/* ----------------------------------------------------------
   FOOTER FLICK REVEAL
   A shallow, fixed image stack sits behind the page and is only
   uncovered by the short transparent area after the footer.
   ---------------------------------------------------------- */

body.page-v2 {
  isolation: isolate;
  --footer-flick-height: clamp(110px, 14.5svh, 145px);
}

body.page-v2 main,
body.page-v2 .site-footer {
  position: relative;
  z-index: 2;
}

body.page-v2 {
  --footer-flick-reveal: 0;
}

body.page-v2 .site-footer {
  transform: translate3d(
    0,
    calc(-1 * var(--footer-flick-reveal) * var(--footer-flick-height)),
    0
  );
  will-change: transform;
}

.footer-slideshow {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: var(--footer-flick-height);
  overflow: hidden;
  background: #2e2e2e;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

body.page-v2.is-footer-flick-active .footer-slideshow {
  opacity: 1;
}

.footer-slideshow-stage,
.footer-slide {
  position: absolute;
  inset: 0;
}

.footer-slide {
  margin: 0;
  display: grid;
  place-items: center;
  background: #2e2e2e;
  opacity: 0;
  transition: none;
  isolation: isolate;
}

.footer-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--footer-slide-image);
  background-position: center;
  background-size: cover;
}

.footer-slide.is-active {
  opacity: 1;
}

.footer-slide-art {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Cut-out team members, stacking up over the pink frames. The pinkish
   collage underneath is untouched — this is a second layer above it.

   Anchored to the strip floor so they read as a row of people standing
   in it rather than shapes floating at random heights, and overlapping
   horizontally so each new arrival covers the one before. No
   transition: the flick book cuts, it never crossfades, and these have
   to arrive the same way. */
.footer-people {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.footer-person {
  position: absolute;
  /* --x / --ty are where this tile's FACE should land: a share of the
     strip's width and of its height. The translate below is in
     percentages of the tile's own box, so shifting by the face's own
     offset (--fx / --fy) puts the face exactly on that anchor whatever
     the tile's proportions are. --h is set per tile so every face ends
     up the same size on screen, whatever it measured in its photo.

     What gets protected from the strip's edge is the FACE, not the
     whole tile. Keeping entire tiles inside left bare margins at both
     ends; letting them bleed means the collage reaches the edges, and
     a shoulder running off the side is just a crop, where a face
     sliced in half is a mistake. --fl / --fr carry the rotated extent
     of the face box either side of its centre, plus a little clear
     air, measured at build time. */
  left: clamp(
    calc(var(--fl, 56) * var(--people-scale, 1) * 1px),
    calc(var(--x, 50) * 1%),
    calc(100% - var(--fr, 56) * var(--people-scale, 1) * 1px)
  );
  top: calc(var(--ty, 48) * 1%);
  /* Far taller than the strip on purpose — the strip crops it, which is
     what gives big overlapping faces rather than whole little people. */
  height: calc(var(--h, 287) * var(--people-scale, 1) * 1px);
  width: auto;
  max-width: none;
  transform:
    translate(calc(var(--fx, 50) * -1%), calc(var(--fy, 34) * -1%))
    rotate(calc(var(--r, 0) * 1deg));
  /* Pivot on the face, so a rotated tile does not swing it off the mark. */
  transform-origin: calc(var(--fx, 50) * 1%) calc(var(--fy, 34) * 1%);
  opacity: 0;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

.footer-person.is-in {
  opacity: 1;
}

@media (max-width: 720px) {
  .footer-people {
    /* Smaller than the desktop tile not just for the shorter strip but
       because a tile is a far bigger share of a phone's width, and an
       oversized one would run off the side — the same harsh side crop,
       from the container instead of the photo. */
    --people-scale: 0.58;
  }
}






.footer-slideshow-spacer {
  position: relative;
  z-index: 1;
  height: 0;
  background: transparent;
  pointer-events: none;
}

@media (max-width: 720px) {
  body.page-v2 {
    --footer-flick-height: clamp(90px, 12.5svh, 112px);
  }

}

@media (prefers-reduced-motion: reduce) {
  body.page-v2 .site-footer,
  .footer-slide {
    transition: none;
  }

  /* No flick for readers who've asked motion to stop. */
  body.page-v2 .site-footer {
    transform: none;
  }
}

/* Desktop: the submenu labels open on hover only, so they should not
   look clickable. */
@media (min-width: 1241px) {
  .nav-about-wrap > a {
    cursor: default;
  }
}

/* Mobile menu: when the menu panel is dark, the sub-page boxes under
   "About us" and "Services" are dark too, never white. */
@media (max-width: 1240px) {
  body[data-nav-theme="dark"] .nav-menu .nav-about-subpage,
  body[data-nav-theme="dark"] .site-header .nav-links a.nav-about-subpage {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f4f4f4;
    box-shadow: none;
  }

  body[data-nav-theme="dark"] .nav-menu .nav-about-subpage:hover,
  body[data-nav-theme="dark"] .nav-menu .nav-about-subpage:focus-visible,
  body[data-nav-theme="dark"] .site-header .nav-links a.nav-about-subpage:hover,
  body[data-nav-theme="dark"] .site-header .nav-links a.nav-about-subpage:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 0, 153, 0.4);
    color: #fff;
  }

  body[data-nav-theme="dark"] .site-header .nav-links a.nav-about-subpage-new,
  body[data-nav-theme="dark"] .site-header .nav-links a.nav-about-subpage[aria-current="page"] {
    color: #ff0099;
    background: rgba(255, 255, 255, 0.08);
  }
}