@font-face {
  font-family: "Grift Variable";
  src: url("https://leadly-website.pages.dev/assets/font-e493ed80f9e4.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Grift";
  src: url("https://leadly-website.pages.dev/assets/font-2661be2efdd9.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Grift";
  src: url("https://leadly-website.pages.dev/assets/font-83181fdc2764.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Sequel Sans";
  src: url("https://leadly-website.pages.dev/assets/font-6a7ffc8e23e9.otf") format("opentype");
  font-style: normal;
  font-weight: 310;
  font-display: swap;
}

@font-face {
  font-family: "Sequel Sans";
  src: url("https://leadly-website.pages.dev/assets/font-167a2b173473.otf") format("opentype");
  font-style: normal;
  font-weight: 360;
  font-display: swap;
}

@font-face {
  font-family: "Sequel Sans";
  src: url("https://leadly-website.pages.dev/assets/font-05dcb3b87a2d.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #f6f6f8;
  --surface: rgba(255, 255, 255, 0.58);
  --surface-strong: rgba(255, 255, 255, 0.8);
  --surface-dark: rgba(46, 46, 46, 0.78);
  --text: #2e2e2e;
  --text-soft: rgba(46, 46, 46, 0.72);
  --white: #f4f4f4;
  --pink: #ff0099;
  --purple: #8849fc;
  --border: rgba(46, 46, 46, 0.12);
  --shadow: 0 24px 80px rgba(46, 46, 46, 0.12);
  --shadow-soft: 0 18px 42px rgba(46, 46, 46, 0.08);
  --radius-xl: 34px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --nav-height: 109px;
  --shell: min(1240px, calc(100vw - 3rem));
  --boxed-guide-width: min(1180px, calc(100vw - 2.5rem));
  --hero-progress: 0;
  --hero-title-opacity: 1;
  --hero-title-scale: 1;
  --hero-cta-progress: 0;
  --hero-cta-travel-fade: 0;
  --travel-dot-width: 44px;
  --travel-dot-height: 44px;
  --travel-dot-radius: 999px;
  --travel-dot-scale: 1;
  --why-cta-reveal: 0;
  --why-cta-content-reveal: 0;
  --services-progress: 0;
  --services-intro-progress: 0;
  --shrink-progress: 1;
  --products-progress: 0;
  --font-display: "Grift Variable", "Grift", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Sequel Sans", "Avenir Next", "Segoe UI", sans-serif;
  --font-nav: "Sequel Sans", "Avenir Next", "Segoe UI", sans-serif;
  --body-copy-size: 16px;
  --body-copy-weight: 310;
  --body-copy-letter-spacing: 0;
  --body-copy-line-height: 1.625;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --motion-slow: 520ms;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-synthesis-weight: none;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

p,
li {
  font-family: var(--font-body);
  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);
}

span,
a,
button {
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3,
strong,
.brand,
.footer-brand {
  font-family: var(--font-display);
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

.page-noise {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 20% 20%, rgba(46, 46, 46, 0.02) 0.05rem, transparent 0.06rem);
  background-size: auto, 1.1rem 1.1rem;
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

.section-shell {
  width: var(--shell);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section-light {
  background: transparent;
}

.section-dark {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 0, 153, 0.12), transparent 24%),
    radial-gradient(circle at 90% 100%, rgba(136, 73, 252, 0.12), transparent 22%),
    #242424;
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(46, 46, 46, 0.6);
}

.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), rgba(255, 0, 153, 0.2));
}

.eyebrow-light {
  color: rgba(244, 244, 244, 0.72);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12.5rem;
  min-height: 3.85rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 700;
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    filter var(--motion-base) ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-4px) scale(1.018);
  filter: saturate(1.06) brightness(1.02);
}

.motion-reveal {
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  filter: blur(10px);
  transition:
    opacity var(--motion-slow) var(--ease-soft),
    transform var(--motion-slow) var(--ease-soft),
    filter var(--motion-base) ease;
  transition-delay: var(--reveal-delay);
  will-change: transform, opacity, filter;
}

.motion-reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.button-primary {
  background: linear-gradient(135deg, var(--pink), #ff37a9);
  color: #fff;
  box-shadow: 0 18px 34px rgba(255, 0, 153, 0.24);
  overflow: hidden;
}

.button-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 56%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.button-primary:hover::before,
.button-primary:focus-visible::before {
  opacity: 1;
  animation: btn-shimmer 0.56s ease forwards;
}

.site-header {
  position: fixed;
  top: 2.3125rem;
  left: 0;
  width: 100%;
  padding: 0 1rem;
  z-index: 30;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--motion-base) var(--ease-standard);
}

.nav-shell {
  position: relative;
  isolation: isolate;
  width: var(--boxed-guide-width);
  min-height: 72px;
  margin: 0 auto;
  padding: 0 18px 0 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(250, 250, 250, 0.9);
  border-radius: 20px;
  overflow: visible;
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  background: rgba(242, 242, 242, 0.16);
  box-shadow:
    0 10px 36px rgba(46, 46, 46, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: auto;
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-base) ease,
    transform var(--motion-base) var(--ease-standard);
}

.nav-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.1)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 32%, rgba(255, 255, 255, 0.08));
  pointer-events: none;
  z-index: 0;
}

.nav-shell > * {
  position: relative;
  z-index: 1;
}

/* The inner pages open straight into content, with no hero for the nav to
   sit inside, so they hold the compact position from the start instead of
   only after 40px of scroll — otherwise the nav sits lower on faq/contact
   than on the homepage you just came from, which reads as a jump in the
   top gap. Grouped with the scrolled selector rather than given its own
   rule so it inherits the per-breakpoint offsets below (the tuck is
   smaller on narrow screens, where a flat -0.85rem clipped the bar). */
body.nav-scrolled .site-header,
body.contact-page .site-header {
  transform: translateY(-0.85rem);
}

body.nav-scrolled .nav-shell {
  background: rgba(242, 242, 242, 0.22);
  box-shadow:
    0 12px 40px rgba(46, 46, 46, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

body[data-nav-theme="dark"] .nav-shell {
  background: rgba(33, 33, 33, 0.42);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--white);
  box-shadow:
    0 14px 42px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-nav-theme="dark"] .nav-shell::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(255, 255, 255, 0.04));
}

body[data-nav-theme="dark"] .nav-links a,
body[data-nav-theme="dark"] .nav-menu a:not(.nav-cta) {
  color: rgba(244, 244, 244, 0.88);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.08em;
  font-size: clamp(2rem, 2.4vw, 2.55rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.08em;
}

.site-header .brand {
  flex: 0 0 auto;
  font-size: 0;
  line-height: 0;
}

.brand-word,
.footer-brand .brand-word {
  display: inline-block;
}

.brand-logo {
  display: block;
  width: 106px;
  height: auto;
  transform: translateY(2px);
}

.brand-dot,
.footer-brand .brand-dot {
  color: var(--pink);
  font-size: 1.08em;
}

.nav-menu {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 0;
  margin-left: 93px;
  font-family: var(--font-nav);
  overflow: visible;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 18px;
  overflow: visible;
}

.nav-about-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 94px;
  min-height: 70px;
  overflow: visible;
}

.nav-links a,
.nav-menu a {
  font-size: 15.5px;
  font-weight: 360;
  line-height: 24px;
  color: #515151;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 70px;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--motion-fast) ease;
}

.nav-links a:nth-child(1) {
  width: 94px;
}

.nav-links a:nth-child(2) {
  width: 94px;
}

.nav-links a:nth-child(3) {
  width: 128px;
}

.nav-links a:nth-child(4) {
  width: 88px;
}

.nav-links a:nth-child(5) {
  width: 63px;
}

.nav-links a:nth-child(6) {
  width: 106px;
}

.nav-about-panel {
  position: absolute;
  top: calc(100% - 6px);
  left: -0.4rem;
  width: clamp(19rem, 29vw, 23rem);
  padding: 0.95rem;
  border-radius: 24px;
  border: 1px solid rgba(46, 46, 46, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 46px rgba(46, 46, 46, 0.14);
  backdrop-filter: blur(20px);
  display: grid;
  align-items: center;
  grid-template-columns: minmax(8.5rem, 1.05fr) minmax(0, 1fr);
  gap: 0.9rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.985);
  transform-origin: top left;
  transition:
    opacity 220ms ease,
    transform 320ms var(--ease-standard),
    visibility 220ms ease;
  z-index: 15;
}

.nav-about-wrap:hover .nav-about-panel,
.nav-about-wrap:focus-within .nav-about-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.nav-about-media {
  position: relative;
  min-height: 0;
  height: 6.95rem;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
}

.nav-about-media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.nav-about-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.nav-about-media span {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-about-links {
  display: grid;
  align-content: center;
  gap: 0.65rem;
}

.nav-about-subpage {
  appearance: none;
  border: 1px solid rgba(46, 46, 46, 0.08);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  padding: 0.95rem 1rem;
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 360;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--motion-base) var(--ease-standard),
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-base) ease;
}

.nav-about-subpage:hover,
.nav-about-subpage:focus-visible {
  background: #fff;
  border-color: rgba(255, 0, 153, 0.18);
  box-shadow: 0 12px 24px rgba(46, 46, 46, 0.08);
  transform: translateX(4px);
}

.nav-link-track {
  position: relative;
  display: grid;
  place-items: center;
  /* Tall enough that descenders (the g in Insights) are not clipped. */
  height: 1.3em;
  overflow: hidden;
}

.nav-link-track > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  white-space: nowrap;
  transition:
    transform 440ms cubic-bezier(0.18, 1, 0.32, 1),
    opacity 240ms ease;
  will-change: transform;
}

.nav-link-track > span:first-child {
  transform: translateY(0);
  opacity: 1;
}

.nav-link-track > span:last-child {
  transform: translateY(110%);
  opacity: 0;
  color: var(--pink);
}

.nav-links a:hover .nav-link-track > span:first-child,
.nav-links a:focus-visible .nav-link-track > span:first-child {
  transform: translateY(-110%);
  opacity: 0;
}

.nav-about-wrap:hover > a .nav-link-track > span:first-child,
.nav-about-wrap:focus-within > a .nav-link-track > span:first-child {
  transform: translateY(-110%);
  opacity: 0;
}

.nav-links a:hover .nav-link-track > span:last-child,
.nav-links a:focus-visible .nav-link-track > span:last-child {
  transform: translateY(0);
  opacity: 1;
}

.nav-about-wrap:hover > a .nav-link-track > span:last-child,
.nav-about-wrap:focus-within > a .nav-link-track > span:last-child {
  transform: translateY(0);
  opacity: 1;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: #1a1a1a;
}

.nav-about-wrap:hover > a,
.nav-about-wrap:focus-within > a {
  color: #1a1a1a;
}

body[data-nav-theme="dark"] .nav-links a:hover,
body[data-nav-theme="dark"] .nav-links a:focus-visible {
  color: rgba(255, 255, 255, 1);
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pink);
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition:
    transform 320ms var(--ease-standard),
    opacity 240ms ease;
  pointer-events: none;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.nav-about-wrap:hover > a::after,
.nav-about-wrap:focus-within > a::after {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.nav-cta {
  --hover-x: 50%;
  --hover-y: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  min-width: 132px;
  height: 36px;
  padding: 0;
  border-radius: 20px;
  background: var(--pink);
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-size: 14.6px;
  font-weight: 310;
  line-height: 22.5px;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: -1px;
  background-image: linear-gradient(135deg, #ff0099 0%, #ff37a9 48%, #ff0099 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  overflow: hidden;
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) ease,
    filter var(--motion-base) ease,
    background-position var(--motion-slow) ease,
    letter-spacing var(--motion-fast) ease;
}

.nav-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(
      100px circle at var(--hover-x) var(--hover-y),
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.18) 34%,
      rgba(255, 255, 255, 0) 72%
    );
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}

.nav-cta::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--motion-base) ease,
    transform var(--motion-base) var(--ease-standard);
  pointer-events: none;
}

.nav-menu .nav-cta,
.nav-menu a.nav-cta,
.nav-menu .nav-cta:visited,
.nav-menu .nav-cta:hover,
.nav-menu .nav-cta:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-2.5px) scale(1.035);
  box-shadow:
    0 22px 42px rgba(255, 0, 153, 0.28),
    0 10px 22px rgba(255, 0, 153, 0.12);
  filter: saturate(1.1) brightness(1.04);
  background-position: 100% 50%;
  letter-spacing: 0.01em;
}

.nav-cta:hover::before,
.nav-cta:focus-visible::before {
  opacity: 1;
}

.nav-cta:hover::after,
.nav-cta:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* No pill behind the bars — the icon stands on its own. The box is
     kept at 44px so the tap target stays a full one even though nothing
     is drawn around it. */
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Three bars from one element: the middle is the span itself, the outer
   two are its pseudo-elements. They fold into a cross when the menu is
   open, so the control says what it will do next without a word of
   copy. currentColor, so it follows the nav's light/dark theme. The
   button keeps its accessible name from aria-label. */
.menu-toggle-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background-color 160ms ease;
}

.menu-toggle-bars::before,
.menu-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-toggle-bars::before {
  top: -6px;
}

.menu-toggle-bars::after {
  top: 6px;
}

body.menu-open .menu-toggle-bars {
  background: transparent;
}

body.menu-open .menu-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

body.menu-open .menu-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle-bars,
  .menu-toggle-bars::before,
  .menu-toggle-bars::after {
    transition: none;
  }
}

.hero-section {
  /* 290vh of hero choreography plus 110vh for the intro collapse. */
  min-height: 400vh;
  position: relative;
  /* .hero-slot below pulls itself up 110px under this section. Being
     later in the page it painted over the bottom 110px of the stage,
     and on phones the shrunken CTA dot sits inside that band — so as
     the hero let go, the slot's top edge sliced the dot in half and
     then swallowed it before the falling dot took over. Both share the
     same background, so lifting the hero changes nothing else. */
  z-index: 1;
  overflow: clip;
}

.hero-stage {
  position: sticky;
  top: 0;
  min-height: max(100vh, 862px);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: clip;
  display: block;
  padding: 0;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.hero-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(956px, calc(100vw - 3rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  transform:
    translate(-50%, -50%)
    translateY(calc(var(--hero-progress) * -0.9rem))
    scale(var(--hero-title-scale));
  opacity: var(--hero-title-opacity);
  will-change: transform, opacity;
}

.hero-title {
  position: relative;
  margin: 0;
  font-family: "Grift Variable", "Grift", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 131px;
  line-height: 128px;
  letter-spacing: -3px;
  font-weight: 800;
  font-variation-settings: "wght" 800;
  color: #2e2e2e;
  text-align: center;
}

.hero-subtitle {
  max-width: 720px;
  margin: 1.25rem 0 0;
  color: #2e2e2e;
  font-family: "Sequel Sans", "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.35;
  font-weight: 300;
  text-align: center;
}

.hero-line {
  display: block;
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* The halves slide apart to let the closing circle sit between them.
   Transform, not width: the headline is 131px and nowrap, so animating
   layout here would reflow the line every frame and risk wrapping. */
.hero-line-part {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  will-change: transform;
}

.hero-line-part-start {
  transform: translateX(calc(-1 * var(--hero-title-split, 0px)));
}

.hero-line-part-end {
  transform: translateX(var(--hero-title-split, 0px));
}

/* The real word space, kept as its own element so the mask has a stable
   point to aim at — it is never transformed itself. font: inherit is
   load-bearing: a global span rule sets its own font-size, which would
   otherwise render this space at 16px inside a 131px headline and leave
   the circle aiming below the line. */
.hero-title-anchor {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.hero-line:last-child {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}

.hero-dot-anchor {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  margin-left: -0.015em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  /* Both full stops in the headline sit in the body ink; the pink dot
     belongs to the logo and the travelling marker, not the copy. */
  color: #2e2e2e;
}

.hero-cluster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.hero-card {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: 0 22px 44px rgba(46, 46, 46, 0.14);
  backdrop-filter: none;
  overflow: hidden;
  isolation: isolate;
  /* --home-x/--home-y default to 0 (no effect at the reference desktop
     size) and are overridden per breakpoint below. script.js reads the
     current value and folds it into the *converged resting position*
     only (not the entrance path) - see updateHero(). */
  --home-x: 0;
  --home-y: 0;
  transform:
    translate3d(-50%, -50%, 0)
    translate(calc(var(--card-x, 0) * 1vw), calc(var(--card-y, 0) * 1vh))
    /* perspective() sits after the positioning translate on purpose:
       its vanishing point is the card's own centre, and by the end of
       the dive that centre is the centre of the dot. So receding in Z
       carries the card down into the dot rather than off towards the
       middle of the screen. Idle values are 0/none, so nothing here
       changes the entrance or the converge. */
    perspective(calc(var(--card-perspective, 820) * 1px))
    translateZ(calc(var(--card-depth, 0) * 1px))
    rotateX(calc(var(--card-tilt, 0) * 1deg))
    rotateY(calc(var(--card-spin, 0) * 1deg))
    rotate(calc(var(--card-rotate, 0) * 1deg))
    scale(var(--card-scale, 1));
  opacity: var(--card-opacity, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-card-photo {
  border-radius: 1.95rem;
}

.hero-card-asset {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: none;
  animation: none;
}

.hero-card.card-photo-smile {
  width: clamp(11.75rem, 13.8vw, 12.9rem);
}

.hero-card.card-photo-street {
  width: clamp(10.6rem, 12.5vw, 11.8rem);
}

.hero-card-stat {
  width: clamp(12.2rem, 14.1vw, 13.5rem);
  border-radius: 1.8rem;
  background: #2e2e2e;
  /* The figures used to be flattened artwork on a 460x360 frame. They
     are live text now, so the card holds that frame itself and the
     cluster geometry in script.js is unchanged. Type is sized in cqw
     against the card's own width, which is what the artwork's own
     scaling did: one rule covers every breakpoint. */
  aspect-ratio: 460 / 360;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* No padding on the card itself: a percentage would resolve against
     the containing block (the full-width cluster) and a cqw against the
     next container out (the viewport) — both of which measure ~1440px,
     not this card. The label's own max-width does the insetting, and
     the descendants below are free to measure the card in cqw. */
  color: var(--white);
  text-align: center;
}

.hero-card-stat strong {
  font-family: var(--font-display);
  font-size: 17cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* "Deals and Claims Completed" is short enough to fit the stat card on
   one line, which reads as a cramped single row on phones. There is no
   whitespace between "Claims" and this span, so there is no break
   opportunity here, and the generated non-breaking space is the same
   glyph the markup used to carry — desktop wrapping is unchanged. The
   mobile rule below swaps it for a forced break. */
.stat-line-break::before {
  content: "\00a0";
}

/* Same forced break for the wide stat, but this one replaces an ordinary
   space, so the generated space has to stay breakable on desktop —
   pre-wrap preserves it while still allowing a wrap there. */
.stat-line-break-soft::before {
  content: " ";
  white-space: pre-wrap;
}

.hero-card-stat span {
  margin-top: 0.55em;
  max-width: 84%;
  font-size: 6.4cqw;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

/* "in 12 Months" stays on one line, under the label, on desktop. */
.hero-card-stat .stat-period {
  margin-top: 0;
  max-width: none;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .hero-card-stat .stat-period {
    display: block;
  }
}

/* A footnote on a stat card. It is positioned so the card keeps the same
   size as the other two. */
.hero-card-stat .hero-card-note {
  position: absolute;
  right: 6cqw;
  bottom: 6cqw;
  left: 6cqw;
  color: rgba(244, 244, 244, 0.62);
  font-size: 4.6cqw;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 768px) {
  .hero-card-stat .hero-card-note {
    right: 4cqw;
    bottom: 4cqw;
    left: 4cqw;
    font-size: 5.8cqw;
  }
}

/* The landscape photograph and the spend figure that took the other
   one's place. Both share the stat cards' 460x360 frame; the photo
   keeps the picture radius so it does not read as another dark panel. */
.hero-card.card-photo-team,
.hero-card.card-stat-spend {
  width: clamp(12.2rem, 14.1vw, 13.5rem);
}

.hero-card-wide {
  width: clamp(12.2rem, 14.1vw, 13.5rem);
  border-radius: 1.8rem;
  background: #2e2e2e;
}

/* ------------------------------------------------------------------
   Responsive homes for the hero-card cluster
   ------------------------------------------------------------------
   The scroll-driven start/end/converge choreography in script.js is
   untouched at every width. What changes per breakpoint below is:
     1) --home-x/--home-y, a bias script.js folds into the *converged
        resting position only* (not the entrance path - see
        updateHero() in script.js), so the cards settle beside the
        headline instead of on top of it, and
     2) the cards' own size, so their footprint fits the available
        margin.
   This mirrors how large sites (e.g. jeton.com's hero) handle the same
   problem: the entrance animation logic is one piece of code, and only
   the art-directed resting spot is redefined per breakpoint in CSS. */
@media (max-width: 1279px) {
  /* 1280-1535px reverts to the untouched original desktop card
     size/position (same as 1536px+) - this tier only kicks in below a
     common laptop/external-monitor width. */
  .hero-card.card-photo-smile {
    width: clamp(7.5rem, 11vw, 11.75rem);
    --home-x: -13;
    --home-y: -11;
  }

  .hero-card.card-photo-street {
    width: clamp(6.8rem, 10vw, 10.6rem);
    --home-x: 14;
    --home-y: -12;
  }

  .hero-card-stat {
    width: clamp(7.6rem, 11vw, 12.2rem);
    --home-x: -14;
    --home-y: 10;
  }

  .hero-card-wide {
    width: clamp(7.6rem, 11vw, 12.2rem);
    --home-x: 13;
    --home-y: 3;
  }

  /* Sat below the stat panels on each side, far enough down to clear
     them: measured at 1100x760 the first pass overlapped the left stat
     card by 31px and the right one by 5px. */
  .hero-card.card-photo-team {
    width: clamp(7.6rem, 11vw, 12.2rem);
    --home-x: -18;
    --home-y: 26;
  }

  .hero-card.card-stat-spend {
    width: clamp(7.6rem, 11vw, 12.2rem);
    --home-x: 16;
    --home-y: 17;
  }
}

@media (max-width: 900px) {
  .hero-card.card-photo-smile {
    width: clamp(5.4rem, 15vw, 7.4rem);
    --home-x: -20;
    --home-y: -16;
  }

  .hero-card.card-photo-street {
    width: clamp(4.9rem, 13.5vw, 6.7rem);
    --home-x: 21;
    --home-y: -18;
  }

  .hero-card-stat {
    width: clamp(5.5rem, 15vw, 7.6rem);
    --home-x: -21;
    --home-y: 15;
  }

  .hero-card-wide {
    width: clamp(5.5rem, 15vw, 7.6rem);
    --home-x: 20;
    --home-y: 5;
  }

  /* The original five are tuned to sit at the edges of a headline that
     nearly fills the viewport at this width. Landing two more cards in
     that same margin put them straight on top of the stat panels, so
     below 900px the cluster stays as it was. */
  .hero-card.card-photo-team,
  .hero-card.card-stat-spend {
    display: none;
  }
}

@media (max-width: 560px) {
  /* The cluster scatters around the headline — top and bottom, left and
     right — then converges over the title (covering it) and dives into
     the dot. That is the original choreography; what had broken it on
     mobile was --home-x/--home-y, which offsets the *whole* path
     including the converged position, so the cards were landing in a
     block below the button instead of over the text.

     Home is back to 0 horizontally and a small lift vertically, which
     centres the whole sequence on the headline rather than on the stage
     (the title sits ~85px above the stage's middle). --card-spread then
     sets how far out they scatter before converging. */
  .hero-card {
    --card-spread: 0.44;
    /* No overshoot on mobile. easeOutBack carries each card 4.3% past
       its resting spot at 65% through the entrance — and since the six
       travel different distances in different directions, that reads as
       up to 28px of drift in six directions at once: they appear to
       gather, spring back apart, and only then converge. A plain
       ease-in-out arrives once and stays put. */
    --card-bounce: 0;
    --home-x: 0;
    --home-y: -4;
    /* Start 3x further out than the scatter, which puts every card fully
       outside the viewport before it flies in — the smallest of the six
       needs 2.8x to clear the edge. The stage is overflow:clip, so they
       are simply not on screen until they arrive. */
    --card-entry: 3;
    --card-fade: 0;
    --card-stagger: 0.32;
    /* Tightens the first gathered cluster before the converge. */
    --card-gather: 0.62;
    /* Much less rounded than the desktop 1.95rem — at this size that
       radius ate the corners of the photographs. */
    border-radius: 0.85rem;
  }

  /* Every card is named explicitly at .hero-card.<name> specificity.
     The 900px and 1279px blocks above set --home-x/--home-y per card at
     that same weight, so a plain `.hero-card` declaration loses to them
     and only the two stat cards were picking up the values below — which
     is why the cluster converged in pieces instead of onto the title. */
  .hero-card.card-photo-smile,
  .hero-card.card-photo-street,
  .hero-card.card-photo-team,
  .hero-card.card-stat-spend,
  .hero-card.hero-card-stat,
  .hero-card.hero-card-wide {
    width: 41vw;
    border-radius: 0.95rem;
    --home-x: 0;
    --home-y: -4;
  }

  .hero-card.card-photo-team {
    display: block;
  }

  /* Both cards are hidden by the 900px block above and come back here,
     but they can't come back the same way any more. `display: block`
     suited the photograph this slot used to hold; on the stat card it
     overrode .hero-card-stat's own `display: flex`, so the figure and
     its label stopped being a centred column and laid out as a row —
     the number against the left edge, the label against the right. */
  .hero-card.card-stat-spend {
    display: flex;
  }

  /* The stat box sits at z-index 2 and the team photo at 3, so once the
     cluster gathered the photo covered the figure. Lifted above both
     photos it shares that corner with, but kept under the smile card
     at 6 so the rest of the stacking order is untouched. Has to go
     through --card-z: the loop writes z-index inline from data-z, and
     no stylesheet rule can outrank an inline style. */
  .hero-card.hero-card-stat:not(.hero-card-wide):not(.card-stat-spend) {
    --card-z: 5;
  }

  /* No crop on the laptop-desk shot: the card takes whatever shape the
     photograph is (400x566), so nothing is cut. A 4:3 window did remove
     the half-figure at the bottom, but it also cropped in so tightly on
     the man that the laptop went with it. */
}

/* Short phones (SE-sized, and anything in landscape-ish height). The
   rows above are placed in vh, but the copy they have to clear is sized
   in rem — so as the viewport gets shorter the cluster creeps up into
   the subtitle. At 375x667 the top row overlapped it by 34px. Smaller
   cards and lower homes give the same two-row arrangement inside the
   ~300px that is actually left between the subtitle and the button. */
@media (max-width: 560px) and (max-height: 740px) {
  .hero-card.card-photo-smile,
  .hero-card-stat:not(.hero-card-wide),
  .hero-card.card-photo-street,
  .hero-card.card-photo-team,
  .hero-card-wide,
  .hero-card.card-stat-spend {
    width: 22vw;
  }

  .hero-card.card-photo-smile {
    --home-x: -27;
    --home-y: 19.5;
  }

  .hero-card-stat:not(.hero-card-wide) {
    --home-x: 0.5;
    --home-y: 20.8;
  }

  .hero-card.card-photo-street {
    --home-x: 27;
    --home-y: 19.2;
  }

  .hero-card.card-photo-team {
    --home-x: -27;
    --home-y: 36.2;
  }

  .hero-card-wide {
    --home-x: 1;
    --home-y: 37.4;
  }

  .hero-card.card-stat-spend {
    --home-x: 27;
    --home-y: 36;
  }
}

.hero-button {
  --hover-x: 50%;
  --hover-y: 50%;
  position: absolute;
  left: 50%;
  top: clamp(672px, 83.6vh, 721px);
  min-width: 0;
  min-height: 50px;
  width: calc(419px - 369px * var(--hero-cta-progress));
  height: 50px;
  padding: 0;
  transform: translateX(-50%);
  transform-origin: center;
  border-radius: 999px;
  box-shadow: 0 18px 34px rgba(255, 0, 153, 0.22);
  overflow: hidden;
  /* Above .hero-cluster (7), so the cards dive in *behind* the dot and
     it occludes them on arrival. They used to sit on top of it, which
     is the only reason they had to be faded out — a card cannot pass
     into something it is painted over. Being genuinely behind it means
     the dot swallows them, and the opacity ramp in updateHero() is now
     only a short safety at the very end. */
  z-index: 8;
  opacity: calc(1 - var(--hero-cta-travel-fade));
  background-size: 180% 180%;
  background-position: 0% 50%;
  transition:
    box-shadow var(--motion-base) ease,
    filter var(--motion-base) ease,
    background-color var(--motion-fast) ease,
    background-position var(--motion-slow) ease;
}

.hero-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      160px circle at var(--hover-x) var(--hover-y),
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.12) 24%,
      rgba(255, 255, 255, 0) 68%
    );
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
  pointer-events: none;
}

.hero-button::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-standard);
  pointer-events: none;
}

.hero-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.8rem * (1 - var(--hero-cta-progress)));
  width: 100%;
  height: 100%;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: 310;
  line-height: 21px;
  color: #fff;
  opacity: calc(1 - var(--hero-cta-progress) * 2.4);
  transition:
    gap var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    letter-spacing var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-standard);
}

.hero-button-text {
  max-width: calc(8.6rem * (1 - var(--hero-cta-progress)));
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transform: scale(calc(1 - var(--hero-cta-progress) * 0.1));
  transform-origin: center;
  transition:
    max-width var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-standard),
    text-shadow var(--motion-base) ease,
    letter-spacing var(--motion-fast) ease;
}

.hero-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  opacity: 1;
  transform-origin: center;
  transform:
    translateY(1px)
    rotate(0deg)
    scale(calc(1 - var(--hero-cta-progress) * 0.18));
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-standard);
}

.hero-button:hover,
.hero-button:focus-visible {
  transform: translateX(-50%);
  box-shadow:
    0 26px 46px rgba(255, 0, 153, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  filter: saturate(1.06) brightness(1.03);
  background-position: 100% 50%;
}

.hero-button:hover::before,
.hero-button:focus-visible::before {
  opacity: 1;
}

.hero-button:hover::after,
.hero-button:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.hero-button:hover .hero-button-label,
.hero-button:focus-visible .hero-button-label {
  letter-spacing: 0.01em;
}

.hero-button:hover .hero-button-text,
.hero-button:focus-visible .hero-button-text {
  text-shadow: 0 8px 18px rgba(255, 255, 255, 0.16);
  letter-spacing: 0.01em;
}

.hero-button:hover .hero-button-icon,
.hero-button:focus-visible .hero-button-icon {
  transform:
    translateY(1px)
    translateX(4px)
    rotate(45deg)
    scale(calc(1.05 - var(--hero-cta-progress) * 0.18));
}

.travelling-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--travel-dot-width, 50px);
  height: var(--travel-dot-height, 50px);
  border-radius: var(--travel-dot-radius, 999px);
  /* Solid pink as a dot; eases to a marker tint while it's acting as
     a highlight, so the words stay readable through it. */
  background: color-mix(
    in srgb,
    var(--pink) calc(100% - var(--travel-dot-highlight, 0) * 87%),
    #ffeaf5
  );
  box-shadow: none;
  /* As a dot it sits in front of the copy at full strength — multiply
     would darken it against the words instead of covering them, which
     reads as the dot passing behind. The marker blend is kept below for
     the highlight-bar phase, where the words do have to stay legible
     straight through it. */
  mix-blend-mode: normal;
  /* Driven entirely by transform rather than left/top — those trigger
     layout on every frame, transform stays on the compositor. */
  transform:
    perspective(720px)
    translate3d(var(--travel-dot-x, 0px), var(--travel-dot-y, 0px), 0)
    translate(-50%, -50%)
    translateZ(var(--travel-dot-z, 0px))
    rotate(var(--travel-dot-rotate, 0deg))
    scale(var(--travel-dot-scale-x, 1), var(--travel-dot-scale-y, 1));
  z-index: 6;
  pointer-events: none;
  will-change: transform, width, height, opacity;
  backface-visibility: hidden;
}

/* Only while it is acting as a highlight bar over the copy. */
.travelling-dot.is-marker {
  mix-blend-mode: multiply;
}

.travelling-dot.is-hidden {
  opacity: 0;
  transform:
    translate3d(var(--travel-dot-x, 0px), var(--travel-dot-y, 0px), 0)
    translate(-50%, -50%)
    scale(0.3);
}

.why-section {
  padding: 0 0 5.8rem;
}

.why-shell {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 1240px;
  display: block;
}

.why-panel {
  position: relative;
  width: 100%;
  min-height: 1240px;
  padding: 0;
  border-radius: 58px;
  background: #2e2e2e;
  color: var(--white);
  box-shadow: 0 24px 56px rgba(46, 46, 46, 0.14);
  overflow: hidden;
}

.section-intro {
  max-width: 44rem;
  display: grid;
  gap: 1rem;
}

.section-intro h2 {
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.section-intro p:last-child {
  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);
}

.section-dark .section-intro p:last-child {
  color: rgba(244, 244, 244, 0.74);
}

.why-pill {
  position: absolute;
  left: 50%;
  top: 143px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 1.2rem;
  border-radius: 36px;
  border: 0.5px solid rgba(255, 255, 255, 0.92);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 310;
  line-height: 18px;
  z-index: 8;
}

.why-copy {
  position: absolute;
  left: 50%;
  top: 255px;
  width: min(1036px, calc(100% - 404px));
  transform: translateX(-50%);
  z-index: 8;
}

.why-copy-block {
  width: 100%;
  color: #fff;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 320;
  line-height: 43px;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

.why-copy-block span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.why-copy-strong {
  color: rgba(255, 255, 255, 0.14);
}

.why-copy-muted {
  color: rgba(255, 255, 255, 0.08);
}

.why-word {
  position: relative;
  display: inline-block;
  z-index: 8;
  color: inherit;
  filter: blur(0.28px);
  transition:
    color var(--motion-base) ease,
    filter var(--motion-base) ease,
    transform 420ms cubic-bezier(0.18, 0.95, 0.24, 1.24);
}

.why-word.is-revealed {
  color: rgba(255, 255, 255, 1);
  filter: blur(0);
}

.why-word.is-active {
  transform: none;
}

.why-button {
  position: absolute;
  left: 50%;
  top: 1054px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 229px;
  min-width: 229px;
  height: 50px;
  min-height: 50px;
  margin-top: 0;
  padding: 0;
  gap: 0.8rem;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 310;
  line-height: 21px;
  color: #fff;
  z-index: 8;
  background: #ff0099;
  box-shadow: none;
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) ease,
    filter var(--motion-base) ease;
}

.why-button-text,
.why-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: #fff;
  opacity: 1;
  transition: opacity 180ms ease;
}

.why-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transform: rotate(-45deg);
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.why-button:hover,
.why-button:focus-visible {
  transform: translateX(-50%) translateY(-2px) scale(1.02);
  box-shadow: 0 18px 34px rgba(255, 0, 153, 0.18);
  filter: saturate(1.02);
}

.why-button:hover .why-button-icon,
.why-button:focus-visible .why-button-icon {
  transform: translateX(4px) rotate(0deg);
}

.services-section {
  min-height: 760vh;
  position: relative;
  padding-bottom: 0;
}

.services-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
}

.services-header {
  position: absolute;
  top: calc(var(--nav-height) + 1.45rem);
  left: 50%;
  width: var(--shell);
  transform:
    translateX(-50%)
    translateY(calc(var(--services-intro-progress) * -42px));
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  z-index: 5;
  opacity: calc(1 - var(--services-intro-progress));
  pointer-events: none;
}

.services-header .section-intro {
  margin: 0 auto;
  max-width: 56rem;
}

.services-header .section-intro h2 {
  max-width: 13ch;
  margin-inline: auto;
}

.services-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 1.2rem;
  margin-inline: auto;
  border-radius: 36px;
  border: 0.5px solid rgba(46, 46, 46, 0.88);
  color: #2e2e2e;
  font-size: 16px;
  font-weight: 310;
  line-height: 18px;
}

.services-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.services-summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(46, 46, 46, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  color: rgba(46, 46, 46, 0.72);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.services-stack {
  position: relative;
  width: var(--boxed-guide-width);
  min-height: min(78vh, 860px);
  margin: 0 auto;
}

.service-card {
  position: absolute;
  inset: 0;
  z-index: var(--service-order, 1);
  display: grid;
  grid-template-columns: minmax(20rem, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 2vw, 2.1rem);
  align-items: stretch;
  padding: clamp(1.1rem, 1.5vw, 1.35rem);
  border-radius: clamp(2rem, 3vw, 2.8rem);
  border: 1px solid rgba(var(--service-accent-rgb, 46, 46, 46), 0.14);
  background: linear-gradient(135deg, var(--service-tint, #fff7fc), rgba(255, 255, 255, 0.98) 58%);
  box-shadow:
    0 28px 60px rgba(46, 46, 46, 0.1),
    0 16px 36px rgba(var(--service-accent-rgb, 46, 46, 46), 0.08);
  transform:
    translateX(calc(var(--service-shift-x, 0) * 1px))
    translateY(calc(var(--service-translate, 16) * 1px))
    rotate(calc(var(--service-rotate, 0) * 1deg))
    scale(var(--service-scale, 1));
  opacity: var(--service-opacity, 0);
  will-change: transform, opacity;
  transform-origin: var(--service-origin-x, 50%) 100%;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.38rem;
  background: linear-gradient(90deg, var(--service-accent), rgba(var(--service-accent-rgb), 0));
}

.service-card::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  right: -9rem;
  top: -10rem;
  border-radius: 50%;
  background: rgba(var(--service-accent-rgb, 46, 46, 46), 0.1);
  filter: blur(8px);
  pointer-events: none;
}

.service-visual,
.service-card-body {
  position: relative;
  z-index: 1;
}

.service-visual-panel {
  position: relative;
  min-height: clamp(25rem, 56vh, 35rem);
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1rem;
  padding: clamp(1.5rem, 2vw, 1.9rem);
  border-radius: clamp(1.7rem, 2.5vw, 2.4rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.34), transparent 26%),
    radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(155deg, var(--service-accent), var(--service-accent-deep));
  color: var(--white);
}

.service-visual-panel::before {
  content: "";
  position: absolute;
  right: -18%;
  top: 12%;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(8px);
}

.service-visual-panel::after {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -18%;
  width: 85%;
  height: 48%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.service-visual-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.service-index {
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 6.9rem);
  line-height: 0.78;
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.28);
}

.service-visual-stage {
  margin-top: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-visual-rail {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.8rem;
  align-self: end;
}

.service-visual-rail span {
  display: block;
  height: clamp(0.9rem, 1.6vw, 1.15rem);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.82));
}

.service-visual-rail span:nth-child(1) {
  width: 54%;
}

.service-visual-rail span:nth-child(2) {
  width: 81%;
}

.service-visual-rail span:nth-child(3) {
  width: 68%;
}

.service-visual-rail span:nth-child(4) {
  width: 92%;
}

.service-visual-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-self: end;
}

.service-visual-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.84rem;
  font-weight: 700;
}

.service-visual-note {
  position: relative;
  z-index: 1;
  padding: 1rem 1.05rem;
  border-radius: 1.4rem;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.service-visual-note strong {
  display: block;
  max-width: 15ch;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.service-visual-note p {
  margin-top: 0.55rem;
  max-width: 20rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  line-height: var(--body-copy-line-height);
  letter-spacing: var(--body-copy-letter-spacing);
}

.service-card-body {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(0.75rem, 1vw, 1.15rem) clamp(0.2rem, 0.6vw, 0.5rem) clamp(0.9rem, 1.4vw, 1.35rem);
  max-width: 42rem;
}

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

.service-pill {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(var(--service-accent-rgb, 46, 46, 46), 0.11);
  color: rgba(46, 46, 46, 0.8);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.service-count {
  color: rgba(var(--service-accent-rgb, 46, 46, 46), 0.8);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-card-body h3 {
  max-width: 12ch;
  font-size: clamp(2.45rem, 5vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.service-card-body > p {
  color: rgba(46, 46, 46, 0.72);
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  line-height: var(--body-copy-line-height);
  letter-spacing: var(--body-copy-letter-spacing);
  max-width: 36rem;
}

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

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

.case-intro {
  max-width: 48rem;
}

.case-masonry {
  column-count: 3;
  column-gap: 1.35rem;
}

.case-card {
  break-inside: avoid;
  margin-bottom: 1.35rem;
  padding: 1.55rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(46, 46, 46, 0.08);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(4px);
  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(--card-reveal-delay, 0ms);
  will-change: transform, opacity, filter;
}

.case-card.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  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: 0ms;
}

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

.case-card-dark {
  background:
    radial-gradient(circle at top right, rgba(255, 0, 153, 0.18), transparent 44%),
    #2c2c2c;
  color: var(--white);
}

.case-card-highlight {
  background:
    linear-gradient(135deg, rgba(255, 0, 153, 0.1), rgba(255, 255, 255, 0.9)),
    rgba(255, 255, 255, 0.9);
}

.case-card-stat {
  display: grid;
  gap: 0.55rem;
  background:
    radial-gradient(circle at top left, rgba(255, 0, 153, 0.2), transparent 50%),
    rgba(46, 46, 46, 0.96);
  color: var(--white);
}

.case-card-stat strong {
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
}

.case-card h3 {
  margin-bottom: 0.75rem;
  font-size: 2rem;
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.case-label {
  margin-bottom: 0.8rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: rgba(46, 46, 46, 0.5);
}

.case-card-dark .case-label,
.case-card-stat .case-label {
  color: rgba(244, 244, 244, 0.6);
}

.case-card p,
.case-card li,
.channel-list strong,
.channel-list span {
  color: inherit;
}

.case-card p:not(.case-label),
.case-card li {
  color: rgba(46, 46, 46, 0.74);
}

.case-card-dark p:not(.case-label),
.case-card-stat span {
  color: rgba(244, 244, 244, 0.78);
}

.case-list {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0;
}

.case-list li,
.channel-list li {
  padding-left: 1rem;
  position: relative;
}

.case-list li::before,
.channel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--pink);
}

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

.channel-list li {
  display: grid;
  gap: 0.15rem;
}

.channel-list span {
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(46, 46, 46, 0.46);
}

.channel-list strong {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.products-section {
  position: relative;
  padding: 5.35rem 0 3.1rem;
  background: #f6f6f8;
}

.products-shell {
  display: grid;
  gap: 1.75rem;
}

.products-intro {
  display: grid;
  justify-items: center;
  gap: 1.15rem;
  text-align: center;
}

.products-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 1.2rem;
  border-radius: 36px;
  border: 0.5px solid rgba(46, 46, 46, 0.88);
  color: #2e2e2e;
  font-size: 16px;
  font-weight: 310;
  line-height: 18px;
}

.products-heading {
  max-width: 429px;
  color: #2e2e2e;
  font-size: clamp(2.5rem, 4vw, 55px);
  font-weight: 800;
  line-height: 59px;
  letter-spacing: -0.04em;
}

.products-card {
  width: var(--boxed-guide-width);
  min-height: auto;
  margin: 0 auto;
  padding: 28px 28px 26px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 26px 54px rgba(46, 46, 46, 0.08);
  display: grid;
  gap: 1.35rem;
  transition:
    transform var(--motion-slow) var(--ease-soft),
    box-shadow var(--motion-slow) ease,
    border-color var(--motion-fast) ease;
}

.products-tabs {
  display: grid;
  /* One column per product: Pruuv, swoppa, Viewthru, qa.ai. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0.95rem;
  padding-inline: 0.1rem;
}

.product-tab {
  width: 100%;
  min-height: 62px;
  border-radius: 16px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-base) ease,
    transform var(--motion-base) var(--ease-standard);
}

.product-tab-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(184px, calc(100% - 1rem));
  height: 30px;
}

.product-tab img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(78%) !important;
  transition:
    filter var(--motion-base) ease,
    transform var(--motion-base) var(--ease-standard);
}

.product-tab:hover,
.product-tab:focus-visible {
  transform: none;
}

.product-tab:not(.is-active):hover img,
.product-tab:not(.is-active):focus-visible img {
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(70%) !important;
}

.product-tab.is-active {
  background: var(--pink);
  box-shadow: 0 18px 32px rgba(255, 0, 153, 0.18);
  transform: none;
}

.product-tab.is-active img {
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(100%) !important;
}

.product-tab img.product-tab-logo-reduced {
  height: 22px;
  transform: translateY(-5px);
}

.products-frame {
  display: grid;
  grid-template-columns: minmax(24rem, 0.98fr) minmax(30rem, 1.12fr);
  gap: 1.8rem;
  align-items: center;
  min-height: 0;
}

.product-panel {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.4rem 0.65rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: transparent;
  min-height: 0;
  transition:
    opacity var(--motion-base) var(--ease-soft),
    transform var(--motion-base) var(--ease-soft),
    filter var(--motion-base) ease;
}

.product-panel.is-switching,
.product-panel.is-entering {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  filter: blur(10px);
}

.product-label {
  margin-bottom: 1rem;
  padding: 0.1rem 0.95rem;
  border-radius: 10px;
  background: #ffeffa;
  color: rgba(46, 46, 46, 0.72);
  font-size: 14px;
  font-weight: 310;
  line-height: 22.5px;
}

.product-title {
  max-width: 405px;
  color: #000;
  font-size: clamp(2rem, 2.6vw, 32px);
  font-weight: 800;
  line-height: 42px;
  letter-spacing: -0.02em;
}

.product-copy {
  max-width: 471px;
  margin-top: 1.1rem;
  color: rgba(0, 0, 0, 0.74);
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  line-height: var(--body-copy-line-height);
  letter-spacing: var(--body-copy-letter-spacing);
}

.product-link {
  margin-top: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 362px;
  min-height: 53px;
  padding: 0.8rem 1.8rem;
  border-radius: 30.5px;
  border: 1px solid #ff0099;
  color: var(--pink);
  font-size: 20px;
  font-weight: 310;
  line-height: 21px;
  text-decoration: none;
  transition:
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) ease;
}

.product-link:hover,
.product-link:focus-visible {
  border-color: #ff0099;
  background: rgba(255, 0, 153, 0.06);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(255, 0, 153, 0.08);
}

.product-link-label {
  white-space: nowrap;
}

.product-link-arrow {
  display: inline-flex;
  transition: transform var(--motion-base) var(--ease-standard);
}

.product-link:hover .product-link-arrow,
.product-link:focus-visible .product-link-arrow {
  transform: translateX(2px) rotate(44deg);
}

.product-showcase {
  position: relative;
  min-height: 35.5rem;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.product-showcase-bloom {
  position: absolute;
  top: -1.25rem;
  right: -0.4rem;
  width: min(28rem, 88%);
  aspect-ratio: 1 / 1;
  border-top-right-radius: 32px;
  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%),
    linear-gradient(135deg, rgba(247, 220, 238, 0.88), rgba(255, 255, 255, 0.08) 72%);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.product-showcase-pattern {
  position: absolute;
  top: -0.45rem;
  right: 0.35rem;
  width: min(28.5rem, 92%);
  height: auto;
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
}

.product-showcase-stage {
  position: relative;
  width: min(100%, 31.75rem);
  min-height: 35rem;
  aspect-ratio: 569 / 640;
  margin-left: auto;
  z-index: 2;
}

.product-stat-card {
  position: absolute;
  margin: 0;
  transform-origin: center;
}

.product-stat-card img {
  display: block;
  width: 100%;
  height: auto;
}

.product-stat-card-top {
  top: 4.22%;
  left: 0;
  width: 40.42%;
  z-index: 1;
  animation: product-float-soft 9.6s var(--ease-soft) infinite;
}

.product-stat-card-main {
  top: 20.31%;
  right: 0;
  width: 76.27%;
  z-index: 2;
  animation: product-float-main 11.8s var(--ease-soft) infinite;
  animation-delay: -2.4s;
}

.product-stat-card-bottom {
  top: 55.47%;
  left: 11.78%;
  width: 40.25%;
  z-index: 3;
  animation: product-float-soft 10.4s var(--ease-soft) infinite;
  animation-delay: -4.1s;
}

.cta-section {
  padding: 0.85rem 0 0;
  position: relative;
  padding-bottom: 5rem;
  margin-bottom: -88px;
  background: #f6f6f8;
  border-top-left-radius: 42px;
  border-top-right-radius: 42px;
  border-bottom-left-radius: 42px;
  border-bottom-right-radius: 42px;
  box-shadow: none;
  z-index: 4;
  overflow: hidden;
}

.cta-shell {
  min-height: 72rem;
  display: grid;
  align-content: start;
  text-align: center;
  overflow: visible;
  gap: 100px;
  padding-bottom: 4.5rem;
}

.cta-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  display: grid;
  justify-items: center;
  gap: 1.8rem;
  margin: 3.8rem auto 0;
  transform: translateX(-106px);
}

.cta-type-heading {
  width: min(860px, calc(100vw - 2rem));
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  text-align: center;
  font-size: 73px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 73px;
  letter-spacing: -0.02em;
}

.cta-type-line {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.cta-typeword,
.cta-type-dot,
.cta-cursor {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Same no-whitespace-in-markup trick as .cta-typeword below: the space
   before these words comes from this margin, so it survives
   .cta-type-line being a flex row on desktop (which trims whitespace in
   an anonymous item) and an inline flow on mobile. */
.cta-type-thats {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin-left: 0.24em;
}

.cta-type-build {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin-left: 0.24em;
}

.cta-typeword {
  color: #000;
  /* The gap before the animated word comes from here and nowhere
     else. The markup deliberately has no whitespace before this span:
     .cta-type-line is a flex row on desktop, where trailing whitespace
     in an anonymous item is trimmed, but a block below 860px, where it
     is not — so a markup space plus this margin gave a single gap on
     desktop and a double one on mobile. */
  margin-left: 0.24em;
}

.cta-cursor {
  display: inline-block;
  width: 0.08em;
  height: 0.88em;
  margin-left: 0.06em;
  margin-right: 0.03em;
  background: currentColor;
  vertical-align: -0.08em;
  animation: blink-cursor 0.95s steps(1, end) infinite;
}

.cta-type-dot {
  color: var(--pink);
}

.cta-hero-button {
  --hero-cta-progress: 0;
  --hero-cta-travel-fade: 0;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: min(419px, calc(100vw - 2rem));
  height: 50px;
  min-height: 50px;
  margin-inline: auto;
}

.cta-hero-button .hero-button-label {
  gap: 0.8rem;
  opacity: 1;
  color: #fff;
  font-size: 19px;
  line-height: 20px;
}

.cta-hero-button .hero-button-text {
  max-width: none;
  opacity: 1;
  transform: none;
  text-shadow: none;
}

.cta-hero-button .hero-button-icon {
  opacity: 1;
  transform: translateY(1px) rotate(0deg) scale(1);
}

.cta-hero-button:hover,
.cta-hero-button:focus-visible {
  transform: none;
  box-shadow: 0 20px 38px rgba(255, 0, 153, 0.18);
  filter: none;
  background-position: 0% 50%;
}

.cta-hero-button:hover::before,
.cta-hero-button:focus-visible::before,
.cta-hero-button:hover::after,
.cta-hero-button:focus-visible::after {
  opacity: 0;
  transform: scale(0.97);
}

.cta-hero-button:hover .hero-button-label,
.cta-hero-button:focus-visible .hero-button-label,
.cta-hero-button:hover .hero-button-text,
.cta-hero-button:focus-visible .hero-button-text {
  letter-spacing: 0;
  text-shadow: none;
}

.cta-hero-button:hover .hero-button-icon,
.cta-hero-button:focus-visible .hero-button-icon {
  transform: translateY(1px) translateX(4px) rotate(45deg) scale(1.05);
}

.cta-art {
  position: relative;
  width: min(100vw, 1440px);
  height: clamp(30rem, 50vw, 44rem);
  margin: 0 auto;
  isolation: isolate;
}

/* Keeps <picture> out of the layout so the <img> inside it stays the
   grid item .cta-scene centres. */
.cta-scene picture {
  display: contents;
}

.cta-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform;
  animation: float-scene 8.4s ease-in-out infinite;
}

.cta-ground-shadow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(90%, 76rem);
  height: clamp(2.4rem, 4vw, 3.5rem);
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(46, 46, 46, 0.18) 0%, rgba(46, 46, 46, 0.08) 42%, transparent 76%);
  filter: blur(24px);
  opacity: 0.34;
}

/* The artwork is a cut-out on transparency, so this traces each object
   rather than the image's box. */
.cta-scene img {
  display: block;
  width: min(112%, 1520px);
  max-width: none;
  height: auto;
  transform: translateX(-6.2%);
  filter: drop-shadow(0 28px 34px rgba(46, 46, 46, 0.18));
}

.site-footer {
  position: relative;
  padding: 2.3rem 0 0;
  min-height: 1122px;
  background: linear-gradient(180deg, #343333 0%, #111111 100%);
  border-top-left-radius: 58px;
  border-top-right-radius: 58px;
  overflow: visible;
  z-index: 1;
}

.footer-shell {
  display: grid;
  grid-template-columns: 1fr 0.55fr minmax(34rem, 40rem);
  gap: 0;
  align-items: start;
  padding-top: 250px;
  padding-bottom: 0;
}

.footer-mark {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  width: 39px;
  margin: 0;
}

.footer-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-links {
  grid-column: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem 3.7rem;
  width: 100%;
  justify-self: end;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 0.95rem;
}

.footer-title {
  margin-bottom: 0.5rem;
  color: rgba(244, 244, 244, 1);
  font-size: 1rem;
  font-weight: 330;
  line-height: 1.40625rem;
}

.footer-link-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.footer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 0.55rem;
  line-height: 1;
  white-space: nowrap;
}

.footer-links a {
  color: rgba(244, 244, 244, 0.7);
  font-size: 0.875rem;
  font-weight: 315;
  line-height: 1.25rem;
  transition:
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-standard);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: rgba(255, 255, 255, 1);
  transform: translateX(6px);
}

.footer-mark,
.footer-next-page,
.footer-chip {
  transition:
    transform var(--motion-base) var(--ease-standard),
    filter var(--motion-base) ease,
    opacity var(--motion-fast) ease,
    box-shadow var(--motion-base) ease;
}

.footer-mark:hover,
.footer-mark:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.footer-chip:hover,
.footer-chip:focus-visible {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 16px rgba(255, 0, 153, 0.24);
}

.footer-wordmark-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 260px));
  margin-top: 72px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 104px;
}

.footer-wordmark-shell::after {
  content: "";
  position: absolute;
  right: 12.1%;
  bottom: 1.35rem;
  width: clamp(4.8rem, 7.8vw, 6.9rem);
  height: clamp(1.8rem, 3.1vw, 2.9rem);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  filter: blur(0.6px);
  opacity: 0.2;
}

.footer-wordmark {
  display: block;
  width: 100%;
  margin-left: 0;
}

.footer-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-bottom {

  /* Pinned to the foot of the screen while the footer scrolls past, so the

     progress bar is on screen for the whole of the footer and fills as the

     visitor scrolls through it. It settles at the end of the page. */

  position: sticky;

  bottom: 0;

  z-index: 3;
  margin-top: -136px;
  margin-bottom: 0;
  background: rgba(32, 32, 32, 0.71);
  backdrop-filter: blur(16px);
}

.footer-bottom-shell {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem;
  min-height: 76px;
}

.footer-bottom-copy,
.footer-bottom-label {
  color: rgba(244, 244, 244, 0.96);
  font-size: 16px;
  line-height: 34px;
}

.footer-bottom-copy {
  font-family: var(--font-display);
  font-weight: 800;
}

.footer-next-page {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.95rem;
  justify-self: end;
  color: inherit;
  text-decoration: none;
}

/* Only the page name reacts to hover; the bar stays put */
      .footer-next-page:hover,
      .footer-next-page:focus-visible {
        transform: none;
      }

      .footer-bottom-label {
        transition:
          transform var(--motion-base) var(--ease-standard),
          color var(--motion-fast) ease;
      }

      .footer-bottom-label:hover,
      .footer-next-page:focus-visible .footer-bottom-label {
        color: var(--pink);
        transform: translateX(-6px);
      }

      /* The bar never moves or changes on hover */
      .footer-next-page:hover .footer-progress,
      .footer-next-page:focus-visible .footer-progress {
        transform: none;
        box-shadow: none;
      }

.footer-bottom-label {
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 400;
  color: rgba(244, 244, 244, 0.84);
}

.footer-progress {
  position: relative;
  width: 228px;
  height: 7px;
  justify-self: end;
  border-radius: 999px;
  background: rgba(217, 217, 217, 0.92);
  overflow: hidden;
}

.footer-progress span {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--footer-progress-fill, 0));
  border-radius: inherit;
  background: var(--pink);
        /* Slow, so a quick scroll still shows the bar filling rather than jumping */
        transition: transform 1100ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

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

.contact-page {
  background: #f6f6f8;
}

.contact-page .motion-reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

.contact-page .nav-links a.is-active .nav-link-track > span:first-child {
  color: var(--pink);
}

.contact-hero {
  position: relative;
  min-height: 100vh;
  padding: 10.4rem 0 6.2rem;
  overflow: clip;
}

.contact-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  width: min(1180px, calc(100vw - 2.5rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(46, 46, 46, 0.16), transparent);
}

.contact-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
}

.contact-hero-copy {
  max-width: 48rem;
}

.contact-hero-copy h1 {
  margin-top: 1.2rem;
  font-size: clamp(4.2rem, 8.4vw, 8.55rem);
  line-height: 0.88;
  letter-spacing: 0;
}

.contact-hero-copy h1::after {
  content: ".";
  color: var(--pink);
}

.contact-hero-copy p:not(.eyebrow) {
  max-width: 40rem;
  margin-top: 1.45rem;
  color: var(--text-soft);
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.48;
}

.contact-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

.contact-primary-button,
.contact-secondary-button,
.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.65rem;
  border-radius: 999px;
  font-family: var(--font-nav);
  line-height: 1;
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) ease,
    background-position var(--motion-slow) ease,
    border-color var(--motion-fast) ease;
}

.contact-primary-button,
.contact-submit {
  padding: 1rem 1.75rem;
  border: 0;
  background: linear-gradient(135deg, #ff0099 0%, #ff37a9 50%, #ff0099 100%);
  background-size: 180% 180%;
  color: #fff;
  box-shadow: 0 18px 34px rgba(255, 0, 153, 0.22);
  cursor: pointer;
}

.contact-secondary-button {
  padding: 0.95rem 1.45rem;
  border: 1px solid rgba(46, 46, 46, 0.12);
  background: rgba(255, 255, 255, 0.48);
  color: rgba(46, 46, 46, 0.78);
}

.contact-primary-button:hover,
.contact-primary-button:focus-visible,
.contact-secondary-button:hover,
.contact-secondary-button:focus-visible,
.contact-submit:hover,
.contact-submit:focus-visible {
  transform: translateY(-4px);
  background-position: 100% 50%;
}

.contact-hero-art {
  position: relative;
  min-height: clamp(28rem, 43vw, 38rem);
}

.contact-art-card {
  position: absolute;
  overflow: hidden;
  background: #191919;
  box-shadow: 0 28px 70px rgba(46, 46, 46, 0.18);
}

.contact-art-card-main {
  inset: 2rem 1rem auto auto;
  width: min(28rem, 92%);
  aspect-ratio: 0.82;
  border-radius: 34px;
  transform: rotate(3deg);
}

.contact-art-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-float-pill,
.contact-float-stat {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 38px rgba(46, 46, 46, 0.12);
}

.contact-float-pill {
  min-height: 3.25rem;
  padding: 0.8rem 1.15rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 760;
}

.contact-float-pill-one {
  top: 1rem;
  left: 0;
  transform: rotate(-7deg);
}

.contact-float-pill-two {
  right: 0;
  bottom: 7.6rem;
  color: var(--pink);
  transform: rotate(5deg);
}

.contact-float-stat {
  left: 0.9rem;
  bottom: 2rem;
  width: min(17.5rem, 70%);
  padding: 1.05rem 1.2rem;
  border-radius: 26px;
}

.contact-float-stat strong {
  display: block;
  font-size: 3.2rem;
  line-height: 0.9;
}

.contact-float-stat span {
  display: block;
  margin-top: 0.55rem;
  color: rgba(46, 46, 46, 0.72);
  font-size: 0.98rem;
  line-height: 1.3;
}

.contact-proof {
  padding: 7.5rem 0 8rem;
  border-radius: 54px;
  overflow: hidden;
  scroll-margin-top: 7rem;
}

.contact-proof-shell {
  display: grid;
  gap: 3.3rem;
}

.contact-proof-intro {
  max-width: 50rem;
}

.contact-proof-intro h2,
.contact-form-copy h2 {
  margin-top: calc(1rem + 250px);
  font-size: clamp(3rem, 6vw, 6.35rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.contact-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.contact-benefit {
  min-height: 23rem;
  padding: 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  display: grid;
  align-content: space-between;
  transition:
    transform var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) ease,
    border-color var(--motion-base) ease;
}

.contact-benefit:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 0, 153, 0.36);
  background: rgba(255, 255, 255, 0.085);
}

.contact-benefit span {
  width: fit-content;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 0, 153, 0.16);
  color: rgba(244, 244, 244, 0.86);
  font-size: 0.82rem;
  line-height: 1;
}

.contact-benefit h3 {
  max-width: 14rem;
  margin-top: 3.6rem;
  color: #fff;
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
  line-height: 1;
  letter-spacing: 0;
}

.contact-benefit p {
  margin-top: 1.15rem;
  color: rgba(244, 244, 244, 0.68);
}

.contact-form-section {
  padding: 8rem 0 6.6rem;
  scroll-margin-top: 7rem;
}

.contact-form-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(27rem, 0.78fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}

.contact-form-copy {
  position: sticky;
  top: 9rem;
}

.contact-form-copy p:not(.eyebrow) {
  max-width: 34rem;
  margin-top: 1.2rem;
  color: var(--text-soft);
  font-size: 1.08rem;
}

.contact-next-steps {
  display: grid;
  gap: 0.75rem;
  margin-top: 2.2rem;
}

.contact-next-steps div {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(46, 46, 46, 0.1);
}

.contact-next-steps strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 0.9rem;
}

.contact-next-steps span {
  color: rgba(46, 46, 46, 0.74);
  font-size: 1rem;
}

.contact-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.05rem;
  padding: clamp(1.05rem, 2.4vw, 1.55rem);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    0 28px 78px rgba(46, 46, 46, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(160%);
}

.contact-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(46, 46, 46, 0.05);
  pointer-events: none;
}

.contact-field {
  display: grid;
  gap: 0.5rem;
}

.contact-field-full,
.contact-submit {
  grid-column: 1 / -1;
}

.contact-field label {
  color: rgba(46, 46, 46, 0.58);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 3.45rem;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.3;
  padding: 0.95rem 1rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.contact-field textarea {
  resize: vertical;
  min-height: 9.6rem;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: rgba(255, 0, 153, 0.45);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(255, 0, 153, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(46, 46, 46, 0.36);
}

.contact-submit {
  width: 100%;
  min-height: 4rem;
  font-size: 1rem;
  border-radius: 999px;
  box-shadow:
    0 22px 44px rgba(255, 0, 153, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.contact-footer.site-footer {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  min-height: 760px;
}

.contact-footer .footer-shell {
  padding-top: 150px;
}

@media (max-width: 1024px) {
  .contact-hero-shell,
  .contact-form-shell {
    grid-template-columns: 1fr;
  }

  .contact-hero-copy {
    max-width: none;
  }

  .contact-hero-art {
    min-height: 32rem;
  }

  .contact-art-card-main {
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(2deg);
  }

  .contact-form-copy {
    position: static;
  }

  .contact-benefits {
    grid-template-columns: 1fr;
  }

  .contact-benefit {
    min-height: 17rem;
  }
}

@media (max-width: 720px) {
  .contact-hero {
    min-height: auto;
    padding: 8.4rem 0 4.6rem;
  }

  .contact-hero-copy h1 {
    font-size: clamp(3.5rem, 15vw, 5.15rem);
    line-height: 0.94;
  }

  .contact-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-primary-button,
  .contact-secondary-button {
    width: 100%;
  }

  .contact-hero-art {
    min-height: 26rem;
  }

  .contact-art-card-main {
    width: min(21rem, 86vw);
    border-radius: 26px;
  }

  .contact-float-pill {
    font-size: 0.88rem;
  }

  .contact-float-stat {
    width: min(15rem, 78%);
  }

  .contact-proof,
  .contact-form-section {
    padding-block: 5rem;
  }

  .contact-proof {
    border-radius: 34px;
  }

  .contact-proof-intro h2,
  .contact-form-copy h2 {
    font-size: clamp(2.7rem, 12vw, 4.2rem);
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-page .nav-menu {
    background: rgba(255, 255, 255, 0.97);
  }

  .contact-page[data-nav-theme="dark"] .nav-menu {
    background: rgba(33, 33, 33, 0.96);
  }
}

.contact-main {
  position: relative;
  min-height: 100svh;
  padding: clamp(9.8rem, 16vh, 12.8rem) 0 clamp(2.4rem, 5vh, 4.2rem);
  overflow: clip;
}

.contact-main .section-shell {
  width: var(--boxed-guide-width);
}

.contact-layout {
  position: relative;
  min-height: calc(100svh - clamp(11rem, 17vh, 15rem));
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(24rem, 0.74fr);
  grid-template-areas: "copy form";
  align-items: start;
  gap: clamp(0.95rem, 2.2vw, 2rem) clamp(2rem, 5vw, 5.4rem);
}

.contact-copy {
  grid-area: copy;
  align-self: start;
  max-width: 43rem;
  margin-top: 50px;
  position: relative;
  z-index: 2;
  transform: none;
}

.contact-copy h1 {
  max-width: 8.6em;
  font-size: clamp(3.15rem, 5.15vw, 5.35rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.contact-title-dot {
  display: inline;
  color: var(--pink);
  font: inherit;
  line-height: inherit;
}

.contact-copy p:not(.eyebrow) {
  max-width: 34rem;
  margin-top: 1.05rem;
  color: var(--text-soft);
  font-size: clamp(1.02rem, 1.32vw, 1.18rem);
  line-height: 1.52;
}

.contact-mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.contact-mini-points span {
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0.62rem 0.9rem;
  border: 1px solid rgba(46, 46, 46, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(46, 46, 46, 0.72);
  font-size: 0.92rem;
  line-height: 1;
  backdrop-filter: blur(14px);
}

.contact-object {
  position: absolute;
  z-index: 1;
  top: calc(54% - 50px);
  left: calc((100vw - var(--boxed-guide-width)) / -2 - 1.2rem + 180px);
  width: clamp(24.625rem, calc(54vw - 150px), 38.625rem);
  filter: drop-shadow(0 28px 34px rgba(46, 46, 46, 0.16));
  opacity: 0.42;
  transform: translateY(-24%);
  animation: none;
  pointer-events: none;
}

.contact-object img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  animation: contact-float 4.9s ease-in-out infinite alternate;
}

.contact-main .contact-form {
  grid-area: form;
  align-self: start;
  position: relative;
  z-index: 2;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.contact-main .contact-submit {
  margin-top: 0.25rem;
}

.faq-page {
  background: #f6f6f8;
}

.faq-main {
  min-height: 100svh;
  padding: clamp(9.7rem, 15vh, 12rem) 0 clamp(3.2rem, 7vh, 5.8rem);
  overflow: clip;
}

.faq-main .section-shell {
  width: var(--boxed-guide-width);
}

.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: 1.25rem clamp(2rem, 5vw, 5rem);
}

.faq-copy {
  grid-area: copy;
  max-width: 34rem;
}

.faq-copy h1 {
  max-width: 7.6em;
  font-size: clamp(3rem, 5vw, 5.05rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.faq-copy p {
  max-width: 21rem;
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: clamp(1.02rem, 1.28vw, 1.16rem);
  line-height: 1.52;
}

.faq-accordion {
  grid-area: list;
  display: grid;
  gap: 0.55rem;
}

.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.74);
  box-shadow:
    0 18px 46px rgba(46, 46, 46, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px) saturate(145%);
  overflow: hidden;
}

.faq-question {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 4.15rem;
  padding: 0.95rem 1.1rem 0.9rem 1.25rem;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.22vw, 1.18rem);
  font-weight: 620;
  line-height: 1.08;
  text-align: left;
  list-style: none;
}

.faq-question::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: rgba(255, 0, 153, 0.1);
  color: var(--pink);
  font-family: var(--font-nav);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  transition:
    transform var(--motion-base) var(--ease-standard),
    background-color var(--motion-fast) ease;
}

.faq-item.is-open .faq-question::after {
  transform: rotate(45deg);
  background: var(--pink);
  color: #fff;
}

.faq-answer {
  overflow: hidden;
  opacity: 0;
  height: auto;
}

.faq-item.is-open .faq-answer {
  opacity: 1;
}

.faq-answer p {
  max-width: 42rem;
  padding: 0 3.6rem 1.15rem 1.25rem;
  color: rgba(46, 46, 46, 0.62);
  font-size: 1rem;
  font-weight: var(--body-copy-weight);
  line-height: 1.56;
}

.faq-cta {
  grid-area: cta;
  display: grid;
  gap: 1rem;
  max-width: 26rem;
  margin-top: 1.1rem;
  padding: 1.1rem;
  border: 1px solid rgba(46, 46, 46, 0.06);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 58px rgba(46, 46, 46, 0.08);
}

.faq-cta p {
  color: rgba(46, 46, 46, 0.5);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.faq-cta h2 {
  max-width: 18rem;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.faq-cta .contact-primary-button {
  width: fit-content;
  min-height: 3.35rem;
  padding-inline: 1.35rem;
}

@keyframes contact-float {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -28px, 0);
  }
}

@media (max-width: 1024px) {
  .contact-layout {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "form";
  }

  .contact-copy {
    max-width: none;
  }

  .contact-object {
    top: calc(56% - 50px);
    left: 50%;
    width: min(32.625rem, calc(124vw - 150px));
    opacity: 0.24;
    transform: translate(calc(-62% + 180px), -12%);
  }

  .faq-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "list"
      "cta";
  }

  .faq-copy,
  .faq-cta {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .contact-main .section-shell,
  .faq-main .section-shell {
    width: calc(100vw - 1.6rem);
  }
}

@media (max-width: 720px) {
  .contact-main .section-shell,
  .faq-main .section-shell {
    width: var(--shell);
  }

  .contact-main,
  .faq-main {
    min-height: auto;
    padding: 7.55rem 0 2.2rem;
  }

  .contact-layout {
    gap: 1.35rem;
  }

  .contact-copy h1 {
    max-width: 8.2em;
    font-size: clamp(2.7rem, 10.4vw, 3.65rem);
    line-height: 0.98;
  }

  .contact-mini-points {
    gap: 0.45rem;
  }

  .contact-mini-points span {
    min-height: 2.15rem;
    font-size: 0.82rem;
  }

  .contact-object {
    top: calc(57% - 50px);
    width: min(28.625rem, calc(132vw - 150px));
    transform: translate(calc(-64% + 180px), -10%);
  }

  .contact-main .contact-form {
    padding: 0.95rem;
  }

  .faq-layout {
    gap: 0.7rem;
  }

  .faq-copy h1 {
    font-size: clamp(2.35rem, 9.4vw, 3.15rem);
    line-height: 0.98;
  }

  .faq-copy p {
    max-width: none;
    margin-top: 0.55rem;
    font-size: 0.98rem;
    line-height: 1.42;
  }

  .faq-item {
    border-radius: 22px;
  }

  .faq-accordion {
    gap: 0.42rem;
    height: 25.45rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.1rem;
    scrollbar-width: none;
  }

  .faq-accordion::-webkit-scrollbar {
    display: none;
  }

  .faq-question {
    min-height: 3.15rem;
    padding: 0.62rem 0.78rem 0.58rem 0.9rem;
    font-size: 0.92rem;
  }

  .faq-question::after {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 1rem;
  }

  .faq-item p {
    padding: 0 1.1rem 1.2rem;
  }

  .faq-cta {
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-object,
  .contact-object img {
    animation: none;
  }
}

@keyframes btn-shimmer {
  0% {
    left: -110%;
    opacity: 1;
  }

  100% {
    left: 160%;
    opacity: 0.6;
  }
}

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

  35% {
    transform: translate3d(-0.18rem, -0.85rem, 0) rotate(-1.1deg);
  }

  50% {
    transform: translate3d(-0.32rem, -1.15rem, 0) rotate(-1.75deg);
  }

  75% {
    transform: translate3d(0.08rem, -0.42rem, 0) rotate(0.65deg);
  }
}

@keyframes drift-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  22% {
    transform: translate3d(0.18rem, -0.52rem, 0) rotate(0.55deg) scale(1.012);
  }

  50% {
    transform: translate3d(0.08rem, -1rem, 0) rotate(0.22deg) scale(1.018);
  }

  72% {
    transform: translate3d(-0.14rem, -0.68rem, 0) rotate(-0.42deg) scale(1.01);
  }
}

@keyframes drift-card {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  24% {
    transform: translate3d(0.2rem, -0.56rem, 0) rotate(0.8deg) scale(1.008);
  }

  48% {
    transform: translate3d(-0.14rem, -1.1rem, 0) rotate(-0.7deg) scale(1.014);
  }

  72% {
    transform: translate3d(0.1rem, -0.38rem, 0) rotate(0.32deg) scale(1.005);
  }
}

@keyframes drift-wide {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  28% {
    transform: translate3d(-0.22rem, -0.58rem, 0) rotate(-0.52deg) scale(1.01);
  }

  55% {
    transform: translate3d(0.24rem, -1.05rem, 0) rotate(0.58deg) scale(1.016);
  }

  80% {
    transform: translate3d(-0.1rem, -0.42rem, 0) rotate(-0.2deg) scale(1.006);
  }
}

@keyframes product-float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  30% {
    transform: translate3d(0.1rem, -0.28rem, 0) rotate(0.45deg);
  }

  62% {
    transform: translate3d(-0.08rem, -0.56rem, 0) rotate(-0.35deg);
  }
}

@keyframes product-float-main {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  34% {
    transform: translate3d(-0.14rem, -0.32rem, 0) rotate(-0.28deg) scale(1.003);
  }

  68% {
    transform: translate3d(0.12rem, -0.64rem, 0) rotate(0.22deg) scale(1.006);
  }
}

@keyframes float-scene {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  35% {
    transform: translate3d(0.2rem, -0.7rem, 0);
  }

  65% {
    transform: translate3d(-0.18rem, -1.05rem, 0);
  }
}

@keyframes blink-cursor {
  0%,
  46% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

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

  30% {
    transform: translate3d(0.32rem, -0.45rem, 0) rotate(0.35deg);
  }

  50% {
    transform: translate3d(0.55rem, -1rem, 0) rotate(0.85deg);
  }

  76% {
    transform: translate3d(-0.22rem, -0.35rem, 0) rotate(-0.3deg);
  }
}

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

  25% {
    transform: translate3d(0.1rem, -0.55rem, 0) rotate(0.55deg);
  }

  50% {
    transform: translate3d(0.28rem, -0.92rem, 0) rotate(1deg);
  }

  80% {
    transform: translate3d(-0.12rem, -0.28rem, 0) rotate(-0.25deg);
  }
}

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

  28% {
    transform: translate3d(0.24rem, -0.58rem, 0) rotate(0.95deg);
  }

  50% {
    transform: translate3d(0.42rem, -1.05rem, 0) rotate(1.5deg);
  }

  78% {
    transform: translate3d(-0.14rem, -0.36rem, 0) rotate(-0.4deg);
  }
}

@media (max-width: 1080px) {
  .site-footer {
    min-height: auto;
  }

  .case-masonry {
    column-count: 2;
  }

  .products-frame,
  .footer-shell {
    grid-template-columns: 1fr;
  }

  .products-card {
    min-height: auto;
    padding: 1.6rem;
    gap: 1.5rem;
  }

  .products-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .product-tab-logo {
    width: min(184px, calc(100% - 1.4rem));
  }

  .product-showcase {
    min-height: 37rem;
  }

  .product-showcase-pattern {
    width: min(31rem, 96%);
  }

  .product-showcase-stage {
    margin-inline: auto;
  }

  .products-heading {
    line-height: 1.05;
  }

  .cta-shell {
    min-height: 60rem;
    gap: 100px;
  }

  .cta-section {
    margin-bottom: -72px;
    border-top-left-radius: 34px;
    border-top-right-radius: 34px;
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
  }

  .cta-copy {
    margin-top: 3rem;
    /* The desktop -106px nudge is a subtle compositional offset, but the
       heading is nearly as wide as the viewport at this range, so any
       leftward shift pushes it off the left edge - drop it here. */
    transform: none;
  }

  /* The base 73px size only has room to breathe at full desktop widths -
     between here and the 720px breakpoint below, the second line (which
     cycles through several words via JS, some longer than "ambitious")
     was overflowing past the right edge. */
  .cta-type-heading {
    width: min(860px, calc(100vw - 2rem));
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    line-height: 1.05;
  }

  .cta-type-line {
    /* Swap the row-flex layout for a plain inline flow so the cycling
       word (which can be longer than "ambitious") wraps as one
       continuous line of text instead of each flex child wrapping
       independently into its own side-by-side column. */
    display: inline;
    white-space: normal;
    text-align: center;
  }

  .cta-art {
    width: min(100vw, 72rem);
    height: clamp(24rem, 52vw, 38rem);
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-mark {
    grid-column: auto;
    width: 32px;
    margin-top: 0;
    margin-left: 0.2rem;
  }

  .footer-links {
    grid-column: auto;
    justify-self: start;
    width: min(34rem, 100%);
  }

  .footer-shell {
    padding-top: 6rem;
  }

  .footer-wordmark-shell {
    width: min(100%, 52rem);
    margin-top: 3.5rem;
    padding-bottom: 92px;
  }

  .footer-wordmark {
    width: min(100%, 52rem);
    margin-left: 0;
  }

  .footer-wordmark-shell::after {
    right: 8%;
  }

  /* Stays a single row down to the phone tier below. Stacking the copy
     over the link was what gave this bar its height. */
  .footer-bottom-shell {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.9rem;
    min-height: 0;
    padding-block: 1.1rem;
  }

  .footer-next-page {
    justify-self: end;
  }
}

@media (max-width: 1240px) {
  /* The inline desktop nav (logo + links + CTA pill) needs ~1180px of
     breathing room and stops fitting the nav pill well before the 900px
     content breakpoint below - e.g. iPad landscape at 1024px was
     clipping the "Let's Talk" button off the edge. This block switches
     to the compact hamburger nav earlier, independent of the 900px
     breakpoint used for hero/section content sizing. */
  .menu-toggle {
    display: inline-flex;
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    right: 0;
    padding: 1rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(46, 46, 46, 0.08);
    box-shadow: 0 18px 40px rgba(46, 46, 46, 0.12);
    backdrop-filter: blur(22px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
  }

  body[data-nav-theme="dark"] .nav-menu {
    background: rgba(28, 28, 28, 0.97);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-about-wrap {
    width: auto;
    min-height: 0;
    display: block;
  }

  /* The hover panels can't work on a touch device, so on mobile the
     "+" links expand their sub-pages inline instead — see the toggle in
     script. Collapsed by default; the open state below out-specifies
     this rule. */
  .nav-about-panel {
    display: none;
  }

  .nav-about-wrap.is-open .nav-about-panel {
    display: block;
    position: static;
    width: auto;
    padding: 0.15rem 0 0.55rem 0.9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* The panel photograph is desktop garnish; in a stacked menu it just
     pushes the links off the screen. */
  .nav-about-wrap.is-open .nav-about-media {
    display: none;
  }

  .nav-about-wrap.is-open .nav-about-links {
    gap: 0.3rem;
  }

  .nav-links a,
  .nav-menu a {
    min-height: 0;
    width: auto;
    padding: 0.9rem 0.35rem;
    color: inherit;
  }

  /* The desktop nav gives each link a fixed width by position (the fifth is
     63px), which clips "Contact us" to "Contac" in the stacked menu. */
  .nav-links a:nth-child(n) {
    width: auto;
  }

  .nav-links a {
    justify-content: flex-start;
    min-height: 0;
  }

  .nav-link-track {
    place-items: start;
  }

  .nav-link-track > span {
    justify-content: flex-start;
  }

  .nav-cta {
    width: 100%;
    min-width: 0;
    margin-top: 0.5rem;
  }
}

@media (max-width: 900px) {
  :root {
    /* 1.4rem left an 11px gutter each side — tighter than the 24px the
       desktop shell uses, so every section sat harder against the phone
       edge than it does on a laptop. 2.5rem gives a 20px gutter. */
    --shell: min(100vw - 2.5rem, 760px);
  }

  .site-header {
    top: 1rem;
    padding-inline: 0.8rem;
  }

  body.nav-scrolled .site-header,
body.contact-page .site-header {
    transform: translateY(-0.45rem);
  }

  .nav-shell {
    width: calc(100vw - 1.6rem);
    padding-inline: 1rem;
    border-radius: 22px;
  }

  .brand-logo {
    width: 92px;
  }

  .hero-copy {
    top: 13.4rem;
    width: min(92vw, 780px);
  }

  .hero-title {
    font-size: clamp(4rem, 10.4vw, 6.5rem);
    line-height: 0.98;
  }

  .hero-button {
    top: auto;
    bottom: 2rem;
  }

  .why-panel {
    min-height: auto;
    padding: 6rem 3rem 6.25rem;
    border-radius: 42px;
  }

  .why-shell {
    width: var(--shell);
    max-width: none;
    min-height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .why-pill,
  .why-copy,
  .why-button {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }

  .why-copy {
    margin-top: 3rem;
    width: 100%;
  }

  .why-copy-block {
    font-size: 1.7rem;
    line-height: 2.9rem;
    text-wrap: pretty;
  }

  .why-button {
    margin-top: 4.5rem;
  }

  body.menu-open .nav-menu {
    display: flex;
  }

  .services-section {
    min-height: 640vh;
  }

  .service-card {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .service-visual-panel {
    min-height: 20rem;
  }

  .service-card-body {
    max-width: none;
    padding: 0.25rem 0.35rem 0.65rem;
  }

  .service-card-body h3 {
    max-width: none;
  }

  .service-index {
    font-size: 3rem;
  }
}

@media (max-width: 720px) {
  .site-header {
    top: 0.7rem;
    padding-inline: 0.7rem;
  }

  body.nav-scrolled .site-header,
body.contact-page .site-header {
    transform: translateY(-0.3rem);
  }

  .nav-shell {
    /* Matches the content gutter, so the pill's edge lines up with the
       sections under it instead of sitting 9px proud of them. */
    width: calc(100vw - 2.5rem);
    padding-inline: 1rem;
    min-height: 64px;
  }

  .hero-section {
    /* 290vh of hero plus 90vh for the intro collapse. The extra 30vh
       over the old 350vh is dwell on the button — see --hero-cta-start
       just below. */
    /* +60vh for the pause before the CTA shrinks (--hero-cta-hold).
       Keep the two numbers in step. */
    min-height: 440vh;
  }

  /* The intro film clears at 90vh, and the button used to start
     collapsing into the dot at 0.52 of the hero — about 325px later,
     a third of a screen. On a phone that reads as the CTA vanishing
     the moment the hero arrives, which is no time at all to notice a
     button you are meant to press. At 0.64 of a 380vh hero it holds
     full size for roughly 720px — a screen's worth of scrolling — and
     the pour into the dot moves back with it, so the beat between the
     button becoming a dot and the cards falling into it is unchanged. */
  body {
    --hero-cta-start: 0.64;
    /* A 60vh pause with the button at full size, just before it starts
       shrinking — more time to press it. Added to the hero's height
       above, so nothing else in the hero is re-paced. */
    --hero-cta-hold: 60;
    --hero-cta-span: 0.12;
    --hero-sink-start: 0.79;
    --hero-sink-span: 0.19;
  }

  .hero-stage {
    min-height: max(100vh, 760px);
  }

  /* The copy block's centre sits on this value. At 15.5rem it rode high
     — centre 248 against a viewport centre of 406 — which read as
     top-weighted once the headline came down to three lines. */
  /* The copy block's centre sits on this value. The headline is four
     lines at its full size, so the block is ~274px tall; 17.8rem puts
     its centre at 285 against a viewport centre of 406, which is as far
     down as it can go while still clearing the card cluster below. */
  /* The copy + button group is centred on the viewport as a unit: the
     block is ~383px tall (274 copy + 53 gap + 56 button), so on an
     812px screen it starts at 215 and this value puts the copy's own
     centre at 352. */
  .hero-copy {
    top: 22rem;
    width: min(92vw, 560px);
  }


  .hero-title {
    font-size: clamp(3.55rem, 16vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
  }

  .hero-subtitle {
    max-width: 22rem;
    margin-top: 1rem;
    font-size: 1.05rem;
  }

  .hero-line {
    white-space: normal;
    /* Tight, but not so tight that the descenders of "campaigns." run
       into the caps below — the rule under this one handles that seam
       on its own, so this only sets the rhythm. */
    line-height: 1.0;
  }

  /* Even baseline spacing does not read as even here. "campaigns." ends
     the first block and its p and g hang ~0.21em below the baseline,
     so the ink gap to "We build" came out at 8px where the two gaps
     either side of it are 20.6px. The block boundary falls exactly on
     that seam, so giving it back the descender's depth evens out all
     three optically without touching the line-height. */
  .hero-line + .hero-line {
    margin-top: 0.21em;
  }

  /* The headline splits in two so the intro's closing circle can sit in
     the gap: "We run" slides left and "campaigns." slides right. That
     works on desktop where both sit on one line — but here the line
     wraps, so the two halves are on separate lines and the split just
     shunted them in opposite directions for no visible reason. Only the
     first half moves now; "campaigns." stays centred. */
  .hero-line-part-end {
    transform: none;
  }

  /* Once the headline is allowed to wrap, the last line can no longer
     be a centred flex row: the text becomes a single flex item that
     takes the full width, the full stop is pushed to the far edge of
     it, and the dot ends up stranded ~34px off the end of "businesses"
     with a hole between them. Back to normal inline flow, where the
     stop simply follows the word it belongs to. */
  .hero-line:last-child {
    display: block;
  }

  .hero-dot-anchor {
    display: inline;
    margin-left: 0;
  }

  .section-intro p:last-child,
  .why-copy-block,
  .service-card-body > p,
  .cta-copy p:last-of-type {
    font-size: 1rem;
  }

  .why-panel {
    min-height: auto;
    padding: 4.6rem 1.35rem 4.8rem;
    border-radius: 30px;
  }

  .why-shell {
    width: var(--shell);
    max-width: none;
    min-height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .why-pill {
    width: fit-content;
    min-height: 2rem;
    padding-inline: 1.2rem;
    font-size: 1rem;
    line-height: 1.125rem;
  }

  .why-copy {
    margin-top: 2rem;
  }

  .why-copy-block {
    font-size: 1.28rem;
    line-height: 2.1rem;
    text-wrap: pretty;
  }

  .why-button {
    width: min(14.3rem, 100%);
    min-width: 0;
    margin-top: 3rem;
    font-size: 1rem;
    line-height: 1.2;
  }

  .why-button-icon {
    font-size: 0.95rem;
  }

  .hero-card-photo {
    border-radius: 24px;
  }

  /* Sizing is handled in cqw on the base rule, so the phone tier only
     needs the tighter corner. */
  .hero-card-stat {
    border-radius: 24px;
  }

  .why-section,
  .case-section,
  .cta-section {
    padding-block: 6rem;
  }

  /* Lifts the button off the bottom edge: at 1.2rem its centre sat at
     94% of the screen, past where a thumb comfortably reaches. 5.25rem
     puts it around 86%, inside the reach zone and still clear of the
     card cluster above it. */
  /* Anchored under the copy, not to the bottom of the stage. Pinning it
     to `bottom` left a ~220px void between the subtitle and the button
     on first view — that band is where the cards land, but they only
     arrive on scroll, so the hero opened on a hole. The cluster now
     sits below the button instead (see the home-y values above). */
  .hero-button {
    top: 43.33rem;
    bottom: auto;
    /* Ends at 3.5rem, matching the height — at 12rem it shrank to 4rem
       wide against a 3.5rem height, so the "dot" was a 64x56 ellipse
       rather than a circle. */
    width: calc(16rem - 12.5rem * var(--hero-cta-progress));
    height: 3.5rem;
    min-height: 3.5rem;
    /* The shadow tightens into a symmetric glow as the button collapses.
       At full size an 18px drop with 34px blur is right; on the dot it
       reached ~52px below a button that sits 15px off the bottom of the
       stage, and .hero-stage is overflow:clip — so the lower half was
       sliced off. Ending at 0 offset / 14px blur keeps it inside. */
    box-shadow:
      0 calc(18px * (1 - var(--hero-cta-progress)))
      calc(34px - 20px * var(--hero-cta-progress))
      rgba(255, 0, 153, 0.22);
  }

  .hero-button-label {
    gap: 0.55rem;
    font-size: 0.92rem;
  }

  .services-section {
    min-height: auto;
    padding: 5rem 0 4rem;
  }

  .services-stage {
    position: static;
    min-height: auto;
    padding: 0;
  }

  .services-header {
    position: static;
    top: auto;
    left: auto;
    width: var(--shell);
    transform: none;
    margin: 0 auto 1.5rem;
  }

  .services-summary {
    gap: 0.55rem;
  }

  .services-summary span {
    min-height: 2rem;
    padding-inline: 0.8rem;
    font-size: 0.72rem;
  }

  .services-pill {
    width: fit-content;
    min-height: 32px;
    padding-inline: 1.2rem;
    margin-inline: auto;
    font-size: 16px;
    line-height: 18px;
  }

  .services-stack {
    width: var(--shell);
    min-height: auto;
    display: grid;
    gap: 1rem;
  }

  .service-card {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 0.9rem;
  }

  .service-visual-panel {
    min-height: 18rem;
    padding: 1.2rem;
  }

  .service-visual-note strong {
    font-size: 1.02rem;
  }

  .service-card-body {
    padding: 0.25rem 0.2rem 0.35rem;
  }

  .service-copy-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.7rem;
  }

  .service-card-body h3 {
    max-width: none;
    font-size: 1.95rem;
    line-height: 0.98;
  }

  .service-card-body > p {
    max-width: none;
  }

  .case-masonry {
    column-count: 1;
  }

  .products-section {
    padding: 4.7rem 0 2.8rem;
  }

  .products-frame {
    gap: 1rem;
  }

  /* Five logos never divide evenly into a grid — two columns gave a
     2+2+1 stack three rows deep, three gave 3+2 with a hole on the
     end. One scrolling row sidesteps the arithmetic: the tabs sit on
     a single line, each sized to its own wordmark, and the row bleeds
     to the screen edges so the next tab peeks and shows it moves. */
  .products-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Cancels .products-card's 16px padding, then puts it back inside
       the scroller so the first and last tabs still line up with the
       card's copy.

       scroll-padding matters as much as the padding: snapping measures
       from the scrollport edge, not the padding edge, so the first tab
       was being snapped flush to the card's edge — scrollLeft sat at
       16px and ate the indent, leaving the active pink tab 16px left
       of the title under it. */
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .products-tabs::-webkit-scrollbar {
    display: none;
  }

  .product-tab {
    /* One fixed basis for all five so the row reads as a set of equal
       tabs rather than five different shapes. 8.5rem clears the widest
       wordmark (viewthru at 99px) with padding to spare. flex-basis
       rather than width because the tabs carry width:100% from the
       grid layout, which would otherwise win. */
    flex: 0 0 8.5rem;
    width: auto;
    min-height: 2.9rem;
    height: 3.4rem;
    padding-inline: 1rem;
    border-radius: 11px;
    scroll-snap-align: start;
  }

  body:not(.no-page-v2) .product-tab-logo {
    width: auto;
    height: 1.05rem;
  }

  .product-tab-text-logo {
    font-size: 1rem;
  }

  /* The CTA has to sit under the showcase on a phone, but it lives
     inside .product-panel and the tab script rewrites that panel's
     innerHTML on every switch — so it cannot just be moved in the
     markup, and a duplicate would go stale (the label is per-product).

     display:contents promotes the panel's own children into the frame's
     grid, where `order` can place the link after the image. It is all
     class-based, so it survives the innerHTML rewrite. The panel's box
     disappears with it, so its padding is re-applied to the children
     that needed it. */
  .product-panel {
    display: contents;
  }

  /* minmax(0,1fr), not 1fr: the swoppa / qa.ai / Loaneo showcases size
     their stage at min(100%, 32rem), and against a plain `1fr` track
     that 32rem counts as max-content — so the track grew to 487px
     inside a 335px card and every child stretched with it. A 0 minimum
     stops the track being pushed out by its own contents, and the
     stages' 100% then resolves against the real width. */
  .products-frame {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    justify-items: start;
  }

  .product-tag,
  .product-label {
    order: 1;
    margin-top: 1.4rem;
  }

  .product-title {
    order: 2;
  }

  .product-copy {
    order: 3;
  }

  .product-showcase {
    order: 4;
    justify-self: stretch;
  }

  .product-link {
    order: 5;
    justify-self: stretch;
    margin-bottom: 0.4rem;
  }

  /* The card was sized off the viewport rather than its shell, so it
     stretched the shell's auto track to 359px inside a 335px container
     and took the intro and overview out with it. */
  .products-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .products-card {
    width: 100%;
    max-width: 40rem;
    padding: 1rem;
    border-radius: 24px;
  }

  .product-tab {
    min-height: 3.55rem;
    border-radius: 14px;
  }

  .product-tab-logo {
    width: min(100%, 7.7rem);
    height: 1.25rem;
  }

  .products-pill {
    width: fit-content;
    min-height: 32px;
    padding-inline: 1.2rem;
    font-size: 16px;
    line-height: 18px;
  }

  .products-heading {
    max-width: 17rem;
    font-size: clamp(2.25rem, 9vw, 3rem);
    line-height: 1.03;
  }

  .product-title {
    max-width: 100%;
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .product-copy {
    max-width: 100%;
    margin-top: 1.15rem;
    font-size: var(--body-copy-size);
    line-height: var(--body-copy-line-height);
  }

  .product-link {
    min-width: min(100%, 18rem);
    width: 100%;
    min-height: 3rem;
    font-size: 1rem;
  }

  .product-showcase {
    min-height: auto;
  }

  .product-showcase-bloom {
    width: min(18rem, 94%);
    top: -0.85rem;
  }

  .product-showcase-pattern {
    top: -0.35rem;
    right: 50%;
    width: min(19rem, 100%);
    transform: translateX(50%);
  }

  .product-showcase-stage {
    width: min(100%, 20rem);
    min-height: auto;
  }

  /* 100px of grid gap plus the copy's own 2rem top margin left 145px
     of blank between the artwork and the headline, so the block read as
     two unrelated halves rather than one CTA. */
  .cta-shell {
    min-height: calc(100svh - 15rem);
    gap: 44px;
    padding-bottom: 3rem;
  }

  .cta-section {
    margin-bottom: -56px;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  .cta-copy {
    margin-top: 0.75rem;
    transform: none;
  }

  /* 100vw measured past the shell's own inset and pushed the artwork
     22px off the right edge of the card. The shell is the containing
     block, so 100% is the figure that was wanted. */
  /* Sized to the mobile artwork's own 1.9:1 proportions, so the frame
     ends where the collage does instead of leaving dead air under it.
     A little taller than the image itself to leave headroom — see the
     float note below. */
  .cta-art {
    width: min(100%, 34rem);
    height: 13.75rem;
  }

  /* The float stays. It peaks at 0.7rem (11.2px) of upward drift, and
     .cta-section is overflow:hidden for its rounded corners — the top
     of the collage used to sit only 5px inside that boundary, so every
     drift clipped it. The taller frame above gives 17px of headroom,
     which clears the peak. */

  /* The ground shadow is a separate blurred ellipse element, not part of
     the artwork. The mobile collage is cut out with its own soft
     contact shadows, so this reads as a stray grey smudge under it. */
  .cta-ground-shadow {
    display: none;
  }

  /* line-height was 0.98 — tighter than the type is tall, so the two
     lines closed up on each other. The 19rem cap also held the heading
     ~30px narrower than the shell it sits in, forcing an extra wrap. */
  /* Block, not column-flex. The 1080px rule already sets
     .cta-type-line to display:inline so the sentence flows as one
     string, but a flex container blockifies its children, so the two
     lines stayed separate and "build" could never sit beside
     "something" — the first line always broke after "build". As a plain
     block the spans really are inline and the copy wraps to the width
     it has. */
  /* Sized so "build something that's" fits on one line at every phone
     width: that string is 9.19x the font-size, against a width of
     100vw - 2.5rem capped at 24rem. The cap and the clamp floor are
     both set by that constraint (430px and 320px respectively). */
  .cta-type-heading {
    display: block;
    width: min(24rem, calc(100vw - 2.5rem));
    max-width: none;
    font-size: clamp(1.8rem, 9.2vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  /* Greedy wrapping fills the first line to "If you're ready to build"
     (314px at 375px) and can never put "build" with "something",
     because "build something that's" is wider still (317px). Only a
     forced break gets the split asked for. */
  .cta-type-build::before,
  .cta-type-thats::before {
    content: "\A";
    white-space: pre;
  }

  .cta-type-build,
  .cta-type-thats {
    margin-left: 0;
  }

  /* Two lines in the stat card on phones. */
  .stat-line-break::before {
    content: "\A";
    white-space: pre;
  }

  /* ...and "in 12 Months" kept whole on the line below. */
  .stat-line-break-soft::before {
    content: "\A";
    white-space: pre;
  }

  /* The stat caption is small enough on a phone to read as fine print;
     6.4cqw of a ~128px card is 8.2px, so this is roughly +2px. */
  .hero-card-stat span {
    font-size: 8cqw;
  }

  /* The cycled words are very different lengths ("bold" vs "built to
     last"), so the headline kept reflowing between line counts and the
     button under it jumped — 37px at 375px, 42px at 430px. A reserved
     min-height cannot fix this, because the number of lines needed
     differs per width. Breaking before the word instead puts it on a
     line of its own, so the line count stops depending on which word is
     being typed and the block holds still at every width. */
  /* No break here any more: the word shares line three with "that's",
     which is what keeps the line count fixed at three while the word
     cycles. */
  .cta-typeword::before {
    content: none;
  }

  .cta-hero-button {
    bottom: auto;
    width: min(17rem, calc(100vw - 2.5rem));
    height: 3.4rem;
    min-height: 3.4rem;
  }

  /* The label's font-size never reached the two spans inside it: a
     global span rule pins .hero-button-text to 16px, and
     .hero-button-icon carries a hard 18px of its own — so the arrow
     rendered larger than the words it follows. Both are set explicitly
     here, with the arrow at ~80% of the text, which is where a trailing
     glyph sits without drawing attention to itself. */
  .cta-hero-button .hero-button-label {
    font-size: 1rem;
    gap: 0.5rem;
  }

  .cta-hero-button .hero-button-text {
    font-size: 1rem;
  }

  .cta-hero-button .hero-button-icon {
    font-size: 0.8rem;
  }

  /* Same mismatch on the hero's own button. */
  .hero-button .hero-button-text {
    font-size: 0.95rem;
  }

  .hero-button .hero-button-icon {
    font-size: 0.76rem;
  }

  .cta-ground-shadow {
    width: 86%;
    bottom: 8%;
  }

  /* Mobile uses its own three-object artwork (see the <picture> in the
     markup), so there is nothing to crop or offset — it is simply sized
     to the full width of the screen.

     No filter here. .cta-scene runs an 8.4s infinite float animation, and
     a drop-shadow on top of that forces the browser to re-rasterise the
     whole bitmap every frame — which is what made the artwork slow to
     appear and then stutter on a phone. */
  .cta-scene img {
    width: 112%;
    max-width: none;
    transform: none;
    filter: none;
  }

  /* Two columns: the long list on the left with the two short groups
     stacked beside it. One column left this as a single tall
     left-aligned rag with nothing on the right half of the screen. */
  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 1.9rem 1.25rem;
  }

  .footer-column:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .footer-column:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .footer-column:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  /* 8px between links, groups held apart by the grid gap above — the
     rhythm has to carry the grouping since the titles are small. */
  .footer-column {
    gap: 0.5rem;
  }

  .footer-title {
    margin-bottom: 0.3rem;
  }

  /* The mark was sitting 1px off "The Good", reading as a bullet on the
     list rather than as the brand mark above it. The lift itself is set
     further down, after the 1024px page-v2 block that would otherwise
     win on source order. */
  .footer-mark {
    width: 30px;
    margin-top: 0;
    margin-bottom: 3.25rem;
  }

  .footer-links {
    padding-bottom: 2rem;
  }

  /* 58px on a 375px-wide block is an enormous curve. */
  .site-footer {
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
  }


  .footer-shell {
    padding-top: 1.5rem;
  }

  .footer-wordmark-shell {
    width: 100%;
    margin-top: 3.4rem;
    padding-bottom: 4.25rem;
    /* The shell is exactly the viewport width here, so clipping on it
       trims the wordmark's deliberate bleed at the screen edges instead
       of letting it widen the document — the 105vw mark was adding 8px
       of horizontal scroll. */
    overflow: hidden;
  }

  /* Sized off the dot rather than off the container. In the artwork the
     dot's centre sits at 97.84% of the width, so at 105vw wide and
     -2.73vw of left offset that centre lands exactly on the right edge
     of the screen — the dot is always half off — while the "l" loses a
     sliver on the left. Both figures are in vw, so the crop holds at
     every phone width. Going much past 105vw would eat the "l" whole:
     it is only 7.5% of the artwork. */
  .footer-wordmark {
    width: 98vw;
    max-width: none;
    /* Keeps the dot's centre on the right edge at the smaller size:
       the dot sits at 97.84% of the artwork, so 0.9784 * 98 + 4.12
       = 100vw. Shrinking the mark is what trades away the left-hand
       crop — at 98vw the "l" clears the edge instead of bleeding. */
    margin-left: calc(4.12vw - 10px);
  }

  .footer-wordmark-shell::after {
    right: 5%;
    bottom: 0.85rem;
    width: 3.8rem;
    height: 1.2rem;
  }

  /* One row: the copy, then the label and its progress bar. These three
     used to stack, which is what made the bar 151px tall on a phone.
     The sizes below fit 375px on a single line with the bar taking
     whatever is left; flex-wrap is the safety net for anything narrower,
     where it drops to two rows rather than overflowing. */
  .footer-bottom-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 0.6rem;
    min-height: 0;
    padding-block: 0.95rem;
  }

  .footer-bottom-copy {
    flex: 0 1 auto;
    min-width: 0;
  }

  .footer-next-page {
    /* Basis kept under what is actually spare next to the copy — at an
       8rem basis the two together asked for 340px of a 335px shell and
       the row wrapped. */
    flex: 1 1 6.5rem;
    width: auto;
    grid-template-columns: auto minmax(2.25rem, 1fr);
    align-items: center;
    gap: 0.5rem;
  }

  .footer-bottom-copy,
  .footer-bottom-label {
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
  }

  .footer-bottom-label {
    justify-self: start;
  }

  .footer-progress {
    width: auto;
    /* The base rule pins this to the end of its track, which with an
       auto width collapses it to 0 — its fill span is absolutely
       positioned, so there is no content to size it. Stretch fills the
       track instead. */
    justify-self: stretch;
    height: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-copy,
  .hero-card,
  .travelling-dot,
  .service-card,
  .product-stat-card,
  .motion-reveal {
    transform: none !important;
  }

  .hero-button-label {
    opacity: 1 !important;
  }

  .motion-reveal {
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   SERVICES (homepage) — sits under the showreel.
   Copy left, horizontal card slider right. Prefix: .srv-
   Card accent colours are the originals from the previous
   services section, passed in as --srv-accent / --srv-wash.
   ============================================================ */

.srv-section {
  position: relative;
  padding: 6.5rem 0 4.5rem;
  scroll-margin-top: var(--nav-height);
  overflow: hidden;
}

/* Same content rail as the testimonial section and products card
   (--boxed-guide-width), so the headline lines up with every other
   section title on the page. */
.srv-section .section-shell {
  width: var(--boxed-guide-width);
}

.srv-layout {
  display: grid;
  grid-template-columns: minmax(300px, 30%) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* ---- Left column ---- */

.srv-intro {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}

.srv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  margin: 0;
  padding: 0 1.2rem;
  border-radius: 36px;
  border: 0.5px solid rgba(46, 46, 46, 0.88);
  color: #2e2e2e;
  font-size: 16px;
  font-weight: 310;
  line-height: 18px;
}

.srv-heading {
  margin: 0;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 55px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.04em;
}

.srv-controls {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.srv-nav-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(46, 46, 46, 0.16);
  background: transparent;
  color: #2e2e2e;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.srv-nav-btn:hover:not(:disabled),
.srv-nav-btn:focus-visible:not(:disabled) {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

.srv-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- Slider ---- */

.srv-track-wrap {
  --srv-fade-left: 0px;
  --srv-fade-right: 0px;
  min-width: 0;
  /* Negative margins cancel the track's padding, which exists only
     so the card shadows aren't clipped by the scroll container. */
  margin-top: -1rem;
  margin-right: calc((var(--boxed-guide-width) - 100vw) / 2);
  margin-bottom: -2.75rem;
  margin-left: -1.25rem;
  scroll-padding-inline-start: 1.25rem;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--srv-fade-left),
    #000 calc(100% - var(--srv-fade-right)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--srv-fade-left),
    #000 calc(100% - var(--srv-fade-right)),
    transparent 100%
  );
  transition:
    --srv-fade-left var(--motion-base) ease,
    --srv-fade-right var(--motion-base) ease;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.srv-track-wrap::-webkit-scrollbar {
  display: none;
}

/* Faded edges so cards ease out of view instead of being cut off.
   Set by the slider script as the track scrolls. */
.srv-track-wrap.has-prev {
  --srv-fade-left: 72px;
}

.srv-track-wrap.has-next {
  --srv-fade-right: 72px;
}

.srv-track {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  /* Generous top/bottom padding gives the card shadows (and the
     4px hover lift) room inside the clipped scroll container. */
  padding: 1rem 0 4.75rem 1.25rem;
  list-style: none;
}

/* Trailing space as a flex item rather than padding — a flex scroll
   container drops its end padding from the scrollable area, so the
   last card would otherwise stop hard against the screen edge. Sized
   so the card comes to rest on the same rail as the nav box (the
   flex gap makes up the remainder). */
.srv-track::after {
  content: "";
  flex: 0 0 calc((100vw - var(--boxed-guide-width)) / 2 - 1.25rem);
}

/* ---- Cards — all identical in size ---- */

.srv-card {
  flex: 0 0 auto;
  width: 340px;
  scroll-snap-align: start;
}

.srv-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 470px;
  padding: 1.5rem 1.5rem 1.5rem;
  border-radius: 28px;
  border: 1px solid rgba(46, 46, 46, 0.06);
  background: #fff;
  box-shadow:
    0 2px 6px rgba(46, 46, 46, 0.03),
    0 18px 44px rgba(46, 46, 46, 0.045);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) ease,
    border-color var(--motion-fast) ease;
}

.srv-card-inner:hover,
.srv-card-inner:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--srv-accent-rgb, 255, 0, 153), 0.2);
  box-shadow:
    0 4px 10px rgba(46, 46, 46, 0.04),
    0 26px 56px rgba(46, 46, 46, 0.07);
}

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

.srv-card-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 0.85rem;
  border-radius: 999px;
  background: rgba(46, 46, 46, 0.06);
  color: rgba(46, 46, 46, 0.78);
  font-size: 0.8rem;
  font-weight: 310;
  line-height: 1;
}

.srv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  padding: 0 0.8rem 0 0.7rem;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.srv-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: srv-badge-pulse 2.4s var(--ease-soft) infinite;
}

@keyframes srv-badge-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.srv-card-arrow {
  flex: 0 0 auto;
  color: rgba(46, 46, 46, 0.5);
  font-size: 1.05rem;
  line-height: 1;
  transition:
    transform var(--motion-base) var(--ease-standard),
    color var(--motion-fast) ease;
}

.srv-card-inner:hover .srv-card-arrow,
.srv-card-inner:focus-visible .srv-card-arrow {
  transform: translate(2px, -2px);
  color: var(--srv-accent, var(--pink));
}

.srv-card-title {
  margin: 0 0 0.65rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.srv-card-copy {
  margin: 0 0 1.4rem;
  color: rgba(46, 46, 46, 0.7);
  font-size: 0.95rem;
  font-weight: var(--body-copy-weight);
  line-height: 1.55;
  letter-spacing: var(--body-copy-letter-spacing);
}

/* Image placeholder — the accent block. Drop an <img> in here
   and it will cover the box. */
.srv-card-media {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-top: auto;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: var(--srv-wash, #f0f0f2);
}

.srv-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-soft);
}

/* The coloured tile these photographs replaced rotated as well as grew
   on hover. A photograph only wants the push in — the media box already
   clips, so the frame stays put and the picture moves inside it. */
.srv-card-inner:hover .srv-card-media img,
.srv-card-inner:focus-visible .srv-card-media img {
  transform: scale(1.04);
}

/* ---- Growth Studio nav item ---- */

/* Registered so the conic-gradient angle can be animated smoothly.
   Without @property support the ring renders static. */
@property --shine-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Growth Studio is the emphasised item in the Services dropdown.
   A soft pink chip carries the emphasis on its own; the shine is a
   single highlight travelling around a continuous pink stroke, so
   the border always reads as a complete ring rather than a wedge
   appearing and disappearing. */
.nav-about-subpage-new {
  position: relative;
  border-color: transparent;
  background: rgba(255, 0, 153, 0.05);
  color: var(--pink);
  font-weight: 600;
}

.nav-about-subpage-new:hover,
.nav-about-subpage-new:focus-visible {
  border-color: transparent;
  background: rgba(255, 0, 153, 0.09);
  color: var(--pink);
  box-shadow: 0 10px 22px rgba(255, 0, 153, 0.14);
}

/* The conic-gradient fills the box, then the mask punches out the
   middle so only the 1.25px ring is painted. Every stop is pink —
   the sweep only varies its brightness. */
.nav-about-subpage-new::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.25px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--shine-angle),
    rgba(255, 0, 153, 0.34) 0deg,
    rgba(255, 0, 153, 0.34) 46deg,
    rgba(255, 92, 188, 0.72) 84deg,
    rgba(255, 168, 219, 0.95) 104deg,
    rgba(255, 92, 188, 0.72) 124deg,
    rgba(255, 0, 153, 0.34) 165deg,
    rgba(255, 0, 153, 0.34) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: nav-shine-rotate 5s linear infinite;
}

@keyframes nav-shine-rotate {
  to {
    --shine-angle: 360deg;
  }
}

/* Notification dot — absolutely positioned so this item stays
   exactly the same size as the other service links. */
.nav-about-subpage-new {
  position: relative;
}

.nav-about-subpage-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 0 0 rgba(255, 0, 153, 0.5);
  animation: srv-badge-pulse-pink 2.6s var(--ease-soft) infinite;
}

@keyframes srv-badge-pulse-pink {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 153, 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 0, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 153, 0);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .srv-section {
    padding: 5rem 0 3.5rem;
  }

  .srv-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }

  .srv-track-wrap {
    margin-inline: calc((var(--shell) - 100vw) / 2);
  }

  .srv-track-wrap {
    margin-left: calc((var(--boxed-guide-width) - 100vw) / 2);
    scroll-padding-inline: calc((100vw - var(--boxed-guide-width)) / 2);
  }

  /* The right padding was 0, so scrolled fully right the last card's
     edge sat flush against the screen edge with no gutter at all.
     Mirroring the left gutter gives the row the same margin on both
     sides and lets it travel that bit further right. */
  .srv-track {
    padding-left: calc((100vw - var(--boxed-guide-width)) / 2);
    padding-right: calc((100vw - var(--boxed-guide-width)) / 2);
  }
}

@media (max-width: 768px) {
  .srv-section {
    padding: 4rem 0 3rem;
  }

  .srv-card {
    width: min(300px, 78vw);
  }

  /* Swiping is the affordance on a phone, and the next card's edge
     already shows there is more to come — the arrows just took up room
     under the heading. Hidden rather than removed from the markup so
     the track's own JS keeps its references. They stay on desktop,
     where there is no swipe. */
  .srv-controls {
    display: none;
  }

  .srv-card-inner {
    min-height: 430px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .srv-track-wrap {
    scroll-behavior: auto;
  }

  .srv-badge::before,
  .nav-about-subpage-dot,
  .nav-about-subpage-new::before {
    animation: none;
  }

  .srv-card-inner,
  .srv-card-media img,
  .srv-card-arrow {
    transition: none;
  }

  .srv-card-inner:hover {
    transform: none;
  }

  .srv-card-inner:hover .srv-card-media img {
    transform: none;
  }
}

/* ============================================================
   CONTACT PAGE — social proof band under the form.
   Full-bleed dark band, centred Brocar review.
   ============================================================ */

/* The panel starts full-bleed and contracts into a rounded box as
   the section scrolls in. --review-progress (0 = full bleed,
   1 = boxed) is written by the scroll handler in script.js; it
   defaults to 1 so the boxed state is what renders without JS. */
.contact-review {
  /* Same cap as the homepage case study: the band steps in a little
     rather than contracting all the way to the content rail. */
  --cr-inset-max: clamp(0.75rem, 2.75vw, 2.75rem);
  position: relative;
  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding-inline: calc(
    var(--shrink-progress) *
      min(
        var(--cr-inset-max),
        max(0px, (100% - var(--boxed-guide-width))) / 2
      )
  );
  color: var(--white);
}

.contact-review-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  /* The radius ramps ~8x faster than the inset, so the corners are
     fully round almost as soon as the panel starts contracting
     rather than squaring off through the first half of the move. */
  border-radius: calc(min(var(--shrink-progress) * 8, 1) * 42px);
  background: #2e2e2e;
  will-change: border-radius;
}

.contact-review .section-shell {
  width: min(50rem, calc(100% - 3rem));
}

.contact-review-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2rem;
  max-width: 50rem;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.contact-review-logo {
  width: auto;
  height: 32px;
  object-fit: contain;
}

.contact-review-quote {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.contact-review-quote p {
  margin: 0;
  color: rgba(244, 244, 244, 0.74);
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  line-height: var(--body-copy-line-height);
  letter-spacing: var(--body-copy-letter-spacing);
}

.contact-review-quote p:first-child {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.contact-review-source {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.contact-review-photo {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid rgba(244, 244, 244, 0.24);
}

.contact-review-meta {
  display: grid;
  gap: 0.2rem;
}

.contact-review-meta strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.contact-review-meta span {
  color: rgba(244, 244, 244, 0.6);
  font-size: 0.88rem;
  font-weight: 310;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .contact-review-card {
    gap: 1.6rem;
  }

  .contact-review-logo {
    height: 26px;
  }
}


/* ------------------------------------------------------------
   Contact page CTA — same block as the homepage, minus the 3D
   scene. Collapses the space the artwork used to occupy.
   ------------------------------------------------------------ */

.contact-page .cta-section {
  margin-bottom: 0;
  padding: clamp(6rem, 11vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
  border-radius: 0;
  background: transparent;
}

.contact-page .cta-shell {
  min-height: 0;
  gap: 0;
  padding-bottom: 0;
}

.contact-page .cta-copy {
  margin: 0 auto;
  transform: none;
}

/* ============================================================
   CASE STUDY — Motormoolah (homepage)
   Full-bleed dark band. Left column holds who + the lifetime
   outcome and stays put while the chronology scrolls past on the
   right, so the payoff is always on screen while you read the
   story. Reveal/counter classes are set by script.js.
   ============================================================ */

/* The panel arrives full-bleed and contracts into a rounded box as
   the section scrolls in, same mechanism as the contact page review
   (--shrink-progress, written by script.js, defaults to the boxed
   state so it degrades to a static rounded box without JS).
   The panel only insets as far as the content rail plus its own
   gutter, so the headline stays aligned to the rail throughout. */
/* =====================================================
   SERVICES CTA
   The pink pill under "The work." in the services column. It is the
   hero's button: .hero-button for the look, .cta-hero-button for the
   static (non-scroll-driven) position and hover. Only the width and
   the centring those two bring with them are undone here.
   ===================================================== */

.cta-hero-button.srv-cta {
  width: min(13rem, 100%);
  height: 46px;
  min-height: 46px;
  margin-inline: 0;
}

/* The label's size never reaches the two spans inside it — a global
   span rule pins .hero-button-text and .hero-button-icon carries a
   hard 18px — so both are set here, the arrow at ~80% of the text. */
.cta-hero-button.srv-cta .hero-button-label {
  font-size: 15px;
  gap: 0.6rem;
}

.cta-hero-button.srv-cta .hero-button-text {
  font-size: 15px;
}

.cta-hero-button.srv-cta .hero-button-icon {
  font-size: 12px;
}

/* Above phone widths the column carries the button, and the copy that
   sits under the cards stays out of the layout. */
.srv-cta-below {
  display: none;
}

/* At the width where the carousel becomes the sticky card stack, the
   cards are the end of the section, so the button follows them. */
@media (max-width: 768px) {
  .srv-cta-inline {
    display: none;
  }

  .srv-cta-below {
    display: inline-flex;
    justify-self: center;
  }
}

@media (max-width: 720px) {
  .cta-hero-button.srv-cta {
    width: min(10.5rem, 100%);
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .cta-hero-button.srv-cta .hero-button-label,
  .cta-hero-button.srv-cta .hero-button-text {
    font-size: 0.875rem;
  }

  .cta-hero-button.srv-cta .hero-button-icon {
    font-size: 0.7rem;
  }
}

.cs-section {
  --cs-gutter: clamp(1.25rem, 3vw, 3rem);
  /* How far the box is allowed to pull in from the viewport edge.
     Capped so it only steps in a little rather than shrinking all
     the way to the content rail. */
  --cs-inset-max: clamp(0.75rem, 2.75vw, 2.75rem);
  position: relative;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  padding: clamp(5rem, 9vw, 8rem) 0;
  color: var(--white);
}

/* The dark box is its own absolutely-positioned layer, so the panel
   can contract and round without reflowing the section's content on
   every scroll frame. The content sits on the rail throughout; the
   box never insets past the rail plus its gutter. */
.cs-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(
    var(--shrink-progress) *
      min(
        var(--cs-inset-max),
        max(0px, (100% - var(--boxed-guide-width) - 2 * var(--cs-gutter))) / 2
      )
  );
  right: calc(
    var(--shrink-progress) *
      min(
        var(--cs-inset-max),
        max(0px, (100% - var(--boxed-guide-width) - 2 * var(--cs-gutter))) / 2
      )
  );
  border-radius: calc(min(var(--shrink-progress) * 8, 1) * 42px);
  background: #2e2e2e;
  pointer-events: none;
}

.cs-section .section-shell {
  position: relative;
  z-index: 1;
  width: min(var(--boxed-guide-width), 100%);
  margin-inline: auto;
}

/* On a phone the inset above always resolved to 0, so the box stayed
   edge to edge however far the shrink ran: it is computed from the room
   left once the content rail and its gutters are placed, and at 375px
   the rail (100vw - 2.5rem = 335px) plus 2x20px of gutter comes to
   exactly the viewport. No spare, no inset.

   Fixed by narrowing the rail rather than by overriding the inset
   formula, so the box steps in and the copy still clears its edge by a
   proper margin (20px each side at 375px). */
@media (max-width: 768px) {
  .cs-panel {
    left: calc(var(--shrink-progress) * 0.75rem);
    right: calc(var(--shrink-progress) * 0.75rem);
    border-radius: calc(min(var(--shrink-progress) * 8, 1) * 28px);
  }

  .cs-section .section-shell {
    width: calc(100% - 4rem);
  }
}

.cs-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}

/* ---- Left column ---- */

.cs-head {
  display: grid;
  justify-items: start;
  gap: 0.95rem;
  position: sticky;
  top: calc(var(--nav-height) + 1.25rem);
}

.cs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  margin: 0;
  padding: 0 1.2rem;
  border-radius: 36px;
  border: 0.5px solid rgba(244, 244, 244, 0.42);
  color: rgba(244, 244, 244, 0.86);
  font-size: 16px;
  font-weight: 310;
  line-height: 18px;
}

/* Motormoolah's mark is supplied white on transparent, so it sits
   directly on the dark band. */
.cs-logo {
  width: auto;
  height: clamp(2.1rem, 3vw, 2.8rem);
  margin: 0.2rem 0 0.1rem;
  object-fit: contain;
}

/* Matches .srv-heading and .products-heading — the site sets every
   section headline on the same step, and this one had drifted two
   sizes below it. */
.cs-heading {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 42px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.04em;
}

.cs-heading-line {
  display: block;
  font: inherit;
  letter-spacing: inherit;
}

.cs-intro {
  max-width: 40ch;
  margin: 0;
  color: rgba(244, 244, 244, 0.72);
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  line-height: var(--body-copy-line-height);
  letter-spacing: var(--body-copy-letter-spacing);
}

/* ---- Lifetime figures (left column, under the intro) ---- */

.cs-summary {
  width: 100%;
  margin-top: 0.45rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(244, 244, 244, 0.16);
}

.cs-summary-label {
  margin: 0 0 0.9rem;
  color: rgba(244, 244, 244, 0.5);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.6rem;
  margin: 0;
}

.cs-stat {
  display: grid;
  gap: 0.45rem;
}

.cs-stat:nth-child(even) {
  padding-left: 1.6rem;
  border-left: 1px solid rgba(244, 244, 244, 0.14);
}

/* The label is a caption, not a peer of the figure: small, tracked and
   uppercase, it steps out of the way so the number reads first. Same
   treatment as .cs-summary-label above, so the block reads as one set
   of instruments rather than four stray lines. */
.cs-stat dt {
  color: rgba(244, 244, 244, 0.5);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.cs-stat dd {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}

.cs-stat-figure {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 2.75vw, 2.55rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.cs-stat-note {
  color: rgba(244, 244, 244, 0.56);
  font-size: 0.8rem;
  font-weight: 310;
  line-height: 1.2;
}

/* ---- Timeline ---- */

.cs-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-milestone {
  position: relative;
  padding: 0 0 clamp(2.4rem, 3.6vw, 3.25rem) 2.15rem;
}

.cs-milestone:last-child {
  padding-bottom: 0;
}

/* Connector line — drawn downward as each milestone arrives. */
.cs-milestone::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.6rem;
  bottom: 0;
  width: 1px;
  background: rgba(244, 244, 244, 0.18);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms var(--ease-soft) 120ms;
}

.cs-milestone:last-child::before {
  display: none;
}

/* Dot */
.cs-milestone::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(244, 244, 244, 0.35);
  transform: scale(0);
  transition: transform 460ms var(--ease-standard);
}

.cs-milestone.is-figure::after {
  background: var(--pink);
}

/* The month worth shouting about gets a ring. */
.cs-milestone.is-peak::after {
  box-shadow: 0 0 0 4px rgba(255, 0, 153, 0.22);
}

.cs-milestone.is-in::before {
  transform: scaleY(1);
}

.cs-milestone.is-in::after {
  transform: scale(1);
}

.cs-milestone-body {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease-soft),
    transform 620ms var(--ease-soft);
}

.cs-milestone.is-in .cs-milestone-body {
  opacity: 1;
  transform: none;
}

.cs-milestone-date {
  margin: 0 0 0.55rem;
  color: rgba(244, 244, 244, 0.5);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-milestone-figure {
  margin: 0 0 0.2rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.cs-milestone-title {
  margin: 0 0 0.5rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Milestones without a headline number lead on the title instead,
   so the rhythm doesn't sag where there's no figure to show. */
.cs-milestone:not(.is-figure) .cs-milestone-title {
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cs-milestone-copy {
  max-width: 46ch;
  margin: 0;
  color: rgba(244, 244, 244, 0.74);
  font-size: 1rem;
  font-weight: var(--body-copy-weight);
  line-height: 1.6;
  letter-spacing: var(--body-copy-letter-spacing);
}

/* ---- Reveals for the left column ---- */

[data-cs-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease-soft),
    transform 620ms var(--ease-soft);
}

[data-cs-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .cs-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.5rem, 5vw, 3.5rem);
  }

  .cs-head {
    position: static;
  }

  .cs-intro {
    max-width: 52ch;
  }

  .cs-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1rem;
  }

  .cs-milestone {
    padding-left: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-milestone::before,
  .cs-milestone::after,
  .cs-milestone-body,
  [data-cs-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   SECTION BROW PILLS
   One size for every section brow so they can't drift apart:
   Services, Case study, Our Products. Slightly smaller than the
   original 16px/32px. Colour is the only thing that varies, by
   whether the pill sits on a light or dark section.
   ============================================================ */

.products-pill,
.srv-pill,
.cs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 29px;
  padding: 0 1rem;
  border-radius: 999px;
  border-width: 0.5px;
  border-style: solid;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 310;
  line-height: 1;
}

.products-pill,
.srv-pill {
  border-color: rgba(46, 46, 46, 0.88);
  color: #2e2e2e;
}

.cs-pill {
  border-color: rgba(244, 244, 244, 0.42);
  color: rgba(244, 244, 244, 0.86);
}

/* ============================================================
   TEXT WRAPPING
   text-wrap: pretty stops the browser leaving a single word on the
   last line of a paragraph. Non-breaking spaces in the markup are
   the guaranteed fallback where a specific orphan must never
   appear (browsers without support just wrap as before).
   ============================================================ */

.srv-summary,
.srv-card-copy,
.cs-intro,
.cs-milestone-copy,
.contact-review-quote p,
.faq-copy p,
.faq-answer p,
.contact-copy p,
.products-overview,
.product-copy,
.reveal-text {
  text-wrap: pretty;
}

/* ============================================================
   SHOWREEL → SERVICES SPACING
   Tightens the void between the film and the services section.
   body:not(.no-page-v2) prefix is needed to out-specify the padding on
   .video-reveal in styles-staging-overrides.css, which loads after
   this file.
   ============================================================ */

body:not(.no-page-v2) .video-reveal {
  padding-bottom: clamp(1.75rem, 3.5vh, 3rem);
}

.srv-section {
  padding-top: 3.5rem;
}

@media (max-width: 1024px) {
  .srv-section {
    padding-top: 3rem;
  }
}

@media (max-width: 768px) {
  body:not(.no-page-v2) .video-reveal {
    padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
  }

  /* The stage stays a full viewport here on purpose. The morph reads
     its progress from `rect.height - viewportHeight`, so a stage
     shorter than the viewport desyncs the two: the card finished
     opening 426px before the section actually unstuck, and sat frozen
     for that whole stretch. The dead air this was reaching for is
     closed by shortening the *section* instead (see the 720px block),
     which shortens the sticky range and the morph together. */
  body:not(.no-page-v2) .video-reveal-pin {
    height: 100vh;
  }

  .srv-section {
    padding-top: 2.5rem;
  }
}

/* ============================================================
   FAQ — floating 3D asterisk
   Sits low on the left, under the copy column, drifting slowly.
   Decorative only: aria-hidden, no pointer events, and it never
   overlaps the accordion. Hidden on small screens where there is
   no clear space beside the content.
   ============================================================ */

.faq-main {
  position: relative;
}

.faq-floater {
  position: absolute;
  /* Pushed out past the right edge — the section clips its overflow,
     so the object bleeds off the frame deliberately. */
  right: clamp(-3.5rem, -2.25vw, -0.75rem);
  bottom: clamp(3.5rem, 5.5vw, 6rem);
  width: clamp(10rem, 16vw, 15.5rem);
  height: auto;
  /* Behind everything in the section — the shell sits on z-index 2. */
  z-index: 0;
  pointer-events: none;
  user-select: none;
  animation: faq-floater-drift 17s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

@keyframes faq-floater-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-16deg) scale(1);
  }
  20% {
    transform: translate3d(-34px, -46px, 0) rotate(-6deg) scale(1.04);
  }
  40% {
    transform: translate3d(-8px, -78px, 0) rotate(9deg) scale(1.07);
  }
  60% {
    transform: translate3d(30px, -54px, 0) rotate(18deg) scale(1.04);
  }
  80% {
    transform: translate3d(40px, -20px, 0) rotate(6deg) scale(1);
  }
}

/* Keep the copy above the object. */
.faq-main .section-shell {
  position: relative;
  z-index: 2;
}

/* Homepage FAQ — reuses the FAQ page layout, sized as a normal section. */
.faq-home {
  min-height: 0;
  padding: clamp(5rem, 11vh, 8.5rem) 0 clamp(2.25rem, 5vh, 3.75rem);
}

/* Body copy matches the rest of the homepage. */
.faq-copy p,
.faq-answer p {
  font-size: var(--body-copy-size);
  font-weight: var(--body-copy-weight);
  line-height: var(--body-copy-line-height);
  color: rgba(46, 46, 46, 0.68);
}

.faq-copy p {
  max-width: 24rem;
}

/* Anchor the asterisk from the top so opening an answer (which grows the
   section) never moves it. */
.faq-home .faq-floater {
  top: clamp(14rem, 24vw, 22rem);
  bottom: auto;
}

.faq-copy h2 {
  max-width: 7.6em;
  font-size: clamp(3rem, 5vw, 5.05rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

@media (max-width: 979px) {
  .faq-floater {
    right: clamp(-2.5rem, -2vw, -0.5rem);
    bottom: clamp(2rem, 4vw, 3.5rem);
    width: clamp(8rem, 18vw, 11rem);
  }
}

@media (max-width: 720px) {
  .faq-floater {
    display: none;
  }
}

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

/* ============================================================
   CASE STUDY — cursor-following media
   One square follows the pointer while a milestone is hovered.
   Shows data-cs-media if the milestone has one, otherwise the
   placeholder. Pointer devices only; skipped under reduced motion.
   ============================================================ */

.cs-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid rgba(244, 244, 244, 0.16);
  background: rgba(244, 244, 244, 0.07);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  /* Uncovered by a mask sweeping left to right rather than scaled or
     faded in — the same left-to-right motion as the marker highlight
     further up the page. Short: a follower that lingers reads as lag. */
  clip-path: inset(0 100% 0 0 round 6px);
  visibility: hidden;
  transition:
    clip-path 210ms var(--ease-standard),
    visibility 210ms var(--ease-standard);
  will-change: translate, clip-path;
}

.cs-cursor.is-visible {
  visibility: visible;
  clip-path: inset(0 0 0 0 round 6px);
}

/* Leaving is quicker than arriving, and wipes back the way it came. */
.cs-cursor:not(.is-visible) {
  transition:
    clip-path 130ms var(--ease-standard),
    visibility 130ms var(--ease-standard);
}

/* The box takes the picture's shape rather than the other way round:
   equal caps on width and height mean a landscape image is limited by
   its width and a portrait one by its height, so each keeps its own
   proportions while occupying a similar area. */
.cs-cursor-img {
  display: block;
  width: auto;
  height: auto;
  max-width: clamp(10rem, 15vw, 15rem);
  max-height: clamp(10rem, 15vw, 15rem);
  opacity: 0;
}

/* Only the placeholder needs a shape of its own. */
.cs-cursor:not(.has-image) {
  width: clamp(9rem, 12vw, 12rem);
  aspect-ratio: 1 / 1;
}

.cs-cursor.has-image .cs-cursor-label {
  display: none;
}

.cs-cursor.has-image .cs-cursor-img {
  opacity: 1;
}

.cs-cursor-label {
  color: rgba(244, 244, 244, 0.62);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cs-cursor.has-image .cs-cursor-label {
  opacity: 0;
}

/* The hovered milestone lifts slightly out of the list. */
.cs-milestone-body {
  transition:
    opacity 620ms var(--ease-soft),
    transform 620ms var(--ease-soft),
    color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .cs-milestone.is-in .cs-milestone-body {
    transition:
      opacity 620ms var(--ease-soft),
      transform 260ms var(--ease-standard);
  }

  .cs-milestone[data-cs-media]:hover .cs-milestone-body {
    transform: translateX(6px);
  }

  .cs-milestone[data-cs-media] {
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-cursor {
    display: none;
  }

  .cs-milestone[data-cs-media]:hover .cs-milestone-body {
    transform: none;
  }
}

/* ============================================================
   CASE STUDY — typographic pass on the milestone titles
   The titles were carrying display tracking (-0.02em / -0.03em) at
   text sizes, which closes up the counters and makes runs like
   "500+" and "SEO" collide. Tracking now scales inversely with
   size: near-zero at 18px, tighter only where the type is set
   large enough to need optical compensation. Kerning pairs and
   standard ligatures are switched on explicitly rather than left
   to the browser default.
   ============================================================ */

.cs-heading,
.cs-milestone-title,
.cs-milestone-figure,
.cs-milestone-date,
.cs-stat-figure,
.cs-summary-label {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Text-size titles: effectively no tracking, a touch more leading. */
.cs-milestone-title {
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* Display-size titles (the milestones with no headline number) can
   carry real negative tracking without losing their counters. */
.cs-milestone:not(.is-figure) .cs-milestone-title {
  letter-spacing: -0.022em;
  line-height: 1.15;
}

/* Figures mix currency marks, numerals and a plus sign — pulled back
   from -0.045em so "£2.44" and "900+" don't crowd at the joins. */
.cs-milestone-figure,
.cs-stat-figure {
  letter-spacing: -0.032em;
}

/* The uppercase labels are the one place that wants positive
   tracking — caps set solid need opening up, not closing. */
.cs-milestone-date,
.cs-summary-label {
  letter-spacing: 0.09em;
}

/* ============================================================
   CASE STUDY — tracking across the rest of the section
   The whole band is reversed out (light type on dark), which
   optically thickens and tightens the letterforms. Small text and
   low-contrast text get a touch of positive tracking to give it
   back; the display sizes keep their negative tracking, because at
   47px the letterforms need closing up, not opening.
   ============================================================ */

.cs-intro,
.cs-milestone-copy,
.cs-stat dt,
.cs-stat-note,
.cs-cursor-label,
.cs-pill {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Reversed body copy — a hair open. */
.cs-intro,
.cs-milestone-copy {
  letter-spacing: 0.004em;
}

/* Small, low-contrast supporting text needs the most help. */
.cs-stat dt,
.cs-stat-note {
  letter-spacing: 0.011em;
}

.cs-pill {
  letter-spacing: 0.012em;
}

/* Display heading: hairline tighter now kerning pairs are on, so the
   "M" and the comma close up properly. */
.cs-heading {
  letter-spacing: -0.038em;
}

/* Short laptop viewports: the left column is sticky, so the whole
   stack — headline, intro and the four figures — has to fit between
   the nav and the bottom of the screen. On a 700px-tall window the
   figures were landing just past the fold, which made you scroll to
   read numbers that are meant to be read alongside the timeline.
   Tighten the rhythm rather than drop anything out. */
@media (max-height: 780px) {
  .cs-head {
    top: calc(var(--nav-height) + 0.5rem);
    gap: 0.7rem;
  }

  .cs-summary {
    padding-top: 0.8rem;
  }

  .cs-summary-label {
    margin-bottom: 0.7rem;
  }

  .cs-stats {
    gap: 0.85rem 1.6rem;
  }
}

/* ============================================================
   PRODUCTS — room for the card's shadow
   The section clips its overflow (to contain the floating racket),
   which was cutting the card's 80px shadow off at 49px and leaving
   a hard line across the page. The extra bottom padding gives the
   shadow room; the matching negative margin hands the space back so
   nothing below moves.
   ============================================================ */

body:not(.no-page-v2) .products-section.section-light {
  padding-bottom: 5.5rem;
  margin-bottom: -2.65rem;
}

/* Display figures use proportional numerals. Tabular figures exist to
   line numbers up in columns and give every digit the same advance —
   which leaves a "1" floating in a slot far wider than it needs, so
   "516" reads with a hole in the middle. Nothing here is a column of
   numbers, so proportional is correct. */
.cs-milestone-figure,
.cs-stat-figure {
  font-variant-numeric: proportional-nums;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1;
}

/* ============================================================
   TRAVELLING HIGHLIGHT — the line already crossed
   Holds the marker on a line the bar has finished, so both closing
   lines read as highlighted at once before the bar collapses back
   into a dot. Same fill and blend as the bar itself.
   ============================================================ */

.travelling-highlight {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--hl-width, 0px);
  height: var(--hl-height, 0px);
  border-radius: 4px;
  background: color-mix(in srgb, var(--pink) 13%, #ffeaf5);
  mix-blend-mode: multiply;
  transform: translate3d(var(--hl-x, 0px), var(--hl-y, 0px), 0)
    translate(-50%, -50%);
  opacity: var(--hl-opacity, 0);
  z-index: 5;
  pointer-events: none;
  will-change: transform, width, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .travelling-highlight {
    display: none;
  }
}

/* ============================================================
   SERVICES CARDS — staggered rise
   Each card lifts into place from below, straightening out of a
   slight tilt, one after another rather than as a block. Pivoting
   from the base makes the rotation read as the card settling onto
   the row instead of spinning in mid-air.
   ============================================================ */

.srv-card {
  opacity: 0;
  transform: translate3d(0, 70px, 0) rotate(var(--srv-tilt, -5deg)) scale(0.95);
  transform-origin: 50% 100%;
  transition:
    opacity 700ms var(--ease-soft),
    transform 950ms var(--ease-soft);
  transition-delay: var(--srv-delay, 0ms);
  will-change: transform, opacity;
}

.srv-card.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

/* Alternating tilts so the row looks dealt rather than stamped. */
.srv-card:nth-child(1) {
  --srv-tilt: -5deg;
  --srv-delay: 0ms;
}

.srv-card:nth-child(2) {
  --srv-tilt: 4deg;
  --srv-delay: 130ms;
}

.srv-card:nth-child(3) {
  --srv-tilt: -3.5deg;
  --srv-delay: 260ms;
}

.srv-card:nth-child(4) {
  --srv-tilt: 5deg;
  --srv-delay: 390ms;
}

/* A tilted card reaches higher than an upright one — give the track
   the headroom so the corners aren't clipped on the way in. */
.srv-track {
  padding-top: 2.25rem;
}

.srv-track-wrap {
  margin-top: -2.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .srv-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   WATCH THE FILM — glowing pink stroke
   A gradient stroke travels around the button with a soft glow
   behind it, to pull the eye to the one thing on the film that is
   clickable. body:not(.no-page-v2) prefix is needed to out-specify the
   button's own rule in styles-staging-overrides.css, which loads
   after this file.

   The glow is a box-shadow rather than a blurred pseudo-element:
   a negative-z-index child paints above its parent's background as
   soon as the parent makes a stacking context — which this button
   does whenever its opacity is mid-fade — so a pseudo-element halo
   washes over the label instead of sitting behind it.
   ============================================================ */

body:not(.no-page-v2) .video-reveal-play {
  position: absolute;
  box-shadow:
    0 0 0 1px rgba(255, 0, 153, 0.25),
    0 0 16px 1px rgba(255, 0, 153, 0.5),
    0 0 34px 6px rgba(255, 0, 153, 0.28);
  animation: play-glow-pulse 2.8s ease-in-out infinite;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* The stroke: a conic gradient filling the box with the middle masked
   out, so only the rim paints. Two white specular passes against pink
   read as light travelling around a polished edge rather than a flat
   pink outline.

   It sits just OUTSIDE the button (negative inset) on purpose — the
   button's own fill is near-white, so a white highlight drawn on the
   button's edge would disappear into it. Out here it plays against
   the film instead, where both the white and the pink read. */
body:not(.no-page-v2) .video-reveal-play::before {
  content: "";
  position: absolute;
  inset: -2.5px;
  padding: 1.75px;
  border-radius: 999px;
  background: conic-gradient(
    from var(--shine-angle),
    rgba(255, 255, 255, 0.32) 0deg,
    rgba(255, 0, 153, 0.9) 38deg,
    rgba(255, 255, 255, 0.98) 66deg,
    rgba(255, 0, 153, 0.9) 96deg,
    rgba(255, 255, 255, 0.3) 148deg,
    rgba(255, 255, 255, 0.22) 196deg,
    rgba(255, 0, 153, 0.62) 244deg,
    rgba(255, 255, 255, 0.92) 280deg,
    rgba(255, 0, 153, 0.62) 314deg,
    rgba(255, 255, 255, 0.32) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: nav-shine-rotate 4.5s linear infinite;
}

@keyframes play-glow-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 0, 153, 0.22),
      0 0 14px 1px rgba(255, 0, 153, 0.42),
      0 0 30px 5px rgba(255, 0, 153, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 0, 153, 0.3),
      0 0 20px 2px rgba(255, 0, 153, 0.62),
      0 0 44px 9px rgba(255, 0, 153, 0.34);
  }
}

body:not(.no-page-v2) .video-reveal-play:hover {
  box-shadow:
    0 0 0 1px rgba(255, 0, 153, 0.36),
    0 0 24px 3px rgba(255, 0, 153, 0.7),
    0 0 52px 11px rgba(255, 0, 153, 0.4);
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.no-page-v2) .video-reveal-play,
  body:not(.no-page-v2) .video-reveal-play::before {
    animation: 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;
  }
}


/* ============================================================
   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:not(.no-page-v2) .site-footer {
  min-height: auto;
  padding-bottom: 0;
}

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

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

body:not(.no-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:not(.no-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:not(.no-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:not(.no-page-v2) .services-stack {
  width: min(1180px, calc(100vw - 2.5rem));
  min-height: min(74vh, 790px);
}

body:not(.no-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:not(.no-page-v2) .service-card:nth-child(2) {
  --service-paper: #edf2ff;
}

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

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

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

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

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

body:not(.no-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:not(.no-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:not(.no-page-v2) .service-visual {
  min-width: 0;
}

body:not(.no-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:not(.no-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:not(.no-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:not(.no-page-v2) .service-visual-top {
  position: relative;
  z-index: 4;
}

body:not(.no-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:not(.no-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:not(.no-page-v2) .service-visual-rail {
  position: absolute;
  z-index: 1;
  inset: 27% 13% 35% 11%;
  display: block;
  pointer-events: none;
}

body:not(.no-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:not(.no-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:not(.no-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:not(.no-page-v2) .service-visual-rail span::before,
body:not(.no-page-v2) .service-visual-rail span::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

body:not(.no-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:not(.no-page-v2) .service-visual-rail span::after {
  left: 14%;
  right: 16%;
  bottom: 18%;
  height: 0.32rem;
  background: rgba(46, 46, 46, 0.13);
}

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

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

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

body:not(.no-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:not(.no-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:not(.no-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:not(.no-page-v2) .service-visual-tags span:nth-child(even) {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}

body:not(.no-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:not(.no-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:not(.no-page-v2) .service-visual-note p {
  display: none;
}

body:not(.no-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:not(.no-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:not(.no-page-v2) .service-copy-top {
  position: relative;
  z-index: 1;
  align-items: center;
}

body:not(.no-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:not(.no-page-v2) .service-count {
  color: rgba(46, 46, 46, 0.42);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

body:not(.no-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:not(.no-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:not(.no-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:not(.no-page-v2) .service-card-body > p + p {
  display: none;
}

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

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

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

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

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

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

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

  body:not(.no-page-v2) .service-index {
    font-size: 3.35rem;
  }

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

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

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

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

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

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

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

  body:not(.no-page-v2) .service-card-body::before {
    display: none;
  }

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

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

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


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

body:not(.no-page-v2) .products-shell {
  overflow: visible;
}

body:not(.no-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:not(.no-page-v2) .products-heading {
  font-weight: 700;
  margin-bottom: 1.1rem;
}

body:not(.no-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:not(.no-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:not(.no-page-v2) .products-tabs,
body:not(.no-page-v2) .products-frame {
  position: relative;
  z-index: 1;
}

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

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

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

body:not(.no-page-v2) .product-showcase {
  min-height: 27.5rem;
}

body:not(.no-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:not(.no-page-v2) .product-showcase-stage {
  min-height: 27.5rem;
  aspect-ratio: 569 / 514;
}

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

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

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

body:not(.no-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:not(.no-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:not(.no-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:not(.no-page-v2) .product-showcase.is-qa .product-showcase-stage {
  width: min(100%, 32rem);
  min-height: 27.5rem;
  aspect-ratio: 569 / 514;
}

body:not(.no-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:not(.no-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;
}


/* ViewThru visual: the API terminal from viewthru.co.uk (typing loop)
   with two dashboard cards overlaid. Sizes are in cqw so the whole
   composition scales with the stage. */
body:not(.no-page-v2) .product-showcase.is-viewthru .product-showcase-pattern {
  display: none;
}

body:not(.no-page-v2) .product-showcase.is-viewthru .product-showcase-stage {
  width: min(100%, 32rem);
  min-height: 27.5rem;
  aspect-ratio: 569 / 514;
  container-type: inline-size;
}

.product-vt-shot {
  position: absolute;
  margin: 0;
  text-align: left;
}

.product-vt-term {
  top: 5%;
  left: 0;
  width: 84%;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3.1cqw;
  background: #170a28;
  box-shadow: 0 5.5cqw 11cqw rgba(23, 10, 40, 0.38), inset 0 1px rgba(255, 255, 255, 0.1);
  animation: product-float-soft 9.6s var(--ease-soft) infinite;
}

.vt-term-head {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 3cqw 3.8cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vt-term-head i {
  display: block;
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
}

.vt-term-head i:nth-child(1) { background: #ff5f57; }
.vt-term-head i:nth-child(2) { background: #febc2e; }
.vt-term-head i:nth-child(3) { background: #28c840; }

.vt-term-head span {
  margin-left: 1.6cqw;
  font: 400 2.3cqw/1 "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.1cqw;
  color: rgba(255, 255, 255, 0.45);
}

.vt-term-body {
  height: 73cqw;
  padding: 3.4cqw 3.8cqw 3cqw;
  font: 400 2cqw/1.5 "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #e8dcf2;
  white-space: normal;
  overflow: hidden;
}

.vt-term-body .tl span {
  font: inherit;
  letter-spacing: inherit;
}

.vt-term-body .c { color: rgba(255, 255, 255, 0.38); }
.vt-term-body .k { color: #ddbbf2; }
.vt-term-body .n { color: #d2e07c; }

.vt-term-body .tl {
  visibility: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}

.vt-term-body .tl.on {
  visibility: visible;
}

.vt-term-body .tl.typing {
  overflow: hidden;
  animation: vt-typew 0.42s steps(26) 1;
}

.vt-tcur {
  display: inline-block;
  width: 1.2cqw;
  height: 2.3cqw;
  margin-left: 0.6cqw;
  vertical-align: -0.4cqw;
  border-radius: 1px;
  background: #d2e07c;
  animation: vt-cur-blink 1.1s step-end infinite;
}

@keyframes vt-typew {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes vt-cur-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.product-vt-checks {
  top: 0;
  right: 0;
  width: 40%;
  z-index: 2;
  padding: 3.6cqw 3.8cqw 0;
  overflow: hidden;
  border-radius: 3.4cqw;
  background: #fff;
  color: #1d1038;
  box-shadow: 0 4cqw 9cqw rgba(29, 16, 56, 0.28), 0 0 0 1px rgba(29, 16, 56, 0.06);
  animation: product-float-main 11.8s var(--ease-soft) infinite;
  animation-delay: -2.4s;
}

.vt-card-label {
  margin: 0;
  font-size: 1.9cqw;
  font-weight: 600;
  letter-spacing: 0.3cqw;
  text-transform: uppercase;
  color: #8a809b;
}

.vt-checks-figure {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  margin: 1.8cqw 0 0;
  font-size: 7.2cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.vt-pill {
  display: inline-block;
  padding: 0.7cqw 1.6cqw;
  border-radius: 999px;
  font-size: 1.9cqw;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.vt-pill-up {
  background: #eef0d4;
  color: #5d6a14;
}

.vt-checks-sub {
  margin: 1.2cqw 0 0;
  font-size: 2cqw;
  color: #8a809b;
}

.vt-spark {
  display: block;
  width: 112%;
  height: auto;
  margin: 1.2cqw -3.8cqw 0;
}

.vt-spark path {
  fill: none;
  stroke: #a9b934;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: vt-spark-draw 2.4s var(--ease-soft) 0.3s forwards;
}

@keyframes vt-spark-draw {
  to { stroke-dashoffset: 0; }
}

.product-vt-activity {
  right: 2%;
  bottom: 4%;
  width: 62%;
  z-index: 3;
  padding: 3.6cqw 4cqw 3.2cqw;
  border-radius: 3.4cqw;
  background: #fff;
  color: #1d1038;
  box-shadow: 0 4cqw 9cqw rgba(29, 16, 56, 0.2);
  animation: product-float-soft 9.6s var(--ease-soft) infinite;
  animation-delay: -4s;
}

.product-vt-activity .vt-card-label {
  color: #8a809b;
}

.vt-activity-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.4cqw 2cqw;
  padding: 1.9cqw 0;
  border-bottom: 1px solid #ece8f1;
  font-size: 2.2cqw;
}

.vt-activity-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.vt-activity-row b {
  font-weight: 700;
}

.vt-activity-row div span {
  font: inherit;
  color: #8a809b;
}

.vt-activity-row .vt-pill {
  font-size: 1.8cqw;
}

.vt-pill-clear {
  background: #eef0d4;
  color: #5d6a14;
}

.vt-pill-review {
  background: #ece7f6;
  color: #5b3f8c;
}

@media (prefers-reduced-motion: reduce) {
  .product-vt-term,
  .product-vt-checks,
  .product-vt-activity {
    animation: none;
  }

  .vt-spark path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

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

body:not(.no-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:not(.no-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:not(.no-page-v2) .product-tab-logo {
  width: min(168px, calc(100% - 1.35rem));
  height: 26px;
}

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

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

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

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

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

body:not(.no-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;
  /* Matches the SVG logos' filter: brightness(0) invert(78%) resolves
     to rgb(199,199,199). At #b8b8b8 this wordmark read noticeably
     darker than the four beside it. */
  color: #c7c7c7;
  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 {
  /* invert(70%) on the hover filter = rgb(179,179,179). */
  color: #b3b3b3;
}

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

body:not(.no-page-v2) .product-showcase-pattern {
  display: none;
}

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

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

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

  body:not(.no-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:not(.no-page-v2) .product-showcase {
    min-height: auto;
  }

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

  body:not(.no-page-v2) .product-showcase-stage {
    min-height: auto;
  }

  /* The five wordmarks are all cropped tight to their ink, so rendered
     height is letterform height — and they were landing at 16.8 / 16.2
     / 13.4 / 14.7px against qa.ai's 27.5px of set type, which is why
     the image logos read smaller than the two the type carries. Taller
     holder, taller logos. */
  body:not(.no-page-v2) .product-tab-logo {
    width: min(100%, 7rem);
    height: 1.45rem;
  }

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

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

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

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

  /* Loaneo carries scale(0.82) in the base rules, but the
     .product-tab-logo-reduced rule above has the same specificity and
     comes later, so on a phone it was overriding that transform away
     and Loaneo rendered at full size — measurably the largest wordmark
     in the row (x-height 18px against ~13px for the rest). Restated
     here, after that rule, so it survives.

     The scales across this block are set so every wordmark lands on
     roughly the same x-height (~14px), which is what makes a logo row
     read as one size rather than five. */
  body:not(.no-page-v2) .product-tab img.product-tab-logo-loaneo {
    transform: translateY(-2px) scale(0.88);
  }
}

/* ============================================================
   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:not(.no-page-v2) .services-section.svc-scroll .svc-scroll-intro {
  justify-items: center;
  text-align: center;
}

body:not(.no-page-v2) .services-section.svc-scroll .svc-scroll-intro .services-pill,
body:not(.no-page-v2) .services-section.svc-scroll .svc-scroll-intro h2,
body:not(.no-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:not(.no-page-v2) .products-section {
  position: relative;
  overflow: hidden;
}

/* Only shown below 900px, where it swaps in for the corner floater. */
.products-floater-inline {
  display: none;
}

.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;
    /* Also drop the forced break between the two sentences. As blocks
       they can never share a line, so "big enough," sat half-empty
       while "we build" was pushed to a line of its own. Inline lets the
       whole heading reflow as one run and fill each line — the spans
       keep their styling, and the whitespace between them in the markup
       collapses to the space that belongs there. */
    display: inline;
  }

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

  /* 0.95 is set for the two-line desktop lockup; now that the heading
     reflows as one run on a phone the lines sat too close together.
     Needs to be on the h2 as well as the spans — the spans are inline
     here, so the line box is set by the parent's strut. */
  .products-heading,
  .products-heading .products-line {
    line-height: 1.12;
  }
}

/* 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) {
  /* Was display:none. The reason given was that the floater's bleed
     landed on the heading and the tab row once the intro stacks to
     full width on tablet — but that is a consequence of it being
     absolutely positioned in the top-right corner, and hiding it meant
     nobody on an iPad in portrait ever saw the flip at all.

     In the flow instead of out of it, so it cannot overlap anything:
     it takes its own band above the section's copy and pushes the rest
     down, rather than floating over it. */
  /* Below 900 the floater moves to sit *after* the heading rather than
     above the whole section. The corner copy is hidden and the one
     inside the intro takes over: same file, so still one request.

     They are two elements rather than one moved element because
     .section-shell is position: relative, so an absolutely positioned
     floater inside the intro would anchor to the shell instead of the
     section and desktop's offsets would all have to be recomputed. */
  .products-floater {
    display: none;
  }

  .products-floater-inline {
    display: block;
    position: static;
    right: auto;
    top: auto;
    width: 42vw;
    /* The drift animation rotates it a couple of degrees, which grows
       its painted box beyond these numbers — hence the clearance. */
    max-width: 200px;
    margin: 0.75rem auto 0.25rem;
  }
}

/* Ranged-left copy with the GIF pushed right only works once the
   column is narrow enough that the two read as one block. On a tablet
   it just left a wide empty band beside the GIF, so this is phone-only
   and 721-900px keeps the centred treatment above. */
@media (max-width: 720px) {
  /* Lifted out of the flow so it can sit in the white gap above the
     heading and hang over the grey card above without pushing any of
     the copy around — in flow, margin-left:auto did nothing anyway,
     because justify-items:start leaves the grid track no free space.

     The asset carries ~21% transparent padding top and ~20% bottom
     (ink runs y240-908 of 1138), so ~61px of what sits above the
     figure and ~58px below it is empty; the offsets allow for that. */
  .products-floater-inline {
    position: absolute;
    /* Anchored to the top edge of the intro rather than a fixed rem
       offset, which drifted onto the heading as the copy rewrapped at
       other phone widths. bottom:100% would sit it entirely above the
       pill; the 3rem claws back just enough that the dark Enter key
       lands in the white gap while the figure overlaps the card above,
       instead of the key going dark-on-dark. */
    /* Descends past the top of the pill on purpose: the copy is ranged
       left, so on the right-hand side the pill ends at x127 and the
       first heading line at x186 while this sits at x194 — it drops
       into the empty right-hand channel rather than over any ink. */
    bottom: calc(100% - 5.3rem);
    right: -0.25rem;
    margin: 0;
    z-index: 7;
  }

  body:not(.no-page-v2) .products-intro {
    position: relative;
    justify-items: start;
    text-align: left;
  }

  body:not(.no-page-v2) .products-heading {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  /* .products-overview sets text-align on itself, so inheriting left
     from .products-intro was never going to reach it. */
  body:not(.no-page-v2) .products-overview {
    text-align: left;
  }
}

/* ----------------------------------------------------------
   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:not(.no-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:not(.no-page-v2) .product-tab img.product-tab-logo-pruuv {
  height: 24px;
  width: auto;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  /* Pruuv's artboard is 2.75:1 where the others are 4.4-6:1, so at a
     matched height it is barely half their width. Given a little more
     height to even out the optical mass. */
  body:not(.no-page-v2) .product-tab img.product-tab-logo-pruuv {
    height: 22px;
    /* Shortest x-height of the five (11px), so it read as the small one
       even at a matched box height. */
    transform: translateY(0) scale(1.27);
  }
}

/* In the scrolling row each tab is sized to its own wordmark, so the
   marks only need to come down enough to stop reading as oversized —
   no longer constrained by a column width. Every height here is the
   old one x0.87, so the per-brand x-height balance set above is
   preserved. Has to sit after those rules — same specificity, so
   source order decides. */
@media (max-width: 640px) {
  body:not(.no-page-v2) .product-tab img.product-tab-logo-reduced {
    height: 1rem;
  }

  body:not(.no-page-v2) .product-tab img.product-tab-logo-pruuv {
    height: 19px;
  }

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

/* ------------------------------------------------------------------
   MOBILE TYPE RHYTHM

   A pass over every section rather than one block at a time. Body copy
   had drifted to three different line-heights across sections (1.55 in
   the service cards, 1.60 in the case-study milestones, 1.63 in
   products) and the service cards were a size smaller than everything
   else at 15.2px. Card titles had two sizes under one class — the
   case-study milestones rendered at both 24px/1.15 and 20px/1.20
   against 22px/1.18 everywhere else.

   Normalised against the --body-copy-* tokens. Last in the file so it
   wins on source order; body:not(.no-page-v2) only to clear the plain-class
   rules it is correcting.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  body:not(.no-page-v2) .srv-card-copy,
  body:not(.no-page-v2) .cs-intro,
  body:not(.no-page-v2) .cs-milestone-copy,
  body:not(.no-page-v2) .products-overview,
  body:not(.no-page-v2) .product-copy {
    font-size: var(--body-copy-size);
    line-height: var(--body-copy-line-height);
  }

  /* The case study runs far more copy than any other section — the
     intro plus a paragraph under every milestone — so at the shared
     16px it read heavy on a phone. Stepped down a little here only;
     the ratio stays on the shared token so the rhythm still matches. */
  body:not(.no-page-v2) .cs-intro,
  body:not(.no-page-v2) .cs-milestone-copy {
    font-size: 0.9375rem;
  }

  body:not(.no-page-v2) .srv-card-title,
  body:not(.no-page-v2) .product-title {
    font-size: 1.375rem;
    line-height: 1.18;
  }

  /* .cs-milestone-title is deliberately two sizes and is left alone:
     milestones with no headline number are set at display size, the
     ones carrying a figure at text size. */

  /* The two intro paragraphs read as one continuous statement, but the
     flex gap put 38px between their baselines where the lines inside
     each paragraph sit 33px apart — the break was wider than the
     rhythm around it. */
  body:not(.no-page-v2) .reveal-text-intro {
    gap: 0;
  }
}

/* ------------------------------------------------------------------
   SERVICE CARD — ONE SCREEN

   Measured at 375x812: the section's top to the card's bottom came to
   755px against 748px of usable height once the 64px nav is taken off,
   so the card never quite finished on screen — and on a 667-tall phone
   (603 usable) it was 150px over. You had to scroll to finish reading
   a single card.

   The square media block was 250px of it, by far the largest piece and
   the least information-dense, so that carries most of the reduction;
   the rest comes off the card's own padding and the section's top
   padding. The copy is untouched — it is the part being read.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  body:not(.no-page-v2) .srv-card-inner {
    /* Was 430px, which would have held the card tall regardless of the
       shorter media block. */
    min-height: 0;
    padding: 1.25rem;
  }

  body:not(.no-page-v2) .srv-section.section-light {
    padding-top: 1rem;
    padding-bottom: 2.5rem;
  }
}

/* The shallower frame above takes enough height off the card that short
   phones no longer need the picture narrowed on top of it. */

/* ------------------------------------------------------------------
   SERVICE CARDS — STICKY STACK (mobile)

   Modelled on restless.co, which does this with no JS and no
   transforms: a run of sticky panels all pinned to the same top, so
   each one simply scrolls up over the one pinned beneath it. Their
   panels are a full 100vh at top:0; ours pin below the fixed nav and
   are only as tall as the card, which is the same mechanic at card
   scale.

   This replaces the horizontal carousel here. The track stops being a
   scroller and becomes a plain block, and the spacing between cards is
   what decides how long each one holds before the next covers it.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  body:not(.no-page-v2) .srv-track-wrap {
    overflow: visible;
    margin-inline: 0;
    scroll-padding-inline: 0;
  }

  /* .srv-section is overflow:hidden, which makes it a scroll container
     — so the sticky cards were pinning against the section's own
     scrollport instead of the viewport and never held. clip does the
     same clipping without establishing one, which is what lets sticky
     resolve against the page. */
  body:not(.no-page-v2) .srv-section {
    overflow: clip;
  }

  body:not(.no-page-v2) .srv-track {
    display: block;
    /* Only the carousel's horizontal gutters go; a flat padding:0 took
       the space under the heading with it and left 4px between "The
       work." and the first card. 2.5rem matches .srv-layout's own row
       gap, which is what used to separate them. */
    /* The bottom padding is what gives the last card its pin window.
       A margin cannot: the last child's bottom margin collapses out
       through the track, so the track ended flush at that card's own
       bottom edge and its pin window was literally zero px wide
       (pins at 8345, releases at 8345). Padding does not collapse.
       Kept short so the next section follows straight on. */
    padding: 2.5rem 0 2.5rem;
  }

  /* ---- the stack ----
     Each list item is a fixed-height spacer with the visible card at
     its top, and the item is what sticks.

     The fixed height is the whole point. A sticky box stops sticking
     when (its top offset + its own height) reaches the end of its
     container, so while the cards were auto-height those totals were
     685/685/685/784 — set by whatever the copy happened to be — and
     the last card let go 99px before the rest and slid up through
     them. With every item on one base height the totals differ only by
     the step, and adding the step back as extra height (largest at the
     top of the stack) makes them identical. The stack then lets go all
     at once by construction instead of by compensating for content.

     Base height is tied to the viewport so the next card is never on
     screen while the current one is still travelling: card one's item
     is 100svh - 5.25rem, and it pins at 5.25rem, so card two's top
     edge lands exactly on the fold at the moment card one stops. That
     holds at any screen height, which a fixed rem value could not —
     at 30rem the second card was already 92px above the fold.

     The per-card additions still cancel against the pin offsets, so
     (top + height) stays equal down the stack and the exit is still
     simultaneous. */
  body:not(.no-page-v2) .srv-card {
    position: sticky;
    /* Clears the fixed nav so a pinned card is never tucked under it. */
    top: 5.25rem;
    width: auto;
    margin: 0;
    height: calc(100svh - 15rem);
    /* The carousel's entrance (opacity 0 + tilt + scale, cleared by an
       observer watching the horizontal track viewport) has nothing to
       watch now that the track is a plain block — the cards just
       stayed at opacity 0. Cleared here rather than rewired: restless
       runs this pattern with no transforms at all, and the stacking is
       the motion. The tilt also left each card a different width and
       offset, so they no longer lined up once stacked. */
    opacity: 1;
    transform: none;
  }

  /* Each card pins a step lower than the one before it, so the stack
     builds a staircase instead of the newest card swallowing the rest:
     every card underneath keeps its tag row showing. One step is the
     card's top padding plus its tag row — 3.25rem. The height carries
     the same step in the opposite direction, which is what equalises
     the exit. */
  body:not(.no-page-v2) .srv-card:nth-child(1) {
    height: calc(100svh - 5.25rem);
  }

  body:not(.no-page-v2) .srv-card:nth-child(2) {
    top: calc(5.25rem + 3.25rem);
    height: calc(100svh - 8.5rem);
  }

  body:not(.no-page-v2) .srv-card:nth-child(3) {
    top: calc(5.25rem + 6.5rem);
    height: calc(100svh - 11.75rem);
  }

  body:not(.no-page-v2) .srv-card:nth-child(4) {
    top: calc(5.25rem + 9.75rem);
    height: calc(100svh - 15rem);
  }

  body:not(.no-page-v2) .srv-card:nth-child(5) {
    top: calc(5.25rem + 13rem);
    height: calc(100svh - 18.25rem);
  }

  body:not(.no-page-v2) .srv-card:nth-child(6) {
    top: calc(5.25rem + 16.25rem);
    height: calc(100svh - 21.5rem);
  }

  /* On a short screen the card can be taller than the spacer the
     invariant gives it, and the spacer is what the CTA below the stack
     is positioned from — so the button was drawn over the picture.
     Only the last card can take the guard: nothing stacks over it, so
     a spacer that grows past the invariant just means it lets go a
     moment after the rest, which reads as the top card holding while
     they slide away. Mirrors the height above. */
  body:not(.no-page-v2) .srv-card:last-child {
    height: auto;
    min-height: calc(100svh - 21.5rem);
  }

  /* Any card past the sixth keeps the invariant rather than the step,
     so a seventh would sit on the sixth instead of breaking the exit
     the way every card from the fifth on used to. */
  body:not(.no-page-v2) .srv-card:nth-child(n + 7) {
    top: calc(5.25rem + 19.5rem);
    height: calc(100svh - 24.75rem);
  }

  /* The last card keeps the invariant like the rest of them, and it
     has to: the stack lets go when the track's content ends, so the
     spacer has to reach the fold or this card is still short of its
     own top offset when everything releases — which froze Out of Home
     at whatever it had reached, tag row and title and half its copy.
     A fixed step of slack instead of the invariant only balanced at
     one screen height; the amount needed is 100svh minus the top
     offset minus the card's own height, which is what the invariant
     already says. What used to make that slack read as a hole under
     the card was the 16:9 picture: at full square the card now fills
     most of it, and the CTA follows what is left. */

  /* The photographs are 800x800, so a square frame is the whole
     picture — no crop at all, which is what these shots want: the 16:9
     window this used to be threw away 44% of every one of them.

     The cap is what keeps that affordable. The card has to fit between
     its own pin offset (21.5rem on the last card) and the fold, and
     everything above the picture — tag, title, copy, padding — comes to
     about 13.5rem. Anything left is the picture's, so on a roomy phone
     the square fits outright and nothing is cropped; on a short one the
     cap bites first and object-fit takes the difference off the top and
     bottom, as before. The floor stops a very short screen squashing
     the picture into a letterbox. */
  body:not(.no-page-v2) .srv-card-media {
    aspect-ratio: 1 / 1;
    max-height: max(10rem, calc(100svh - 37.5rem));
  }

  /* The img has to actually fill the frame for object-fit to mean
     anything. Left to itself it kept its own square box (293x293)
     inside the 293x165 frame, so cover had nothing to do and the frame
     simply clipped — showing the top 56% of every photograph and
     discarding the bottom 44%.

     height:100% alone does not fix it: a percentage height cannot
     resolve against a parent whose own height comes from
     aspect-ratio rather than an explicit value, so it fell back to the
     intrinsic square. Absolutely positioning it against the frame
     gives a definite box on both axes, and cover then takes the excess
     off the top and bottom equally. */
  body:not(.no-page-v2) .srv-card-media {
    position: relative;
  }

  body:not(.no-page-v2) .srv-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Growth Studio only: a hand from someone out of shot sits right on
     the left edge of that photograph. object-position cannot help —
     the image already fills the frame's width exactly, so there is no
     horizontal overflow for it to shift. Widening it past the frame
     and pulling it left gives the crop something to take: the visible
     window starts ~12% into the picture, which loses the hand. */
  /* Creative only: the pair sit high in this frame and the centred
     crop clipped their heads. Taking less off the top slides the
     picture down and gives them headroom. */
  body:not(.no-page-v2) .srv-card:nth-child(2) .srv-card-media img {
    object-position: 50% 36%;
  }

  /* Growth Studio only: a hand from someone out of shot sits in the
     bottom-left corner of that photograph. It occupies just the first
     few percent of the width, so the 12.3% crop this started at was
     far more than needed and was cutting into the man in black.
     6.1% (6.5 / 106.5) clears the hand and leaves him his shoulder. */
  body:not(.no-page-v2) .srv-card:nth-child(4) .srv-card-media img {
    width: 106.5%;
    max-width: none;
    left: -6.5%;
    right: auto;
    margin-left: 0;
  }

  /* Each card already carries its own pastel as --srv-wash (and the
     matching accent as --srv-accent) — they were only being used for
     the artwork, so the tags sat on the same flat grey on every card.
     Putting the wash back on the tag is what the colour was for. */
  body:not(.no-page-v2) .srv-card-label {
    background: var(--srv-wash, rgba(46, 46, 46, 0.06));
    color: var(--srv-accent, rgba(46, 46, 46, 0.78));
  }

  /* "Sales & CRM" carried the teal accent; yellow in its place. The
     text is a deeper amber rather than the #ffb200 accent itself —
     pink on its wash and purple on its wash both hold up, but yellow
     on a yellow wash is two light tones and the label stops being
     readable. */
  body:not(.no-page-v2) .srv-card:nth-child(3) .srv-card-label {
    background: #ffe7ad;
    color: #8a5a00;
  }

  /* Driven by setupServiceStackDepth below — 1 until the next card
     starts covering this one, easing to ~0.945 once it is fully
     covered. Anchored to the top edge so the tag row that stays
     visible does not drift as it scales. */
  body:not(.no-page-v2) .srv-card-inner {
    transform: scale(var(--srv-stack-scale, 1));
    transform-origin: 50% 0;
  }

  body:not(.no-page-v2) .srv-card-inner {
    /* The list item is now a tall spacer, and .srv-card-inner carries
       height:100% from the carousel — which stretched the visible card
       to the full 860px of the spacer. It sits at the item's top at
       its natural height instead. */
    height: auto;
    background: #fff;
    /* The stock shadow is 0 22px 48px — thrown downward, onto the card
       this one is already covering, where none of it can be seen. Cast
       upward instead so it lands on the card behind and the top edge
       of each pinned card reads as lifted off the stack.

       Kept deliberately small. The peek strip each card leaves is only
       52px tall, so a wide upward glow darkens most of what is visible
       of the card beneath and reads as a grey band rather than as
       depth — which is what both the original 26px/13% version and the
       38px/8.5% one after it were doing. A 16px shadow at 5% falls off
       inside the top third of the strip and leaves the rest of it
       white; the 1px border does the edge. */
    box-shadow: 0 -7px 16px rgba(46, 46, 46, 0.05);
  }
}

/* ============================================================
   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:not(.no-page-v2) .footer-shell {
  padding-top: 110px;
}

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

body:not(.no-page-v2) .footer-bottom {
  margin-top: -88px;
}

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

@media (max-width: 1024px) {
  body:not(.no-page-v2) .footer-shell {
    padding-top: 80px;
  }
  body:not(.no-page-v2) .footer-wordmark-shell {
    margin-top: 24px;
    padding-bottom: 40px;
  }
  body:not(.no-page-v2) .footer-bottom {
    margin-top: -64px;
  }
  body:not(.no-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. */
  body:not(.no-page-v2) .footer-shell {
    padding-top: 1.5rem;
    /* The shell's box is centred (20px gutters either side), but the
       link columns are much wider than the words in them, so the ink
       ran 20-283 and sat 36px left of the screen's centre line.

       Translating the box was the obvious fix and the wrong one: it
       pushed the shell's right edge to 391 and added 16px of
       horizontal scroll. Instead the columns are sized to their
       content and the shell shrinks to fit and centres itself, so the
       ink centres with no box sticking out — 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:not(.no-page-v2) .footer-links {
    grid-template-columns: max-content max-content;
    /* Content-width columns brought the two lists close together — the
       20px gap read as cramped once they were no longer padded out by
       their old fixed widths. The shell is fit-content and centred, so
       widening this pushes both columns outward evenly and the mark,
       sitting on the shell's left edge, stays on column one. */
    column-gap: 4.25rem;
  }

  /* 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:not(.no-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:not(.no-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:not(.no-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:not(.no-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;
  /* The whole sequence in here — the letter sweep, the dot's bounce
     along the lines and the highlight bar — is normalised against this
     section's scroll travel (height - 100vh of sticky stage). So this
     one number is the pacing dial: raise it and everything slows down
     together and takes more scroll, without retiming any curve.
     200vh gave only one viewport of travel, which read as rushed. */
  min-height: 380vh;
  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;
}

/* Phones never run the falling dot (it returns early at 720px), so the
   only thing this section's travel pays for here is the letter sweep,
   which finishes at 70% of it. At 380vh that left ~1500px — nearly two
   viewports — of scrolling past copy that had already finished
   lighting. The sweep and its settling beat both scale off this number,
   so lowering it keeps their proportions and just costs less thumb. */
@media (max-width: 720px) {
  .hero-slot {
    min-height: 260vh;
  }
}

.hero-slot-shell {
  width: min(1400px, 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;
  --statement-progress: 0;
  --intro-opacity: 1;
  --intro-y: 0vh;
  --statements-y: 0vh;
  --reveal-fade: 18;
  --reveal-rest: 0.1;
  --total: 1;
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(70vh, 680px);
}

[data-reveal-block] .reveal-text {
  max-width: none;
  margin: 0;
  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;
}

/* Give the closing thought the same oversized, editorial pause as the
   Granola "For the doers" moment, while keeping Leadly's own type language. */
[data-reveal-block] .reveal-text:not(.reveal-text-statement) {
  width: min(1040px, 100%);
  margin-inline: auto;
}

[data-reveal-block] .reveal-text-intro {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  opacity: var(--intro-opacity);
  transform: translate3d(0, var(--intro-y), 0);
  transition: none;
  will-change: transform, opacity;
}

/* The intro reads as three lines: the opening statement on its own,
   then the three beats after it wrapping into two. Each line sizes to
   its own content rather than the 1040px column above, and the body's
   cap is set in em so the wrap holds as the type scales with the
   viewport. */
[data-reveal-block] .reveal-text.reveal-intro-line {
  width: auto;
  margin-inline: 0;
}

[data-reveal-block] .reveal-text.reveal-intro-body {
  max-width: 21em;
}

[data-reveal-block] .reveal-statements {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: var(--statement-progress);
  transform: translate3d(0, var(--statements-y), 0);
  transition: none;
  will-change: transform, opacity;
}

[data-reveal-block] .reveal-text-statement {
  font-size: clamp(4.25rem, 10.1vw, 150px);
  font-weight: 800;
  font-variation-settings: "wght" 800;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* 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;
}

/* The travelling dot replaces the final full stop in "ground up." once
   it has landed, so the punctuation never appears doubled. */
[data-reveal-block] .reveal-letter.is-dot-rest-target {
  opacity: 0 !important;
}

.travelling-dot {
  transition: background-color 220ms ease;
}

.travelling-dot.is-black {
  background: #2e2e2e;
}

@media (max-width: 900px) {
  [data-reveal-block] {
    --reveal-fade: 12;
  }
}

@media (max-width: 720px) {
  [data-reveal-block] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: auto;
  }

  [data-reveal-block] .reveal-text-intro,
  [data-reveal-block] .reveal-statements {
    opacity: 1;
    transform: none;
  }

  [data-reveal-block] .reveal-statements {
    margin-top: clamp(3rem, 10vh, 5rem);
  }
}

@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-statement {
    font-size: clamp(3.1rem, 14vw, 5.1rem);
    line-height: 0.88;
    letter-spacing: -0.03em;
  }
}

/* No sweep for readers who've asked motion to stop — show it all. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-block] {
    --statement-progress: 1;
    --intro-opacity: 0;
    --intro-y: -34vh;
    --statements-y: 0vh;
  }

  [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 {
    /* 155vh was the reveal and nothing else: the film reached full
       bleed about 45vh into the pin and the section let go 10vh later,
       so it was possible to scroll straight past the film without ever
       watching it. 230vh keeps the pin — and the video playing — for
       85vh after it has finished opening, so carrying on means holding
       the film on screen rather than leaving it.

       The two dials keep the opening itself at its old pace: they are
       the same 18.7vh and 45vh of travel as before, restated as shares
       of the longer pin, so all the added scroll lands at the end. */
    min-height: 230vh;
    --video-morph-end: 0.144;
    --video-zoom-end: 0.346;
    padding-bottom: clamp(4rem, 10vh, 7rem);
  }

  .video-reveal-play {
    font-size: 0.9rem;
    padding: 0.7rem 1.2rem 0.7rem 1rem;
    /* The label wrapped onto two lines inside the pill, which made it
       74px tall over a 181px film. */
    white-space: nowrap;
  }
}

@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;
  }
}

/* ----------------------------------------------------------
   HERO INTRO — full-bleed film closing into a dot

   The film covers the whole viewport, navigation included, then a
   circle closes in from the corners until what is left is a dot and
   the hero underneath is fully uncovered. Geometry is written from
   scroll in script.js; nothing here animates on its own.
   ---------------------------------------------------------- */

.hero-intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  /* The film's own first frame, shown until the film has data to paint,
     so a slow connection sees the collage rather than a blank. */
  background: #2e2e2e url("https://leadly-website.pages.dev/assets/hero-intro-poster-desktop-7c5310fcc7.webp") center / cover no-repeat;
  opacity: var(--hero-intro-opacity, 1);
  /* Radius is written in px so the circle can be sized off the exact
     viewport diagonal rather than an over-generous percentage. */
  clip-path: circle(
    var(--hero-intro-radius, 75vmax) at var(--hero-intro-x, 50%)
      var(--hero-intro-y, 50%)
  );
  pointer-events: none;
}

@media (orientation: portrait) {
  .hero-intro {
    background-image: url("https://leadly-website.pages.dev/assets/hero-intro-poster-mobile-4a96b96ba2.webp");
  }
}

/* The "scroll to dive in" button along the bottom of the intro. It sits
   inside the intro, so the closing circle crops it away with the film,
   and it fades as soon as scrolling starts. */
.hero-intro-cue {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 13px 22px;
  /* The nav bar's glass, denser so the line reads over the busy collage,
     with a soft edge rather than a hard white rim. */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  background: rgba(244, 244, 244, 0.72);
  box-shadow: 0 10px 30px rgba(46, 46, 46, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #2e2e2e;
  font-family: "Sequel Sans", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 360;
  letter-spacing: 0.011em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  opacity: var(--hero-intro-cue, 1);
  visibility: visible;
}

.hero-intro-cue:focus-visible {
  outline: 2px solid #ff0099;
  outline-offset: 3px;
}



.hero-intro-cue-arrow {
  width: 14px;
  height: 18px;
  color: #ff0099;
  /* Two held positions, like the film's stop motion, rather than a glide. */
  animation: hero-intro-cue-bob 0.8s steps(1, end) infinite;
}

@keyframes hero-intro-cue-bob {
  0% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}

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

@media (max-width: 720px) {
  .hero-intro-cue {
    gap: 10px;
    padding: 12px 18px 12px 20px;
    font-size: 14px;
  }
}

/* Once spent it stops compositing entirely. */
.hero-intro.is-spent,
.hero-intro.is-spent .hero-intro-cue {
  visibility: hidden;
}

.hero-intro-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Draws back a little as the circle closes, so the film reads as
     being pulled into the dot rather than peered at through a hole. */
  transform: translate(var(--hero-intro-pan-x, 0px), var(--hero-intro-pan-y, 0px))
    scale(var(--hero-intro-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

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

/* ----------------------------------------------------------
   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:not(.no-page-v2) {
  isolation: isolate;
  --footer-flick-height: clamp(110px, 14.5svh, 145px);
}

body:not(.no-page-v2) main,
body:not(.no-page-v2) .site-footer {
  position: relative;
  z-index: 2;
}

body:not(.no-page-v2) {
  --footer-flick-reveal: 0;
}

body:not(.no-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:not(.no-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;
  }
}





/* Breathing room before the footer: the base sheet pulls the footer up
   over the CTA by 88px, which left the two almost touching. */
body:not(.no-page-v2) .cta-section {
  margin-bottom: 0;
  padding-bottom: 9rem;
}

@media (max-width: 720px) {
  body:not(.no-page-v2) .cta-section {
    padding-bottom: 5.5rem;
  }
}

.footer-slideshow-spacer {
  position: relative;
  z-index: 1;
  height: 0;
  background: transparent;
  pointer-events: none;
}

@media (max-width: 720px) {
  body:not(.no-page-v2) {
    --footer-flick-height: clamp(90px, 12.5svh, 112px);
  }

}

@media (prefers-reduced-motion: reduce) {
  body:not(.no-page-v2) .site-footer,
  .footer-slide {
    transition: none;
  }

  /* No flick for readers who've asked motion to stop. */
  body:not(.no-page-v2) .site-footer {
    transform: none;
  }
}



/* ==========================================================
   MOBILE TYPE SCALE
   One place, last in the cascade, because these sizes were set
   across several competing blocks (a 768px rule for the section
   headings sat before a base rule that outranked it on source
   order, so .srv-heading still resolved to 40px).

   Measured at 375px before this block: hero 60, section headings
   40 / 36 / 32, card headings 29.6 / 24, CTA 34.5. That is a
   desktop scale shrunk a little, not a phone scale — the section
   headings alone ran a third larger than the 28-30px a 375px
   screen normally carries. Body copy was already right at 16px
   and is deliberately left alone.
   ========================================================== */
@media (max-width: 720px) {
  /* The hero headline is deliberately oversized and is NOT part of this
     scale — it keeps its own clamp() further up the file. */

  .srv-heading,
  .products-heading,
  .cs-heading {
    font-size: clamp(1.75rem, 8vw, 2rem);
    line-height: 1.08;
  }

  /* Three lines: "If you're ready to" / "build something" /
     "that's <word>". Moving "that's" down to join the cycling word
     changed which line is widest — it was "build something that's" at
     9.19x the font-size, now it is "that's built to last." at 7.23x, so
     the same width carries type ~27% larger. */
  /* Halfway between the 9.2vw it was and the 11.5vw the three-line
     split allowed — 11.5 read as oversized on a phone. */
  .cta-type-heading {
    font-size: clamp(1.9rem, 10.3vw, 3rem);
  }

  .reveal-text-intro .reveal-text {
    font-size: clamp(1.6rem, 7.4vw, 1.85rem);
    line-height: 1.25;
  }

  .srv-card-title,
  .product-title {
    font-size: 1.375rem;
    line-height: 1.18;
  }

  /* Removing the product label pill left the title sitting right under
     the logo grid, and the 18px on the copy plus the title's own line
     descent opened a 40px hole beneath it. Swap the two: air above the
     title, the paragraph pulled up under it. */
  body:not(.no-page-v2) .product-title {
    margin-top: 1.5rem;
  }

  /* The showcase artwork is sized as percentages of its stage, and the
     stage was capped at the card's 303px content width — so the
     mockups sat small with a lot of air around them. Letting the stage
     bleed out to the card's own edges scales everything inside it
     proportionally, artwork and offsets together, with no repositioning.
     The link also sat 66px below the artwork, which read as a hole. */
  body:not(.no-page-v2) .product-showcase {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
  }

  /* Only the showcase carries the bleed — the stage is 100% of it.
     Putting the same calc on both compounded to 367px and pushed the
     artwork 16px past the card on each side. */
  body:not(.no-page-v2) .product-showcase-stage {
    width: 100%;
    margin-inline: 0;
  }

  body:not(.no-page-v2) .product-link {
    margin-top: 0.75rem;
  }

  body:not(.no-page-v2) .product-copy:first-of-type {
    margin-top: 0;
  }

  .cs-milestone h3 {
    font-size: 1.25rem;
    line-height: 1.2;
  }
}


/* ==========================================================
   MOBILE SECTION RHYTHM
   The whitespace between blocks was 60 / 48 / 123 / 142 / 88px —
   a 3x spread, because each section carried its own padding and a
   couple of legacy negative margins pulled neighbours together on
   top of that. One 80px gap everywhere instead.

   Where a section is a coloured box (case studies, footer) the whole
   gap comes from the plain section beside it, since the box's own
   padding is interior and reads as part of the box.
   ========================================================== */
@media (max-width: 720px) {
  /* These carry body:not(.no-page-v2) and the section-light class deliberately:
     the per-section spacing they replace is set at that specificity
     elsewhere in the file, so a bare .products-section rule loses no
     matter how late it appears. */
  /* This boundary is the exception to the 80px rhythm. The film is
     centred in a 100vh sticky pin, so ~160px of that pin sits below it
     before the section even ends — the gap you see is that 160 plus
     whatever padding is added here. Trimmed to bring the perceived gap
     down without touching the pin, which has to stay 100vh for the
     morph's progress maths to stay in sync. */
  body:not(.no-page-v2) .video-reveal {
    padding-bottom: 0.5rem;
  }

  body:not(.no-page-v2) .srv-section.section-light {
    padding-top: 1.5rem;
    padding-bottom: 5rem;
  }

  /* Extra breathing room under the dark card — the floating GIF hangs
     over its bottom edge, so the gap below it carries the key. */
  body:not(.no-page-v2) .cs-section {
    margin-bottom: 5rem;
  }

  /* The 80px gap between these two is split unevenly on purpose. The
     nav is fixed and sits 11-75px down the viewport, and the CTA
     artwork used to start 57px into its section — so whenever the
     section top reached the top of the screen, the nav covered the top
     of the collage (the pink ball and the reaching arm). Pushing the
     CTA's own padding to 68px puts the artwork 85px in, clear of the
     nav, and taking the difference off the products section keeps the
     gap between them at the same 80px as everywhere else. */
  body:not(.no-page-v2) .products-section.section-light {
    padding-top: 2.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0;
    /* The card inside casts a 0 26px 54px shadow, reaching ~80px below
       itself — but this section is overflow:hidden and ends 15px under
       the card, so the shadow was being sliced off square and read as a
       hard rule across the page. Nothing here needs clipping now that
       the showcase track is minmax(0,1fr), so the shadow is simply left
       to fade out across the boundary. */
    overflow: visible;
  }

  body:not(.no-page-v2) .cta-section.section-light {
    padding-top: 4.25rem;
    padding-bottom: 5rem;
    /* Transparent, not the page colour. The products card above casts a
       0 26px 54px shadow that reaches ~80px below it — further than the
       12px of padding under it — so this section's opaque background was
       painting over the shadow from its own top edge down and slicing it
       into a hard horizontal line. The colour was identical to the page
       behind it, so dropping it changes nothing except letting the
       shadow fade out properly. */
    background: transparent;
  }
}


/* ==========================================================
   SERVICES INTRO — centred on mobile
   ========================================================== */
@media (max-width: 720px) {
  .srv-intro {
    justify-items: center;
    text-align: center;
  }

  .srv-pill {
    justify-self: center;
  }
}

/* ============================================================
   NAV SUBMENU LINKS
   The Services sub-pages are real links now, so the top-level
   ".nav-links a" rules (fixed widths by position, 70px height,
   nowrap, the hover dot, the light-on-dark colour) reach them as
   well. Put them back to the submenu-item look they had as
   buttons. Specificity has to clear
   body[data-nav-theme="dark"] .nav-menu a:not(.nav-cta).
   The panel stays white in both nav themes, so the text stays dark.
   ============================================================ */
body .site-header .nav-links a.nav-about-subpage {
  display: block;
  width: auto;
  min-height: 0;
  padding: 0.7rem 0.85rem;
  overflow: visible;
  color: #2e2e2e;
  font-size: 0.86rem;
  line-height: 1.2;
  white-space: normal;
  text-align: left;
  transition:
    transform var(--motion-base) var(--ease-standard),
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-base) ease;
}

body .site-header .nav-links a.nav-about-subpage::after {
  content: none;
}

body .site-header .nav-links a.nav-about-subpage:hover,
body .site-header .nav-links a.nav-about-subpage:focus-visible {
  color: #1a1a1a;
}

body .site-header .nav-links a.nav-about-subpage-new,
body .site-header .nav-links a.nav-about-subpage-new:hover,
body .site-header .nav-links a.nav-about-subpage-new:focus-visible,
body .site-header .nav-links a.nav-about-subpage[aria-current="page"] {
  color: var(--pink);
}

body .site-header .nav-links a.nav-about-subpage[aria-current="page"] {
  border-color: rgba(255, 0, 153, 0.24);
  background: #fff;
}

@media (max-width: 1240px) {
  body .site-header .nav-links a.nav-about-subpage {
    padding: 0.8rem 0.95rem;
    font-size: 0.95rem;
  }
}


/* Services dropdown on desktop: six sub-pages in two columns
   beside the photo, rather than one tall stack. Below 1241px the
   menu is the stacked mobile list, which keeps one column. */
@media (min-width: 1241px) {
  .site-header .nav-services-wrap .nav-about-panel {
    width: clamp(31rem, 40vw, 34rem);
    grid-template-columns: minmax(7rem, 0.72fr) minmax(0, 1.6fr);
  }

  .site-header .nav-services-wrap .nav-about-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-content: stretch;
  }

  body .site-header .nav-links .nav-services-wrap a.nav-about-subpage {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

/* 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;
  }
}


/* BLOG-CSS-START */
/* ============================================================
   Blog: the hub, the article pages and the homepage section.
   Generated markup lives in service-pages-src/build_blog.py.
   The homepage carries an inline copy of this file (between the
   BLOG-CSS markers), so the Webflow build picks it up.
   ============================================================ */

.blog-hero {
  min-height: 0;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.blog-hero .cp-hero-layout {
  grid-template-columns: minmax(0, 1fr);
}

.blog-hero .svp-hero-lead {
  max-width: 34rem;
}

.blog-list {
  padding: clamp(1rem, 3vw, 2rem) 0 var(--svp-section-y, clamp(4rem, 8vw, 7rem));
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  padding: 0.8rem 0.8rem 1.5rem;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 42px rgba(46, 46, 46, 0.07);
  transition:
    transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 400ms ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(46, 46, 46, 0.11);
}

.blog-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: #eeecf0;
}

.blog-card-media {
  position: relative;
}

.blog-media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.blog-article-figure {
  position: relative;
}

.blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}

.blog-card-body {
  display: grid;
  gap: 0.7rem;
  padding: 0 0.7rem;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  color: rgba(46, 46, 46, 0.6);
  font-size: 0.85rem;
}

.blog-card-cat {
  color: var(--pink);
  font-weight: 600;
}

.blog-card-title {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.blog-card-title a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.blog-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.blog-card-summary {
  color: rgba(46, 46, 46, 0.68);
  font-size: 1rem;
  line-height: 1.5;
}

.blog-card-link {
  margin-top: auto;
  padding: 0 0.7rem;
  color: #2e2e2e;
  font-size: 0.95rem;
  font-weight: 600;
}

.blog-card-link span {
  display: inline-block;
  margin-left: 0.3em;
  color: var(--pink);
  transition: transform 300ms ease;
}

.blog-card:hover .blog-card-link span {
  transform: translateX(4px);
}

/* ---- Homepage section ------------------------------------------- */

/* The closing collage has empty space above its artwork; pull it up under
   the blog section so the two read as neighbours. */
.blog-section + .cta-section {
  padding-top: 0;
}

.blog-section + .cta-section .cta-art {
  margin-top: clamp(-8rem, -8vw, -4.5rem);
}

.blog-section {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 5vw, 4.5rem);
}

.blog-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem 2rem;
  margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem);
}

.blog-section-title {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.blog-heading {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* A global span rule would shrink the dot to 16px; keep it the heading's size. */
.blog-heading .blog-dot {
  color: var(--pink);
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.blog-section-lead {
  max-width: 28rem;
  color: rgba(46, 46, 46, 0.68);
  font-size: var(--body-copy-size, 1.0625rem);
  font-weight: var(--body-copy-weight, 400);
  letter-spacing: var(--body-copy-letter-spacing, 0);
  line-height: var(--body-copy-line-height, 1.5);
}

/* The homepage button. The base .cta-hero-button is a fixed-width,
   centred button; here it sizes to its label and sits at the row's end. */
.blog-section-head .blog-all-button {
  width: auto;
  min-width: 13.5rem;
  margin: 0;
  padding: 0 1.9rem;
}

@media (max-width: 720px) {
  .blog-section-head .blog-all-button {
    min-width: 0;
  }
}

/* ---- Article page ------------------------------------------------ */

.blog-article-head {
  padding: clamp(7rem, 12vw, 9.5rem) 0 clamp(1.8rem, 3.5vw, 2.8rem);
}

.blog-article-shell {
  width: 100%;
}

.blog-article-body {
  max-width: 46rem;
  margin: 0 auto;
}

.blog-article-head .blog-article-shell {
  text-align: center;
}

.blog-article-title,
.blog-article-lead {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(46, 46, 46, 0.72);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-back:hover,
.blog-back:focus-visible {
  color: #2e2e2e;
}

.blog-article-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 1rem;
  color: rgba(46, 46, 46, 0.62);
  font-size: 0.9rem;
}

.blog-article-meta span + span::before {
  content: "\00b7";
  margin-right: 1rem;
}

.blog-article-title {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.blog-article-lead {
  margin-top: 1.1rem;
  color: rgba(46, 46, 46, 0.72);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}

.blog-article {
  padding: 0 0 clamp(3.5rem, 7vw, 6rem);
}

.blog-article-figure {
  margin: 0 0 clamp(2.2rem, 5vw, 3.8rem);
  overflow: hidden;
  border-radius: 24px;
  background: #eeecf0;
}

.blog-article-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.blog-article-body {
  color: rgba(46, 46, 46, 0.86);
  font-size: clamp(1.06rem, 1.2vw, 1.15rem);
  line-height: 1.75;
}

.blog-article-body > * + * {
  margin-top: 1.35rem;
}

.blog-article-body h2 {
  margin-top: 2.8rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.blog-article-body h3 {
  margin-top: 2.2rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.blog-article-body h2 + *,
.blog-article-body h3 + * {
  margin-top: 0.9rem;
}

.blog-article-body ul {
  padding-left: 1.3rem;
  list-style: disc;
}

.blog-article-body li + li {
  margin-top: 0.5rem;
}

.blog-article-body li::marker {
  color: #ff0099;
}

.blog-article-body blockquote {
  margin: 2.2rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid #ff0099;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.blog-article-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: 24px;
  background: #2e2e2e;
  color: #f4f4f4;
}

.blog-article-cta h2 {
  color: #f4f4f4;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.blog-article-cta p {
  margin: 0.6rem 0 1.4rem;
  color: rgba(244, 244, 244, 0.78);
  line-height: 1.55;
}

.blog-more {
  padding: 0 0 var(--svp-section-y, clamp(4rem, 8vw, 7rem));
}

.blog-more-title {
  margin-bottom: 1.4rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.blog-more .blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-more .blog-card-title {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

@media (max-width: 1024px) {
  .blog-grid,
  .blog-more .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 721px) and (max-width: 1024px) {
  .blog-more .blog-card:nth-child(3) {
    display: none;
  }
}

@media (max-width: 720px) {
  .blog-grid,
  .blog-more .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-heading {
    letter-spacing: -0.035em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-media-video {
    display: none;
  }

  .blog-card,
  .blog-card-media img,
  .blog-card-link span {
    transition: none;
  }
}

/* ---- Hub: search and filter ------------------------------------- */

.blog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.blog-search {
  position: relative;
  flex: 1 1 18rem;
  max-width: 26rem;
}

.blog-search-icon {
  position: absolute;
  top: 50%;
  left: 1.1rem;
  transform: translateY(-50%);
  color: rgba(46, 46, 46, 0.5);
  pointer-events: none;
}

.blog-search input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0 1.2rem 0 2.9rem;
  border: 1px solid rgba(46, 46, 46, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  appearance: none;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.blog-search input::placeholder {
  color: rgba(46, 46, 46, 0.42);
}

.blog-search input:focus {
  border-color: rgba(255, 0, 153, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 0, 153, 0.09);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-chip {
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(46, 46, 46, 0.16);
  border-radius: 999px;
  background: transparent;
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}

.blog-chip:hover {
  border-color: rgba(46, 46, 46, 0.5);
}

.blog-chip.is-active {
  border-color: #2e2e2e;
  background: #2e2e2e;
  color: #f4f4f4;
}

.blog-chip:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

.blog-card[hidden] {
  display: none;
}

.blog-empty {
  padding: 2rem 0;
  color: rgba(46, 46, 46, 0.68);
  font-size: 1.05rem;
}

@media (max-width: 720px) {
  .blog-search {
    max-width: none;
  }

  .blog-filters {
    flex-wrap: nowrap;
    margin-right: -1.25rem;
    padding-right: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .blog-filters::-webkit-scrollbar {
    display: none;
  }

  .blog-chip {
    flex: 0 0 auto;
  }
}

/* Homepage preview: a touch smaller than the hub so it sits as a quiet
   closing section rather than a feature. */
.blog-section .blog-grid {
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}

.blog-section .blog-card-title {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

/* ---- Hero ------------------------------------------------------- */

/* The hub sits on the plain page colour; no pink glow behind the title. */
.blog-hero-hub .svp-hero-glow {
  display: none;
}

.blog-hero .svp-hero-lead {
  max-width: 30rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
}

/* ---- Width: follow the nav bar's grid ----------------------------- */

/* The nav bar, and every other section on the page, sit on the boxed guide
   width (1180px). The default shell is wider (1240px), so pin the blog's
   shells to the same guide. */
.blog-section .section-shell,
.blog-list .section-shell,
.blog-more .section-shell,
.blog-hero .section-shell {
  width: var(--boxed-guide-width, min(1180px, calc(100vw - 2.5rem)));
}

/* ---- Hub hero: the animated keys, floating right of the title ------ */

.blog-hero-hub .cp-hero-layout {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

/* Transparent video, shown whole (never cropped), drifting gently. It is
   free of the page guides: it sits past the right edge of the grid and
   hangs down over the search and filters when it needs to. */
.blog-hero-art {
  position: absolute;
  z-index: 1;
  top: -4.5rem;
  right: clamp(-7rem, -5vw, -1rem);
  width: clamp(15rem, 25vw, 23rem);
  pointer-events: none;
  animation: blog-art-float 6s ease-in-out infinite;
}

.blog-hero-video {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

@keyframes blog-art-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-18px) rotate(1.5deg);
  }
}

@media (max-width: 1024px) {
  .blog-hero-hub .cp-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-hero-art {
    position: relative;
    top: auto;
    right: auto;
    justify-self: center;
    width: min(17rem, 62vw);
  }
}

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

/* ---- Homepage: FAQ boxes and blog cards reveal on scroll ----------- */

/* --rv runs 0 to 1 as the box scrolls into view (set by the script at the
   end of index.html); --rd is its side: -1 or 1, or a fan across a row.
   Individual transform properties, so hover transforms and the existing
   [data-settle] scale are untouched. Without the script --rv is 1 and
   nothing moves. */
[data-card-reveal] {
  translate:
    calc(var(--rd, 0) * (1 - var(--rv, 1)) * 2.6rem)
    calc((1 - var(--rv, 1)) * 5.5rem);
  rotate: calc(var(--rd, 0) * (1 - var(--rv, 1)) * 5deg);
  opacity: min(1, calc(var(--rv, 1) * 1.8));
  will-change: translate, rotate, opacity;
}

@media (max-width: 768px) {
  [data-card-reveal] {
    translate:
      calc(var(--rd, 0) * (1 - var(--rv, 1)) * 1.4rem)
      calc((1 - var(--rv, 1)) * 3.5rem);
    rotate: calc(var(--rd, 0) * (1 - var(--rv, 1)) * 3deg);
  }
}

/* Card date: a step smaller than the category beside it. */
.blog-card-meta > span:not(.blog-card-cat) {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* Room under the title for the floating keys, so they hang in the hero
   instead of covering the search and filters. */
.blog-hero-hub {
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

@media (max-width: 1024px) {
  .blog-hero-hub {
    padding-bottom: clamp(1rem, 3vw, 2rem);
  }
}

/* Hub title: larger than the article titles. */
.blog-hero-hub .svp-hero-title {
  font-size: clamp(3.4rem, 7.2vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

@media (max-width: 768px) {
  .blog-hero-hub .svp-hero-title {
    font-size: clamp(2.8rem, 13vw, 3.8rem);
  }
}

/* ---- Article call-to-action: centred copy, a person on the Enter key
   to its right ------------------------------------------------------ */

.blog-cta {
  position: relative;
  overflow: hidden;
}

.blog-cta .svp-cta-inner {
  min-height: clamp(18rem, 30vw, 26rem);
  align-content: center;
}

/* Not bound to the page guide: it sits towards the right edge of the
   section, past the nav bar's edge on wide screens. */
.blog-cta .blog-cta-figure {
  position: absolute;
  right: clamp(-2rem, 1vw, 3rem);
  bottom: 0;
  width: clamp(11rem, 22vw, 19rem);
  pointer-events: none;
}

.blog-cta .blog-cta-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .blog-cta .blog-cta-figure {
    position: relative;
    right: auto;
    margin: 1.5rem auto 0;
    width: min(55vw, 13rem);
  }
}

/* Trim the empty space around the call-to-action: the clip has a lot of
   room above Michael, and the article and CTA both pad their edges. */
.blog-article {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-cta {
  padding-top: 0;
}


/* ---- Article hero: photo with the title laid over it ----------------- */

.blog-article {
  padding-top: clamp(7.5rem, 11vw, 9rem);
}

.blog-article-hero {
  position: relative;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
  border-radius: 28px;
  overflow: hidden;
  background: #2e2e2e;
}

.blog-article-hero .blog-article-figure {
  margin: 0;
  border-radius: 0;
}

.blog-article-hero .blog-article-figure img {
  aspect-ratio: 21 / 10;
  min-height: 26rem;
}

.blog-article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 30, 30, 0.82) 0%, rgba(30, 30, 30, 0.45) 42%, rgba(30, 30, 30, 0) 72%);
  pointer-events: none;
}

.blog-article-hero-copy {
  position: absolute;
  z-index: 1;
  left: clamp(1.4rem, 4vw, 3.4rem);
  right: clamp(1.4rem, 4vw, 3.4rem);
  bottom: clamp(1.4rem, 4vw, 3.2rem);
  color: #f4f4f4;
  text-align: left;
}

.blog-article-hero .blog-article-meta {
  justify-content: flex-start;
  margin: 0 0 1rem;
  color: rgba(244, 244, 244, 0.8);
}

.blog-article-hero .blog-card-cat {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #ff0099;
  color: #fff;
  font-weight: 600;
}

.blog-article-hero .blog-article-meta span + span::before {
  color: rgba(244, 244, 244, 0.5);
}

.blog-article-hero .blog-article-title {
  max-width: 44rem;
  margin: 0;
  color: #f4f4f4;
  font-size: clamp(2rem, 4.8vw, 3.8rem);
}

.blog-article-hero .blog-article-lead {
  max-width: 38rem;
  margin: 0.9rem 0 0;
  color: rgba(244, 244, 244, 0.86);
}

@media (max-width: 720px) {
  .blog-article-hero .blog-article-figure img {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
}

/* BLOG-CSS-END */

/* ============================================================
   FAQ on phones: a calmer title, bigger tap targets, solid cards.
   The title was 48px in a 7.6em box (four lines); the questions sat
   on a 1.08 line-height that made two-line questions cramped; and
   the blurred glass cards left a pale box behind the list.
   ============================================================ */
@media (max-width: 720px) {
  .faq-home {
    padding: clamp(3.25rem, 13vw, 4.25rem) 0 2.25rem;
  }

  .faq-copy h2 {
    max-width: none;
    font-size: clamp(2.05rem, 9.4vw, 2.6rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }

  .faq-copy p {
    max-width: 22rem;
    margin-top: 0.75rem;
  }

  .faq-accordion {
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding: 0;
    height: auto;
    overflow: visible;
  }

  .faq-item {
    border: 1px solid rgba(46, 46, 46, 0.08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(46, 46, 46, 0.06);
    backdrop-filter: none;
  }

  .faq-question {
    min-height: 3.6rem;
    gap: 0.75rem;
    padding: 0.9rem 0.95rem 0.9rem 1.1rem;
    font-size: 1rem;
    line-height: 1.28;
  }

  .faq-question::after {
    width: 1.9rem;
    height: 1.9rem;
  }

  .faq-answer p {
    padding: 0 1.1rem 1.1rem;
    font-size: 0.98rem;
    line-height: 1.55;
  }
}


/* ============================================================
   Phones: looser letter-spacing on headings, every page.
   The desktop tracking (-0.03em to -0.06em) is tuned for large type and
   crowds the letters once headings drop to phone sizes. Loaded last, with
   the same selectors as the rules it softens.
   ============================================================ */
@media (max-width: 768px) {
  .section-intro h2,
  .service-card-body h3,
  .case-card h3,
  .products-heading,
  .contact-copy h1,
  .faq-copy h1,
  .faq-copy h2,
  .hero-title,
  .cta-type-heading,
  .srv-heading,
  .srv-card-title,
  .cs-heading,
  .cs-milestone:not(.is-figure) .cs-milestone-title,
  .ts-header h2,
  .services-v3 .svc-intro h2,
  .services-v3 .svc-detail-title,
  .svc-scroll-intro h2,
  .svc-card-title,
  .why-system-copy h2,
  .services-system-header h2,
  [data-reveal-block] .reveal-text,
  [data-reveal-block] .reveal-text-statement,
  [data-reveal-block] .reveal-text[data-dot-highlight],
  .testimonial-card blockquote,
  .svp-heading,
  .svp-hero-title,
  .svp-bigline,
  .svp-row-title,
  .svp-band-title,
  .svp-band-row-title,
  .svp-duo-title,
  .svp-band-closing,
  .svp-billboard-line,
  .svp-cta-title,
  .svp-more-title,
  .cp-question-body .cp-then,
  .cp-step-copy h3,
  .cp-dept-name,
  .cp-culture-title,
  .cp-culture-copy .cp-culture-line,
  .company-page .svp-cta-title,
  .page-team .svp-hero-title,
  .page-team .svp-heading,
  .page-team .cp-dept-name,
  .page-team .cp-culture-title,
  .page-team .svp-cta-title {
    letter-spacing: -0.025em;
  }
}


/* 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);
  }
}