/* ============================================================
   SERVICE PAGES
   Shared by the six service pages, which are generated by
   service-pages-src/build_services.py. Loads after styles.css and
   styles-staging-overrides.css, and only on these pages.

   Palette is white, greyish black and hot pink only, on every page.
   The accent tokens are set on <body> by the generator:
     --svp-accent      hot pink, for dots, rules and diagrams
     --svp-ink         a deeper hot pink, for small text on white
     --svp-wash        pale pink, for chips and glows
     --svp-accent-rgb  the accent as r, g, b, for rgba()

   script.js drives three things here: --p on [data-svp-progress]
   (scroll progress, 0 to 1), .is-lit on the words of the big
   statement, and .is-in on [data-svp-reveal] as it arrives.
   ============================================================ */

.service-page {
  --svp-accent: var(--pink);
  --svp-ink: #c4007a;
  --svp-wash: #ffd9ef;
  --svp-accent-rgb: 255, 0, 153;
  --svp-section-y: clamp(5rem, 9vw, 8.5rem);
  --svp-card-radius: 28px;
  --svp-panel-radius: 42px;
  --svp-line: rgba(46, 46, 46, 0.1);
  background: #f6f6f8;
}

.service-page main {
  overflow: clip;
}

.service-page .section-shell {
  width: var(--boxed-guide-width);
}

.service-page p {
  text-wrap: pretty;
}

.service-page strong {
  font-weight: 700;
}

/* ---- Shared type ------------------------------------------------ */

.svp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  min-height: 29px;
  padding: 0 1rem;
  border: 0.5px solid rgba(46, 46, 46, 0.88);
  border-radius: 999px;
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 310;
  line-height: 1;
}

.svp-pill-dark {
  border-color: rgba(244, 244, 244, 0.42);
  color: rgba(244, 244, 244, 0.86);
}

.svp-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--svp-accent);
  box-shadow: 0 0 0 0 rgba(var(--svp-accent-rgb), 0.5);
  animation: svp-ping 2.4s var(--ease-soft) infinite;
}

.svp-pill-new {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: var(--svp-wash);
  color: var(--svp-ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.svp-heading {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.svp-section-head {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
}

.svp-section-head-split {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem 3rem;
}

.svp-section-head-split > div {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.svp-section-lead {
  max-width: 26rem;
  justify-self: end;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

/* Dashed sticker tags, as on the homepage: pink, or dark grey. */
.svp-sticker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.4rem 0.95rem;
  border: 0.9px dashed rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.svp-sticker.is-dark {
  border-color: rgba(244, 244, 244, 0.45);
  background: #2e2e2e;
  color: var(--white);
}

/* ---- Buttons ------------------------------------------------------ */

.svp-button.cta-hero-button {
  width: auto;
  min-width: 13.5rem;
  margin-inline: 0;
  padding: 0 1.9rem;
}

.svp-button .hero-button-label {
  font-size: 17px;
  line-height: 18px;
}

.svp-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(46, 46, 46, 0.72);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 360;
  transition: color var(--motion-fast) ease;
}

.svp-text-link span {
  font-size: 0.95rem;
  transition: transform var(--motion-base) var(--ease-standard);
}

.svp-text-link:hover,
.svp-text-link:focus-visible {
  color: #2e2e2e;
}

.svp-text-link:hover span,
.svp-text-link:focus-visible span {
  transform: translateY(3px);
}

/* ================================================================
   HERO
   Headline left, the page's 3D scene right, with UI cards and
   sticker tags floating round it at different depths.
   ================================================================ */

.svp-hero {
  --p: 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 62rem);
  padding: clamp(8.5rem, 15vh, 10.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.svp-hero-glow {
  position: absolute;
  top: 6%;
  right: -12%;
  width: min(62vw, 58rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 45%, rgba(var(--svp-accent-rgb), 0.18), transparent 58%),
    radial-gradient(circle at 70% 70%, rgba(46, 46, 46, 0.06), transparent 52%);
  filter: blur(10px);
  pointer-events: none;
  transform: translateY(calc(var(--p) * 80px));
}

.svp-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.svp-hero-copy {
  display: grid;
  justify-items: start;
}

.svp-hero-copy > * {
  animation: svp-rise 1s var(--ease-soft) both;
}

.svp-hero-copy > :nth-child(2) {
  animation-delay: 80ms;
}

.svp-hero-copy > :nth-child(3) {
  animation-delay: 180ms;
}

.svp-hero-copy > :nth-child(4) {
  animation-delay: 260ms;
}

.svp-hero-title {
  max-width: 12.5ch;
  margin-top: 1.4rem;
  color: #2e2e2e;
  font-size: clamp(2.7rem, min(4.8vw, 8vh), 4.4rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.svp-hero-lead {
  max-width: 31rem;
  margin-top: 1.7rem;
  color: rgba(46, 46, 46, 0.78);
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  line-height: 1.5;
}

.svp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2.3rem;
}

.svp-hero-stage {
  position: relative;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 1 / 1;
  justify-self: end;
}

.svp-hero-object-wrap {
  position: absolute;
  inset: 6% 10% 12%;
  display: grid;
  place-items: center;
  transform: translateY(calc(var(--p) * -50px));
  animation: svp-pop 1.2s var(--ease-settle) 120ms both;
}

.svp-hero-stage.is-wide .svp-hero-object-wrap {
  inset: 22% -4% 26% 6%;
}

.svp-hero-object {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 34px 38px rgba(46, 46, 46, 0.2));
  animation: svp-bob 7s ease-in-out infinite;
}

.svp-hero-ground {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 8%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 46, 46, 0.16), transparent);
  animation: svp-ground 7s ease-in-out infinite;
}

.svp-hero-stage.is-wide .svp-hero-ground {
  bottom: 22%;
}

.svp-float {
  position: absolute;
  z-index: 2;
  width: calc(var(--w) * 1.9%);
  transform: translateY(calc(var(--p) * -110px * var(--depth))) rotate(var(--r, 0deg));
  animation: svp-float-in 1s var(--ease-soft) both;
}

.svp-float > * {
  animation: svp-bob 8s ease-in-out infinite;
  animation-delay: calc(var(--depth) * -2.4s);
}

.svp-float img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(46, 46, 46, 0.18));
}

.svp-float.is-card img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 6px solid #fff;
  border-radius: 22px;
  filter: none;
  box-shadow: 0 26px 50px rgba(46, 46, 46, 0.18);
}

.svp-float-tl {
  --r: -6deg;
  top: 2%;
  left: -6%;
  animation-delay: 380ms;
}

.svp-float-tr {
  --r: 6deg;
  top: 4%;
  right: -4%;
  animation-delay: 380ms;
}

.svp-float-bl {
  --r: 5deg;
  bottom: 6%;
  left: -4%;
  animation-delay: 480ms;
}

.svp-float-br {
  --r: -4deg;
  right: -6%;
  bottom: 2%;
  animation-delay: 520ms;
}

.svp-hero-stage .svp-sticker {
  position: absolute;
  z-index: 3;
  animation: svp-sticker-in 0.8s var(--ease-settle) both;
}

.svp-hero-stage .svp-sticker-1 {
  top: 22%;
  right: 4%;
  rotate: 9deg;
  animation-delay: 620ms;
}

.svp-hero-stage .svp-sticker-2 {
  bottom: 30%;
  left: 2%;
  rotate: -10deg;
  animation-delay: 720ms;
}

.svp-hero-stage .svp-sticker-3 {
  bottom: 3%;
  left: 30%;
  rotate: -5deg;
  animation-delay: 820ms;
}

/* Built-in widgets */
.svp-widget-search {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 48px rgba(46, 46, 46, 0.14);
  backdrop-filter: blur(14px);
}

.svp-search-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.4rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  background: #f1f1f4;
}

.svp-search-bar span:last-child {
  white-space: nowrap;
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1;
}

.svp-search-bar span:last-child::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-left: 2px;
  background: #2e2e2e;
  vertical-align: -0.1em;
  animation: svp-caret 1s steps(1) infinite;
}

.svp-search-icon {
  width: 11px;
  height: 11px;
  border: 1.6px solid rgba(46, 46, 46, 0.55);
  border-radius: 50%;
}

.svp-search-results {
  display: grid;
  gap: 0.35rem;
}

.svp-search-results li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
}

.svp-search-results li.is-you {
  background: var(--svp-wash);
}

.svp-search-rank {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #f1f1f4;
  color: rgba(46, 46, 46, 0.6);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.is-you .svp-search-rank {
  background: var(--svp-ink);
  color: #fff;
}

.svp-search-lines {
  display: grid;
  gap: 0.3rem;
}

.svp-search-lines b,
.svp-search-lines i {
  display: block;
  height: 0.45rem;
  border-radius: 99px;
  background: rgba(46, 46, 46, 0.1);
}

.svp-search-lines b {
  width: 70%;
}

.svp-search-lines i {
  width: 92%;
  height: 0.35rem;
  background: rgba(46, 46, 46, 0.06);
}

.is-you .svp-search-lines b {
  width: auto;
  height: auto;
  background: none;
  color: var(--svp-ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.is-you .svp-search-lines i {
  background: rgba(var(--svp-accent-rgb), 0.18);
}

.svp-widget.svp-widget-stat {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem 1rem;
  border-color: transparent;
  border-radius: 22px;
  background: #2e2e2e;
  color: var(--white);
  box-shadow: 0 26px 50px rgba(46, 46, 46, 0.24);
}

.svp-widget-label,
.svp-widget-note {
  color: rgba(244, 244, 244, 0.6);
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.2;
}

.svp-widget-stat strong {
  color: var(--white);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.svp-widget-bars {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 2.2rem;
  margin-top: 0.4rem;
}

.svp-widget-bars i {
  flex: 1;
  height: 40%;
  border-radius: 4px;
  background: var(--svp-accent);
  transform-origin: bottom;
  animation: svp-bars 2.6s ease-in-out infinite;
}

.svp-widget-bars i:nth-child(2) { height: 55%; animation-delay: -0.3s; }
.svp-widget-bars i:nth-child(3) { height: 48%; animation-delay: -0.6s; }
.svp-widget-bars i:nth-child(4) { height: 70%; animation-delay: -0.9s; }
.svp-widget-bars i:nth-child(5) { height: 62%; animation-delay: -1.2s; }
.svp-widget-bars i:nth-child(6) { height: 84%; animation-delay: -1.5s; }
.svp-widget-bars i:nth-child(7) { height: 100%; animation-delay: -1.8s; }

/* Palette widgets: form, pipeline, chart, stages. Shared chrome. */
.svp-widget {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 48px rgba(46, 46, 46, 0.14);
  backdrop-filter: blur(14px);
}

.svp-widget-top {
  display: flex;
  gap: 0.35rem 0.6rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: rgba(46, 46, 46, 0.6);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svp-widget-top span {
  font-size: inherit;
  line-height: 1;
  white-space: nowrap;
}

.svp-widget-ok,
.svp-widget-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  background: var(--svp-wash);
  color: var(--svp-ink);
  letter-spacing: 0.04em;
}

.svp-widget-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--svp-accent);
  animation: svp-ping 2.4s var(--ease-soft) infinite;
}

.svp-form-field {
  display: block;
  height: 1.9rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(46, 46, 46, 0.1);
  border-radius: 10px;
  background: #fafafa;
}

.svp-form-field i {
  display: block;
  width: calc(var(--f) * 100%);
  height: 0.4rem;
  margin-top: 0.72rem;
  border-radius: 99px;
  background: rgba(46, 46, 46, 0.16);
}

.svp-form-submit {
  display: grid;
  place-items: center;
  min-height: 2.1rem;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(255, 0, 153, 0.25);
}

.svp-widget-pipeline ul {
  display: grid;
  gap: 0.5rem;
}

.svp-widget-pipeline li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.svp-widget-pipeline li span {
  color: #2e2e2e;
  font-size: 0.74rem;
  line-height: 1;
}

.svp-widget-pipeline li i {
  display: block;
  width: calc(var(--v) * 100%);
  height: 0.7rem;
  border-radius: 99px;
  background: linear-gradient(90deg, #2e2e2e, #5a5a5a);
}

.svp-widget-pipeline li:last-child i {
  background: var(--pink);
}

.svp-widget-chart strong {
  color: #2e2e2e;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.svp-chart-bars {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 3.2rem;
}

.svp-chart-bars i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 4px 4px 2px 2px;
  background: rgba(46, 46, 46, 0.14);
}

.svp-chart-bars i:last-child,
.svp-chart-bars i:nth-last-child(2) {
  background: var(--pink);
}

.svp-widget-stages ol {
  display: grid;
  gap: 0.45rem;
}

.svp-widget-stages li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(46, 46, 46, 0.5);
  font-size: 0.78rem;
  line-height: 1.2;
}

.svp-widget-stages li span {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(46, 46, 46, 0.25);
  border-radius: 50%;
}

.svp-widget-stages li.is-done {
  color: #2e2e2e;
}

.svp-widget-stages li.is-done span {
  border-color: #2e2e2e;
  background: #2e2e2e;
}

.svp-widget-stages li.is-now {
  color: var(--svp-ink);
  font-weight: 500;
}

.svp-widget-stages li.is-now span {
  border-color: var(--pink);
  background: var(--pink);
  animation: svp-ping 2.4s var(--ease-soft) infinite;
}

/* Product visuals (Growth Studio), drawn in the palette. */
.svp-pv-pruuv,
.svp-pv-swoppa {
  display: grid;
  gap: 0.8rem;
  width: min(86%, 20rem);
  padding: 1.1rem 1.2rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
  rotate: -3deg;
  transition:
    rotate 900ms var(--ease-settle),
    scale 900ms var(--ease-settle);
}

.svp-product:hover .svp-pv-pruuv,
.svp-product:hover .svp-pv-swoppa {
  rotate: 0deg;
  scale: 1.04;
}

.svp-pv-bars {
  display: flex;
  align-items: end;
  gap: 0.55rem;
  height: 6.5rem;
}

.svp-pv-bars span {
  display: flex;
  flex: 1;
  align-items: end;
  gap: 3px;
  height: 100%;
}

.svp-pv-bars i,
.svp-pv-bars b {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
}

.svp-pv-bars i {
  height: calc(var(--s) * 100%);
  background: rgba(46, 46, 46, 0.18);
}

.svp-pv-bars b {
  height: calc(var(--r) * 100%);
  background: var(--pink);
}

.svp-pv-key {
  display: flex;
  gap: 1rem;
}

.svp-pv-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(46, 46, 46, 0.6);
  font-size: 0.72rem;
  line-height: 1;
}

.svp-pv-key i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pink);
}

.svp-pv-key i.is-spend {
  background: rgba(46, 46, 46, 0.25);
}

.svp-pv-swoppa {
  justify-items: center;
  padding-bottom: 1.4rem;
  text-align: center;
  rotate: 3deg;
}

.svp-pv-swoppa {
  width: min(70%, 15rem);
}

.svp-pv-swoppa svg {
  width: 100%;
  max-width: 11rem;
  height: auto;
}

.svp-pv-swoppa path {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.svp-gauge-track {
  stroke: rgba(46, 46, 46, 0.1);
}

.svp-gauge-arc {
  stroke: var(--pink);
  stroke-dasharray: 252;
  stroke-dashoffset: 252;
  transition: stroke-dashoffset 1.6s var(--ease-soft) 300ms;
}

.is-in .svp-gauge-arc {
  stroke-dashoffset: 45;
}

.svp-gauge-label {
  margin-top: -2.6rem;
  color: rgba(46, 46, 46, 0.6);
  font-size: 0.72rem;
  line-height: 1;
}

.svp-gauge-value {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: #2e2e2e;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ================================================================
   STATEMENT — "Why it matters". One white card: the context on the
   left, and the intro's closing line split into its sentences on the
   right, one per row, each settling in after the last. Text stays
   grey; pink is only the dots.
   ================================================================ */

.svp-statement {
  padding: clamp(3rem, 7vw, 6rem) 0 var(--svp-section-y);
}

.svp-stance {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding: clamp(1.75rem, 4.5vw, 4rem);
  border: 1px solid rgba(46, 46, 46, 0.07);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(46, 46, 46, 0.06);
}

.svp-stance-context {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.svp-stance-context .svp-pill {
  margin-bottom: 0.4rem;
}

.svp-stance-context p:not(.svp-pill) {
  max-width: 28rem;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
}

.svp-stance > .svp-equation,
.svp-stance-lines {
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svp-stance-lines li {
  position: relative;
  padding: clamp(1rem, 1.6vw, 1.35rem) 0 clamp(1rem, 1.6vw, 1.35rem) 1.6rem;
  border-top: 1px solid rgba(46, 46, 46, 0.1);
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.svp-stance-lines li:first-child {
  padding-top: 0;
  border-top: 0;
}

.svp-stance-lines li:last-child {
  padding-bottom: 0;
}

/* The pink dot, sat on the first line's cap height. */
.svp-stance-lines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(1rem, 1.6vw, 1.35rem) + 0.42em);
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--pink);
}

.svp-stance-lines li:first-child::before {
  top: 0.42em;
}

/* "That's Leadly." signs it off: bigger, no bullet, pink full stop. */
.svp-stance-lines .svp-stance-sign {
  padding-left: 0;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: -0.04em;
}

.svp-stance-lines .svp-stance-sign::before {
  content: none;
}

.svp-reveal-ready .svp-stance-lines [data-svp-reveal] {
  transition-delay: calc(var(--i, 0) * 110ms);
}

.svp-word-dot {
  color: var(--pink);
  font: inherit;
}

@media (max-width: 900px) {
  .svp-stance {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    border-radius: 22px;
  }
}

/* ================================================================
   THE WORK — big editorial rows
   ================================================================ */

.svp-work {
  padding: 0 0 var(--svp-section-y);
}

.svp-rows {
  border-top: 1px solid var(--svp-line);
}

.svp-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1fr) 3.2rem;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 2.8vw, 2.4rem) 1.25rem;
  border-bottom: 1px solid var(--svp-line);
}

.svp-row::before {
  content: "";
  position: absolute;
  inset: 0.45rem 0;
  z-index: -1;
  border-radius: 24px;
  background: var(--svp-wash);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease-standard);
}

.svp-row:hover::before {
  transform: scaleX(1);
}

.svp-row-index {
  color: rgba(46, 46, 46, 0.4);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color var(--motion-base) ease;
}

.svp-row-title {
  color: #2e2e2e;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
  transition:
    color var(--motion-base) ease,
    translate 620ms var(--ease-standard);
}

.svp-row-copy {
  max-width: 30rem;
  color: rgba(46, 46, 46, 0.7);
  font-size: 1rem;
}

.svp-row-arrow {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgba(46, 46, 46, 0.14);
  border-radius: 50%;
  color: #2e2e2e;
  font-size: 1.15rem;
  line-height: 1;
  transition:
    background-color var(--motion-base) ease,
    border-color var(--motion-base) ease,
    color var(--motion-base) ease,
    rotate 620ms var(--ease-standard);
}

.svp-row:hover .svp-row-index,
.svp-row:hover .svp-row-title {
  color: var(--svp-ink);
}

.svp-row:hover .svp-row-title {
  translate: 0.6rem 0;
}

.svp-row:hover .svp-row-arrow {
  border-color: var(--svp-ink);
  background: var(--svp-ink);
  color: #fff;
  rotate: 45deg;
}

/* Scope — two slow tickers of everything the service covers. */
.svp-scope {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

.svp-scope-title {
  width: var(--boxed-guide-width);
  margin: 0 auto 1.5rem;
  color: rgba(46, 46, 46, 0.62);
  font-size: 1.02rem;
}

.svp-tickers {
  display: grid;
  gap: 0.8rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.svp-ticker {
  overflow: hidden;
  padding-block: 0.5rem 1.4rem;
}

.svp-ticker-track {
  display: flex;
  width: max-content;
  animation: svp-marquee 46s linear infinite;
}

.svp-ticker.is-reverse .svp-ticker-track {
  animation-direction: reverse;
  animation-duration: 54s;
}

.svp-tickers:hover .svp-ticker-track {
  animation-play-state: paused;
}

.svp-ticker-set {
  display: flex;
  gap: 0.8rem;
  padding-right: 0.8rem;
}

.svp-tick {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.6rem;
  padding: 0 1.5rem;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(46, 46, 46, 0.05);
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.svp-tick::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--svp-accent);
}

.svp-tick.is-tint {
  border: 0.9px dashed rgba(var(--svp-accent-rgb), 0.7);
  background: var(--svp-wash);
  color: var(--svp-ink);
}

/* ================================================================
   DARK BAND — copy with a diagram built for each service
   ================================================================ */

.svp-band {
  padding: 0.5rem 0;
}

.svp-band-panel {
  position: relative;
  width: min(1480px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  overflow: hidden;
  border-radius: var(--svp-panel-radius);
  background: #2e2e2e;
  color: var(--white);
}

.svp-band-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}

.svp-band-copy {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.svp-band-title {
  max-width: 11em;
  margin: 0.2rem 0 0.6rem;
  color: var(--white);
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.svp-band-copy p:not(.svp-pill) {
  max-width: 34rem;
  color: rgba(244, 244, 244, 0.68);
}

.svp-band-copy .svp-band-title + p {
  color: var(--white);
  font-size: clamp(1.12rem, 1.45vw, 1.3rem);
  line-height: 1.45;
}

.svp-band-head {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

.svp-band-head-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
}

.svp-band-head-split > div:first-child {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.svp-band-head-copy {
  display: grid;
  gap: 0.9rem;
}

.svp-band-head-copy p {
  color: rgba(244, 244, 244, 0.68);
}

.svp-visual {
  width: 100%;
  max-width: 32rem;
  justify-self: center;
}

/* Journey (Lead Generation): the rail fills as you scroll. */
.svp-journey {
  --p: 0;
  position: relative;
  padding-left: 2.6rem;
}

.svp-journey-rail {
  position: absolute;
  top: 1.6rem;
  bottom: 1.6rem;
  left: 0.72rem;
  width: 2px;
  border-radius: 2px;
  background: rgba(244, 244, 244, 0.12);
}

.svp-journey-rail span {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--p) * 100%);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--svp-accent), var(--pink));
  box-shadow: 0 0 14px rgba(var(--svp-accent-rgb), 0.6);
}

.svp-journey ol {
  display: grid;
  gap: 0.65rem;
}

.svp-journey-step {
  --on: clamp(0, calc(var(--p) * (var(--n) - 1) - var(--i) + 1), 1);
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(244, 244, 244, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  opacity: calc(0.4 + var(--on) * 0.6);
  transition: opacity 200ms linear;
}

.svp-journey-dot {
  position: absolute;
  top: 50%;
  left: -2.28rem;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(244, 244, 244, 0.3);
  border-radius: 50%;
  background: #2e2e2e;
}

.svp-journey-dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--svp-accent);
  opacity: var(--on);
  transform: scale(var(--on));
}

.svp-journey-name {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.svp-journey-note {
  color: rgba(244, 244, 244, 0.55);
  font-size: 0.85rem;
  line-height: 1.3;
}

.svp-journey-step.is-goal {
  border-color: rgba(255, 0, 153, calc(0.1 + var(--on) * 0.4));
  background: rgba(255, 0, 153, calc(var(--on) * 0.16));
}

/* Engine (SEO): three circles pull together into one. */
.svp-engine {
  position: relative;
  aspect-ratio: 1;
}

.svp-engine-ring {
  position: absolute;
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 244, 244, 0.26);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--svp-accent-rgb), 0.2), rgba(var(--svp-accent-rgb), 0.04) 70%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  transition:
    left 1.4s var(--ease-soft),
    top 1.4s var(--ease-soft);
}

.svp-engine-ring span {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.svp-engine-a { left: 18%; top: 22%; }
.svp-engine-b { left: 82%; top: 22%; }
.svp-engine-c { left: 50%; top: 86%; }

.svp-engine-ring span { position: relative; }

/* Each name sits in the part of its circle that no other circle covers */
.svp-engine-a span { left: -21%; top: -10%; }
.svp-engine-b span { left: 21%; top: -10%; }
.svp-engine-c span { left: 0; top: 27%; }

.svp-engine.is-in .svp-engine-a { left: 34%; top: 38%; }
.svp-engine.is-in .svp-engine-b { left: 66%; top: 38%; }
.svp-engine.is-in .svp-engine-c { left: 50%; top: 64%; }

/* The one place all three overlap is lit up. Three nested clips, one per circle, leave only the shared area. */
.svp-engine-hit,
.svp-engine-hit > span,
.svp-engine-hit > span > span {
  position: absolute;
  inset: 0;
  display: block;
}

.svp-engine-hit {
  clip-path: circle(27% at 34% 38%);
  opacity: 0;
  transition: opacity 900ms var(--ease-soft) 1.1s;
}

.svp-engine-hit > span {
  clip-path: circle(27% at 66% 38%);
}

.svp-engine-hit > span > span {
  clip-path: circle(27% at 50% 64%);
}

.svp-engine-hit i {
  position: absolute;
  inset: 0;
  display: block;
  background: radial-gradient(circle at 50% 48%, #ff2aa8, rgba(255, 0, 153, 0.9) 55%, rgba(255, 0, 153, 0.7));
}

.svp-engine.is-in .svp-engine-hit {
  opacity: 1;
}

.svp-engine-core {
  position: absolute;
  top: 45%;
  left: 50%;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 700ms var(--ease-soft) 1.3s;
}

/* Soft pink bloom around the lit area, behind the words */
.svp-engine-core::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 15rem;
  height: 15rem;
  background: radial-gradient(circle, rgba(255, 0, 153, 0.6), rgba(255, 0, 153, 0.22) 38%, transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.svp-engine.is-in .svp-engine-core {
  opacity: 1;
}

/* Loop (Sales & CRM): the journey as a ring with a dot orbiting it. */
.svp-loop {
  position: relative;
  aspect-ratio: 1;
  container-type: inline-size;
}

.svp-loop-ring,
.svp-loop-orbit {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
}

.svp-loop-ring {
  border: 1px dashed rgba(244, 244, 244, 0.24);
}

.svp-loop-orbit {
  animation: svp-spin 14s linear infinite;
}

.svp-loop-orbit span {
  position: absolute;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 18px rgba(255, 0, 153, 0.8);
}

.svp-loop-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(-37cqw);
}

.svp-loop-chip span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0 0.95rem;
  border: 1px solid rgba(244, 244, 244, 0.14);
  border-radius: 999px;
  background: #3a3a3a;
  color: var(--white);
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(calc(-360deg / var(--n) * var(--i))) scale(0.6);
  opacity: 0;
  transition:
    transform 700ms var(--ease-settle),
    opacity 400ms ease;
  transition-delay: calc(var(--i) * 90ms);
}

.svp-loop.is-in .svp-loop-chip span {
  transform: translate(-50%, -50%) rotate(calc(-360deg / var(--n) * var(--i))) scale(1);
  opacity: 1;
}

.svp-loop-chip.is-start span {
  border-color: transparent;
  background: var(--svp-accent);
}

.svp-loop-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9em;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* Several short sections in one band (Creative & Performance). */
.svp-gallery {
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  padding-block: 1.2rem 2.2rem;
}

.svp-gallery-track {
  display: flex;
  width: max-content;
  animation: svp-marquee 60s linear infinite;
}

.svp-gallery:hover .svp-gallery-track {
  animation-play-state: paused;
}

.svp-gallery-set {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 1rem;
}

.svp-gallery img {
  flex: 0 0 auto;
  width: clamp(11rem, 15vw, 14.5rem);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  rotate: -2.5deg;
}

.svp-gallery img:nth-child(even) {
  rotate: 2.5deg;
  translate: 0 1rem;
}

.svp-band-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1.5rem clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(2rem, 3.6vw, 3rem) 0;
  border-top: 1px solid rgba(244, 244, 244, 0.12);
}

.svp-band-index {
  padding-top: 0.5rem;
  color: var(--svp-accent);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

.svp-band-row-title {
  color: var(--white);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.svp-band-row-body {
  display: grid;
  gap: 0.9rem;
}

.svp-band-row-body p {
  color: rgba(244, 244, 244, 0.68);
}

.svp-band-row-body p:first-child {
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1.45;
}

/* ================================================================
   DUO — two cards, each with a small visual of its own
   ================================================================ */

.svp-duo {
  padding: var(--svp-section-y) 0 0;
}

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

.svp-duo-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.8rem, 3.2vw, 2.8rem);
  border: 1px solid rgba(46, 46, 46, 0.06);
  border-radius: var(--svp-card-radius);
  background: #fff;
  box-shadow: 0 22px 48px rgba(46, 46, 46, 0.07);
}

.svp-duo-title {
  max-width: 13em;
  margin-bottom: 0.5rem;
  color: #2e2e2e;
  font-size: clamp(1.9rem, 2.7vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.svp-duo-card p {
  color: rgba(46, 46, 46, 0.7);
}

.svp-duo-card p.svp-duo-lead {
  color: #2e2e2e;
  font-size: 1.12rem;
  line-height: 1.45;
}

.svp-duo-card.is-photo {
  padding: 0;
  overflow: hidden;
}

.svp-duo-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--svp-wash);
}

.svp-duo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s var(--ease-soft);
}

.svp-duo-card.is-photo:hover .svp-duo-photo img {
  scale: 1.04;
}

.svp-duo-photo .svp-sticker {
  position: absolute;
  bottom: 1.1rem;
  left: 1.1rem;
  rotate: -6deg;
}

.svp-duo-text {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
}

.svp-duo-card.is-wide {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.svp-duo-card.is-wide .svp-duo-photo {
  aspect-ratio: auto;
  min-height: 24rem;
}

.svp-duo-card.is-wide .svp-duo-text {
  justify-content: center;
  padding: clamp(2rem, 4.5vw, 4rem);
}

/* Metrics panel */
.svp-metrics {
  margin-top: auto;
  padding: 1.2rem 1.25rem 1.3rem;
  border-radius: 20px;
  background: #f6f6f8;
}

.svp-duo-card > p + .svp-metrics {
  margin-top: max(1rem, auto);
}

.svp-metrics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  color: rgba(46, 46, 46, 0.55);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svp-metrics-head span {
  font-size: inherit;
  line-height: 1;
}

.svp-metrics-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--svp-ink);
}

.svp-metrics-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--svp-accent);
  animation: svp-ping 2.4s var(--ease-soft) infinite;
}

.svp-metrics ul {
  display: grid;
  gap: 0.85rem;
}

.svp-metrics li {
  display: grid;
  gap: 0.4rem;
}

.svp-metrics li span {
  color: #2e2e2e;
  font-size: 0.88rem;
  line-height: 1.2;
}

.svp-metrics li i {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(46, 46, 46, 0.07);
}

.svp-metrics li i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--svp-accent), var(--svp-ink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease-soft);
  transition-delay: calc(300ms + var(--i) * 120ms);
}

.is-in .svp-metrics li i::after {
  transform: scaleX(1);
}

/* Timer (Out of Home) */
.svp-timer {
  position: relative;
  display: grid;
  place-items: center;
  width: 10rem;
  aspect-ratio: 1;
  margin: auto auto 2rem;
}

.svp-timer svg {
  position: absolute;
  inset: 0;
  rotate: -90deg;
}

.svp-timer circle {
  fill: none;
  stroke-width: 6;
}

.svp-timer-track {
  stroke: rgba(46, 46, 46, 0.08);
}

.svp-timer-arc {
  stroke: var(--svp-accent);
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
}

.is-in .svp-timer-arc {
  animation: svp-timer 3s linear infinite;
}

.svp-timer-value {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.svp-timer-value small {
  font-size: 0.45em;
}

.svp-timer-note {
  position: absolute;
  bottom: -1.9rem;
  color: rgba(46, 46, 46, 0.55);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Chain (Out of Home) */
.svp-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.svp-chain-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border: 0.9px dashed rgba(var(--svp-accent-rgb), 0.7);
  border-radius: 999px;
  background: var(--svp-wash);
  color: var(--svp-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 500ms ease,
    translate 700ms var(--ease-settle);
  transition-delay: calc(200ms + var(--i) * 160ms);
}

.svp-chain-chip:last-child {
  border-style: solid;
  border-color: transparent;
  background: var(--svp-ink);
  color: #fff;
}

.is-in .svp-chain-chip {
  opacity: 1;
  translate: 0 0;
}

.svp-chain-arrow {
  color: rgba(46, 46, 46, 0.35);
  font-size: 1rem;
}

/* ================================================================
   GROWTH STUDIO — situations and products
   ================================================================ */

.svp-situations {
  padding: 0 0 var(--svp-section-y);
}

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

.svp-situation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 17rem;
  padding: 1.6rem 1.6rem 1.9rem;
  border: 1px solid rgba(46, 46, 46, 0.06);
  border-radius: var(--svp-card-radius);
  background: #fff;
  box-shadow: 0 22px 48px rgba(46, 46, 46, 0.07);
}

.svp-reveal-ready .svp-situation {
  transition-delay: calc(var(--i) * 90ms);
}

.svp-situation .svp-sticker {
  align-self: flex-start;
  rotate: -4deg;
}

.svp-situation:nth-child(2) .svp-sticker {
  rotate: 3deg;
}

.svp-situation p {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.svp-situation-after {
  max-width: 44rem;
  margin: clamp(2.2rem, 4vw, 3rem) 0 0 auto;
  columns: 2 18rem;
  column-gap: 2.5rem;
}

.svp-situation-after p {
  break-inside: avoid;
  margin-bottom: 1rem;
  color: var(--text-soft);
}

.svp-situation-after p:last-child {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

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

.svp-product,
.svp-case {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(244, 244, 244, 0.1);
  border-radius: var(--svp-card-radius);
  background: rgba(255, 255, 255, 0.04);
}

.svp-product p,
.svp-case p {
  color: rgba(244, 244, 244, 0.68);
}

.svp-product-shot {
  display: grid;
  place-items: center;
  height: clamp(13rem, 20vw, 17rem);
  margin-bottom: 0.8rem;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
}

.svp-product-logo {
  align-self: flex-start;
  width: auto;
  height: 2.2rem;
  margin-bottom: 0.2rem;
  object-fit: contain;
  object-position: left center;
  /* The Swoppa "white" SVG ships without a fill, so it would draw
     black. Flatten both marks to white on the dark band. */
  filter: brightness(0) invert(1);
}

.svp-product-list {
  display: grid;
  gap: 0.1rem;
  margin: 0.2rem 0;
}

.svp-product-list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.35rem;
  border-bottom: 1px solid rgba(244, 244, 244, 0.1);
  color: var(--white);
  font-size: 0.96rem;
  line-height: 1.4;
}

.svp-product-list li::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--svp-accent);
}

.svp-product p.svp-product-outro {
  color: var(--white);
}

.svp-band-closing {
  max-width: 30em;
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.035em;
  text-align: center;
  text-wrap: balance;
}

/* ================================================================
   OUT OF HOME — billboard and campaigns
   ================================================================ */

.svp-cases-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 2rem clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}

.svp-cases-top .svp-band-head {
  margin-bottom: 0;
}








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

.svp-case-figure {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 1.1rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(244, 244, 244, 0.12);
}

.svp-case-figure strong {
  color: var(--svp-accent);
  font-size: clamp(2.3rem, 3.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.svp-case-figure span {
  color: rgba(244, 244, 244, 0.5);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.svp-case h3 {
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.svp-case p strong {
  color: var(--white);
}

/* ================================================================
   KEY WINS — big figures that count up
   ================================================================ */

.svp-wins {
  padding: var(--svp-section-y) 0 0;
}

.svp-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
}

.svp-figures-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.svp-figure {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(46, 46, 46, 0.14);
}

.svp-figure-value {
  color: #2e2e2e;
  font-size: clamp(3.4rem, 7.4vw, 6.8rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.svp-figures-3 .svp-figure-value {
  font-size: clamp(3rem, 5.6vw, 5.2rem);
}

.svp-figure-label {
  margin-top: 0.4rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.svp-figure p {
  max-width: 28rem;
  color: rgba(46, 46, 46, 0.66);
  font-size: 0.98rem;
}

/* ================================================================
   CTA — the homepage's closing scene
   ================================================================ */

/* Bottom padding keeps the button's pink glow (18px drop, 34px blur)
   inside <main>, which is overflow: clip — at 0 the glow was sliced off
   in a hard line under the button. */
.svp-cta {
  padding: var(--svp-section-y) 0 3.5rem;
}

.svp-cta-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.svp-cta-scene {
  width: min(100%, 50rem);
  /* The collage carries empty space under the objects. */
  margin-bottom: clamp(-3rem, -3vw, -1rem);
}

.svp-cta-scene img {
  display: block;
  width: 100%;
  height: auto;
  animation: svp-bob 8s ease-in-out infinite;
}

.svp-cta-copy {
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.svp-cta-title {
  margin-bottom: 0.4rem;
  color: #2e2e2e;
  font-size: clamp(3rem, 6.6vw, 6rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.svp-cta-copy p {
  max-width: 36rem;
  color: rgba(46, 46, 46, 0.7);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

.svp-cta-copy .svp-button {
  margin-top: 1.4rem;
}

/* ================================================================
   FAQs
   ================================================================ */

.svp-faq {
  position: relative;
  padding: var(--svp-section-y) 0 0;
}

.svp-faq-floater {
  position: absolute;
  right: calc((100% - var(--boxed-guide-width)) / 2 - 4.5rem);
  bottom: -3.5rem;
  z-index: 0;
  width: clamp(7rem, 11vw, 10rem);
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(255, 0, 153, 0.2));
  pointer-events: none;
  animation: svp-spin 38s linear infinite;
}

.svp-faq-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* styles.css places .faq-accordion in a named "list" area for the FAQ
   page; this grid has no named areas, so put it back in flow. */
.svp-faq-layout .faq-accordion {
  grid-area: auto;
}

.svp-faq-copy {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding-top: 4.5rem;
}

.svp-faq-copy .svp-heading {
  font-size: clamp(2.3rem, 3.8vw, 3.6rem);
}

.svp-faq-copy p:not(.svp-pill) {
  max-width: 22rem;
  color: var(--text-soft);
}

.svp-faq-copy a {
  color: #2e2e2e;
  text-decoration: underline;
  text-decoration-color: rgba(255, 0, 153, 0.5);
  text-underline-offset: 0.2em;
  font-size: inherit;
  line-height: inherit;
}

.svp-faq-copy a:hover,
.svp-faq-copy a:focus-visible {
  color: var(--pink);
}

.service-page .faq-answer p + p {
  margin-top: -0.35rem;
}

/* ================================================================
   MORE SERVICES — the homepage cards, smaller
   ================================================================ */

.svp-more {
  padding: var(--svp-section-y) 0;
}

.svp-more-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}

.svp-more-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.05rem;
  border: 1px solid rgba(46, 46, 46, 0.06);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(46, 46, 46, 0.06);
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) ease;
}

.svp-more-card:hover,
.svp-more-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(46, 46, 46, 0.1);
}

.svp-more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.svp-more-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--svp-wash);
  color: var(--svp-ink);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.svp-more-arrow {
  color: rgba(46, 46, 46, 0.45);
  font-size: 1.05rem;
  line-height: 1;
  transition:
    color var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-standard);
}

.svp-more-card:hover .svp-more-arrow,
.svp-more-card:focus-visible .svp-more-arrow {
  color: var(--svp-ink);
  transform: translate(2px, -2px);
}

.svp-more-title {
  margin: 1.4rem 0 1rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.svp-more-media {
  display: block;
  margin-top: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--svp-wash);
}

.svp-more-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 900ms var(--ease-soft);
}

.svp-more-card:hover .svp-more-media img {
  scale: 1.06;
}

/* ================================================================
   REVEAL — only hides once script.js has marked the page ready, so
   nothing is lost if the script fails to load.
   ================================================================ */

.svp-reveal-ready [data-svp-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 800ms var(--ease-soft),
    transform 900ms var(--ease-soft);
}

.svp-reveal-ready [data-svp-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ================================================================
   KEYFRAMES
   ================================================================ */

@keyframes svp-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
}

@keyframes svp-pop {
  from {
    opacity: 0;
    scale: 0.86;
  }
}

@keyframes svp-float-in {
  from {
    opacity: 0;
    scale: 0.8;
  }
}

@keyframes svp-sticker-in {
  from {
    opacity: 0;
    scale: 0.4;
  }
}

@keyframes svp-bob {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -12px;
  }
}

@keyframes svp-ground {
  0%,
  100% {
    opacity: 1;
    scale: 1;
  }

  50% {
    opacity: 0.7;
    scale: 0.92;
  }
}

@keyframes svp-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--svp-accent-rgb), 0.5);
  }

  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(var(--svp-accent-rgb), 0);
  }
}

@keyframes svp-marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes svp-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes svp-caret {
  50% {
    opacity: 0;
  }
}

@keyframes svp-bars {
  0%,
  100% {
    scale: 1 1;
  }

  50% {
    scale: 1 0.7;
  }
}

@keyframes svp-timer {
  from {
    stroke-dashoffset: 327;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes svp-sweep {
  0%,
  55% {
    left: -40%;
  }

  100% {
    left: 130%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-page main *,
  .service-page main *::before,
  .service-page main *::after {
    animation: none;
  }

  .svp-reveal-ready [data-svp-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .svp-words-ready .svp-word {
    opacity: 1;
  }

  .svp-ticker,
  .svp-gallery {
    overflow-x: auto;
  }
}

/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 1024px) {
  .svp-hero {
    min-height: 0;
  }

  .svp-hero-layout,
  .svp-band-layout,
  .svp-faq-layout,
  .svp-cases-top,
  .svp-band-head-split,
  .svp-section-head-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .svp-section-lead {
    justify-self: start;
  }

  .svp-hero-stage {
    justify-self: center;
    max-width: 32rem;
  }

  .svp-row {
    grid-template-columns: 3.5rem minmax(0, 1fr) 3rem;
  }

  .svp-row-copy {
    grid-column: 2 / 3;
  }

  .svp-row-arrow {
    grid-row: 1;
    grid-column: 3;
  }

  .svp-duo-grid,
  .svp-products-grid,
  .svp-cases-grid,
  .svp-situation-grid,
  .svp-figures-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .svp-duo-card.is-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .svp-duo-card.is-wide .svp-duo-photo {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .svp-situation {
    min-height: 0;
  }

  .svp-band-row {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .svp-band-row-body {
    grid-column: 2;
  }

  .svp-more-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .svp-faq-copy {
    position: static;
    padding-top: 0;
  }

  .svp-faq-floater {
    right: -2.5rem;
  }
}

/* ================================================================
   PHONE
   ================================================================ */

@media (max-width: 768px) {
  .service-page {
    --svp-section-y: 4.5rem;
    --svp-panel-radius: 28px;
  }

  .svp-hero {
    padding-top: 8rem;
  }

  .svp-hero-title {
    font-size: clamp(2.6rem, 11.5vw, 3.4rem);
  }

  .svp-hero-actions .svp-button {
    width: 100%;
  }

  .svp-hero-stage {
    margin-top: 1rem;
  }

  .svp-float {
    width: calc(var(--w) * 2.4%);
  }

  /* The built widgets carry text, so they need a readable minimum. */
  .svp-float:has(.svp-widget) {
    width: max(calc(var(--w) * 2.4%), 9.5rem);
  }

  .svp-widget-pipeline li {
    grid-template-columns: 3.8rem minmax(0, 1fr);
  }

  .svp-sticker {
    min-height: 28px;
    padding: 0.3rem 0.75rem;
    font-size: 13px;
  }

  .svp-band-panel {
    width: calc(100% - 1rem);
  }

  .svp-row {
    grid-template-columns: minmax(0, 1fr) 2.6rem;
    gap: 0.6rem 1rem;
    padding-inline: 0.75rem;
  }

  .svp-row-index {
    grid-column: 1 / -1;
  }

  .svp-row-title {
    grid-column: 1;
    font-size: clamp(2.2rem, 10vw, 2.9rem);
  }

  .svp-row-copy {
    grid-column: 1 / -1;
  }

  .svp-row-arrow {
    grid-row: 2;
    grid-column: 2;
    width: 2.6rem;
    height: 2.6rem;
  }

  .svp-tick {
    min-height: 3rem;
    padding: 0 1.1rem;
  }

  .svp-figures,
  .svp-figures-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .svp-band-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .svp-band-row-body {
    grid-column: auto;
  }

  .svp-loop-chip span {
    min-height: 2rem;
    padding: 0 0.7rem;
  }

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

  .svp-more-title {
    font-size: 1.1rem;
  }

  /* Too narrow for the category chip beside the arrow. */
  .svp-more-label {
    display: none;
  }

  .svp-more-head {
    justify-content: flex-end;
  }

  .svp-cta-copy .svp-button {
    width: 100%;
    min-width: 0;
  }
}

/* Footer wordmark on phones: the boxed page-guide width must not narrow it.
   Every inner page shows the same full-bleed wordmark as the homepage. */
@media (max-width: 720px) {
  .service-page .footer-wordmark-shell,
  .contact-page .footer-wordmark-shell,
  .company-page .footer-wordmark-shell {
    width: 100%;
  }
}

/* ================================================================
   GROWTH STUDIO — products fit on one screen (desktop)
   Pruuv and swoppa sit side by side and are sized against the
   viewport height, so the whole section reads at a glance instead of
   running long and cropping the visuals.
   ================================================================ */

@media (min-width: 1025px) {
  .svp-products .svp-band-panel {
    padding-block: clamp(1.4rem, 3.4vh, 2.4rem);
  }

  .svp-products .svp-band-head {
    margin-bottom: clamp(0.8rem, 2vh, 1.4rem);
    gap: 0.5rem 2rem;
  }

  .svp-products .svp-band-title {
    font-size: clamp(2.2rem, 4.4vh, 3.2rem);
  }

  .svp-products .svp-band-head-copy {
    gap: 0.5rem;
  }

  .svp-products .svp-band-head-copy p {
    font-size: 0.82rem;
    line-height: 1.42;
  }

  .svp-products .svp-products-grid {
    gap: 0.8rem;
  }

  .svp-products .svp-product {
    gap: 0.4rem;
    padding: 1rem 1.3rem 1.1rem;
  }

  .svp-products .svp-product-shot {
    height: clamp(5.6rem, 14.5vh, 8.2rem);
    margin-bottom: 0.1rem;
  }

  .svp-products .svp-pv-pruuv,
  .svp-products .svp-pv-swoppa {
    width: min(62%, 13rem);
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    scale: 0.58;
  }

  .svp-products .svp-product-logo {
    height: 1.7rem;
  }

  .svp-products .svp-product p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .svp-products .svp-product-list {
    margin: 0;
  }

  .svp-products .svp-product-list li {
    padding: 0.26rem 0 0.26rem 1.1rem;
    font-size: 0.78rem;
    line-height: 1.34;
  }

  .svp-products .svp-product-list li::before {
    top: 0.58rem;
    width: 6px;
    height: 6px;
  }

  .svp-products .svp-band-closing {
    margin-top: clamp(0.8rem, 2vh, 1.4rem);
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  }
}

/* A single case study sits centred instead of leaving two empty columns. */
.svp-cases-grid > .svp-case:only-child {
  grid-column: 1 / -1;
  width: min(100%, 44rem);
  justify-self: center;
}

/* ================================================================
   SALES & CRM — on stage (panel events)
   One row per event: the details on the left, its photos on the
   right as prints. Each print grows by its own aspect ratio (--r =
   width / height), so a row's photos share one height and none is
   cropped: portraits stay portrait, landscapes stay landscape. Hover
   straightens and lifts a print; a click opens it full size in the
   lightbox (script.js, "SALES & CRM — on stage").
   ================================================================ */

.svp-events {
  margin-top: clamp(4.5rem, 9vw, 8rem);
}

.svp-events-head {
  max-width: 44rem;
}

.svp-events-lead {
  max-width: 36rem;
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
}

.svp-events-list {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.svp-event {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-top: 1px solid rgba(46, 46, 46, 0.1);
}

.svp-event-head {
  display: grid;
  gap: 0.6rem;
  position: sticky;
  top: 7rem;
}

.svp-event-date {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.svp-event-name {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.svp-event-topic {
  max-width: 22rem;
  margin-top: 0.4rem;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.5;
}

.svp-event-topic span {
  display: block;
  width: fit-content;
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: 0.5px solid rgba(46, 46, 46, 0.88);
  border-radius: 999px;
  color: #2e2e2e;
  font-size: 0.8rem;
  line-height: 1;
}

.svp-event-prints {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  align-items: flex-start;
}

.svp-print {
  flex: var(--r) 1 0;
  min-width: 0;
  padding: 0.6rem 0.6rem 0;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(46, 46, 46, 0.12);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 450ms var(--ease-soft),
    box-shadow 450ms var(--ease-soft);
}

.svp-print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r);
  border-radius: 10px;
}

.svp-print-caption {
  display: block;
  padding: 0.7rem 0.2rem 0.8rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.svp-print:hover,
.svp-print:focus-visible {
  box-shadow: 0 22px 48px rgba(46, 46, 46, 0.18);
  transform: rotate(0deg) translateY(-6px);
}

.svp-print:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}

/* Lightbox: the photo at its own shape, as large as the screen allows. */
.svp-lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: transparent;
}

.svp-lightbox::backdrop {
  background: rgba(30, 30, 30, 0.92);
}

.svp-lightbox[open] {
  display: grid;
  place-items: center;
}

.svp-lightbox-figure {
  display: grid;
  gap: 1rem;
  justify-items: center;
  margin: 0;
}

.svp-lightbox-figure img {
  display: block;
  max-width: min(90vw, 1200px);
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  border-radius: 14px;
}

.svp-lightbox-figure figcaption {
  color: #f4f4f4;
  font-size: 1rem;
  text-align: center;
}

.svp-lightbox-figure figcaption strong {
  font-family: var(--font-display);
  font-weight: 700;
}

.svp-lightbox-btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(244, 244, 244, 0.3);
  border-radius: 50%;
  background: rgba(244, 244, 244, 0.08);
  color: #f4f4f4;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.svp-lightbox-btn:hover,
.svp-lightbox-btn:focus-visible {
  border-color: var(--pink);
  background: var(--pink);
}

.svp-lightbox-close {
  top: 1.25rem;
  right: 1.25rem;
}

.svp-lightbox-prev,
.svp-lightbox-next {
  top: 50%;
  translate: 0 -50%;
}

.svp-lightbox-prev {
  left: 1.25rem;
}

.svp-lightbox-next {
  right: 1.25rem;
}

@media (max-width: 900px) {
  .svp-event {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .svp-event-head {
    position: static;
  }

  .svp-lightbox-prev,
  .svp-lightbox-next {
    top: auto;
    bottom: 1.25rem;
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svp-print {
    transition: none;
  }
}

/* ================================================================
   SERVICE PAGES: NO GRADIENT FADES
   Flat surfaces only on the service pages: no pink haze behind the
   hero, no faded edges on the tickers or the "more services" slider,
   no sheen sweeping the billboard, and solid fills on the little UI
   bars. Scoped to the six service pages (.service-page but not
   .company-page), so the blog, Our Story and Team keep their own look. The hero ground shadow stays: it
   is what sits the 3D object on the page.
   ================================================================ */
.service-page:not(.company-page) .svp-hero-glow {
  display: none;
}

.service-page:not(.company-page) .svp-tickers {
  -webkit-mask-image: none;
  mask-image: none;
}

.service-page:not(.company-page) .svp-more-slider .srv-track-wrap {
  --srv-fade-left: 0px;
  --srv-fade-right: 0px;
}

.service-page:not(.company-page) .svp-engine-ring {
  background: rgba(var(--svp-accent-rgb), 0.08);
}



.service-page:not(.company-page) .svp-widget-pipeline li i {
  background: #2e2e2e;
}

.service-page:not(.company-page) .svp-metrics li i::after {
  background: var(--svp-accent);
}

.service-page:not(.company-page) .svp-journey-rail span {
  background: var(--pink);
}

/* ================================================================
   SERVICE PAGES: SCROLL MOTION
   A second layer on top of the [data-svp-reveal] fade, so sections
   do not all arrive the same way. Gated on body.svp-motion, which
   script.js ("SERVICE PAGES — scroll motion") only adds when motion
   is allowed, so without it everything simply shows.
   - Headings rise word by word from behind a mask (.svp-hw).
   - Dividers draw left to right: work rows, win figures, the
     "Why it matters" lines.
   - Work rows bring in index, title, copy, arrow in turn; figures
     and event prints stagger by --i.
   - Card photos wipe up and settle; the dark band panel opens out
     from a slight inset as it scrolls in (--enter, 0 to 1).
   Everything plays once (.is-shown).
   ================================================================ */
/* The site sets a size on every span; the word wrappers must not
   pick it up, so they take the heading's font. */
.svp-motion .svp-hw,
.svp-motion .svp-hw-in {
  font: inherit;
  letter-spacing: inherit;
}

.svp-motion .svp-hw {
  display: inline-block;
  overflow: hidden;
  /* The mask reaches past the letters on every side so tight tracking, capitals and descenders are never clipped; the negative margins cancel it out so spacing does not change. */
  padding: 0.14em 0.12em 0.2em;
  margin: -0.14em -0.12em -0.2em;
  vertical-align: top;
}

.svp-motion .svp-hw-in {
  display: inline-block;
  translate: 0 135%;
  transition: translate 900ms var(--ease-soft) calc(var(--w, 0) * 45ms);
}

.svp-motion .is-shown .svp-hw-in {
  translate: 0 0;
}

/* Dividers that draw in. */
.svp-motion .svp-row {
  border-bottom-color: transparent;
}

.svp-motion .svp-row::after,
.svp-motion .svp-figure::after,
.svp-motion .svp-stance-lines li:not(:first-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--svp-line, rgba(46, 46, 46, 0.12));
  transform-origin: left center;
  scale: 0 1;
  transition: scale 1.1s var(--ease-soft);
}

.svp-motion .svp-row::after {
  bottom: -1px;
}

.svp-motion .svp-figure {
  position: relative;
  border-top-color: transparent;
}

.svp-motion .svp-figure::after,
.svp-motion .svp-stance-lines li:not(:first-child)::after {
  top: -1px;
}

.svp-motion .svp-stance-lines li:not(:first-child) {
  border-top-color: transparent;
}

.svp-motion .is-shown.svp-row::after,
.svp-motion .is-shown.svp-figure::after,
.svp-motion .svp-stance-lines li.is-shown::after {
  scale: 1 1;
}

/* Work rows: their parts arrive in order. */
.svp-motion .svp-row > * {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 700ms var(--ease-soft),
    translate 800ms var(--ease-soft);
}

.svp-motion .svp-row > :nth-child(2) { transition-delay: 80ms; }
.svp-motion .svp-row > :nth-child(3) { transition-delay: 160ms; }
.svp-motion .svp-row > :nth-child(4) { transition-delay: 240ms; }

.svp-motion .svp-row.is-shown > * {
  opacity: 1;
  translate: 0 0;
}

/* Win figures, one after another. */
.svp-motion .svp-figure > * {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 700ms var(--ease-soft) calc(var(--i, 0) * 120ms + 150ms),
    translate 800ms var(--ease-soft) calc(var(--i, 0) * 120ms + 150ms);
}

.svp-motion .svp-figure::after {
  transition-delay: calc(var(--i, 0) * 120ms);
}

.svp-motion .svp-figure.is-shown > * {
  opacity: 1;
  translate: 0 0;
}

/* Card photos wipe up into their frame and settle. Triggered from
   the card: a fully clipped photo never counts as on screen. */
.svp-motion .svp-duo-photo {
  clip-path: inset(100% 0 0 0 round 0);
  transition: clip-path 1.1s var(--ease-soft);
}

.svp-motion .svp-duo-photo img {
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-soft);
}

.svp-motion .is-shown .svp-duo-photo {
  clip-path: inset(0 0 0 0 round 0);
}

.svp-motion .is-shown .svp-duo-photo img {
  transform: none;
}

/* Event prints drop in and settle into their tilt. */
.svp-motion .svp-print {
  opacity: 0;
  translate: 0 40px;
  scale: 0.94;
  transition:
    opacity 700ms var(--ease-soft) calc(var(--i, 0) * 140ms),
    translate 900ms var(--ease-soft) calc(var(--i, 0) * 140ms),
    scale 900ms var(--ease-soft) calc(var(--i, 0) * 140ms),
    transform 450ms var(--ease-soft),
    box-shadow 450ms var(--ease-soft);
}

.svp-motion .svp-print.is-shown {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* The dark band opens out to full width as it scrolls in. */
.svp-motion .svp-band-panel {
  scale: calc(0.94 + var(--enter, 1) * 0.06);
  border-radius: calc(var(--svp-panel-radius) + (1 - var(--enter, 1)) * 24px);
}

/* A wide card sits on its own row under the pair above it; stacked cards share one gap */
.svp-duo-grid > .svp-duo-card.is-wide {
  grid-column: 1 / -1;
}

.svp-duo-stack {
  display: grid;
  gap: 1rem;
}

/* In the duo grid, a wide photo card lines up with the two cards above it: the photo is exactly the first column */
@media (min-width: 1025px) {
  .svp-duo-grid > .svp-duo-card.is-wide {
    grid-template-columns: calc((100% - 1rem) / 2) minmax(0, 1fr);
  }

  .svp-duo-grid > .svp-duo-card.is-wide .svp-duo-text {
    padding-left: clamp(2rem, 4vw, 3.5rem);
  }

  .svp-duo-card.is-landscape .svp-duo-photo img {
    object-position: 38% 50%;
  }
}

/* A photo print in the hero stage (SEO). The whole photo shows, framed like an instant print. */
.svp-polaroid {
  position: absolute;
  top: 46%;
  left: 57%;
  z-index: 1;
  width: 56%;
  padding: 3.2% 3.2% 11%;
  background: #fff;
  border-radius: 4px;
  box-shadow:
    0 2px 6px rgba(46, 46, 46, 0.1),
    0 26px 50px rgba(46, 46, 46, 0.18);
  transform: translate(-50%, -50%) rotate(-4deg);
  translate: 0 calc(var(--p, 0) * -50px);
  animation: svp-pop 1.2s var(--ease-settle) 120ms both;
}

.svp-polaroid img {
  display: block;
  width: 100%;
  height: auto;
}

/* SEO hero: one tight group. The cards and tags tuck in close to the print instead of drifting to the edges. */
.svp-polaroid ~ .svp-float-tl {
  top: 0;
  left: -9%;
}

.svp-polaroid ~ .svp-float-br {
  right: 3%;
  bottom: -3%;
}

.svp-polaroid ~ .svp-sticker-2 {
  bottom: 36%;
  left: 14%;
}

.svp-polaroid ~ .svp-sticker-3 {
  bottom: 9%;
  left: 35%;
}

/* Service page hero: title about 4-5px smaller and a quieter line under it (the same size the Team page uses) */
@media (min-width: 769px) {
  .service-page:not(.company-page) .svp-hero-title {
    font-size: clamp(2.5rem, min(4.5vw, 8vh), 4.1rem);
  }

  .service-page:not(.company-page) .svp-hero-lead {
    max-width: 28rem;
    font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  }
}

@media (max-width: 768px) {
  .service-page:not(.company-page) .svp-hero-title {
    font-size: clamp(2.3rem, 10.6vw, 3.1rem);
  }

  .service-page:not(.company-page) .svp-hero-lead {
    font-size: 1rem;
  }
}

/* "That's Leadly." stands on its own: no mark in front of it */
.svp-equation .eq-result .eq-op {
  display: none;
}

/* The dark bands arrive full-bleed and pull in to a rounded box as they scroll up, with the same numbers as the homepage case study
   (.cs-panel). --shrink-progress (0 = full bleed, 1 = boxed) is written by the SHRINK PANELS script. */
.svp-band[data-shrink-panel] {
  --cs-gutter: clamp(1.25rem, 3vw, 3rem);
  --cs-inset-max: clamp(0.75rem, 2.75vw, 2.75rem);
  padding: 0;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

.svp-motion .svp-band[data-shrink-panel] .svp-band-panel,
.svp-band[data-shrink-panel] .svp-band-panel {
  width: auto;
  margin-inline: calc(
    var(--shrink-progress, 1) *
      min(
        var(--cs-inset-max),
        max(0px, (100% - var(--boxed-guide-width) - 2 * var(--cs-gutter))) / 2
      )
  );
  border-radius: calc(min(var(--shrink-progress, 1) * 8, 1) * 42px);
  scale: none;
}

@media (max-width: 768px) {
  .svp-band[data-shrink-panel] .svp-band-panel,
  .svp-motion .svp-band[data-shrink-panel] .svp-band-panel {
    margin-inline: calc(var(--shrink-progress, 1) * 0.75rem);
    border-radius: calc(min(var(--shrink-progress, 1) * 8, 1) * 28px);
  }
}

/* A cut-out with no shadow under it: no drop shadow on the picture and no ground shadow */
.svp-hero-stage.is-flat .svp-hero-object {
  filter: none;
}

.svp-hero-stage.is-flat .svp-hero-ground {
  display: none;
}

/* FAQ asterisk: anchored from the top of the section, so opening an answer (which makes the section taller) never moves it */
html body .svp-faq .svp-faq-floater {
  top: 20rem;
  bottom: auto;
}

@media (max-width: 1024px) {
  html body .svp-faq .svp-faq-floater {
    top: 28rem;
  }
}

/* "That's Leadly." and its full stop wait for the lines above them instead of showing first */
@media (prefers-reduced-motion: no-preference) {
  html.svp-service-page .svp-equation:not(.eq-ready) .eq-result {
    opacity: 0;
  }

  .svp-equation.eq-ready .eq-dot {
    opacity: 0;
  }

  .svp-equation.eq-ready.is-in .eq-dot {
    opacity: 1;
    transition: opacity 0.3s ease 1.5s;
  }
}

/* The asterisk stays exactly where it is. Its scroll drift was driven by the section's height, so opening an answer nudged it. */
html.svp-service-page body .svp-faq .svp-faq-floater {
  translate: none;
}

/* On stage: the header sits on the left and the two events sit beside it, each as its photos with the details underneath.
   Smaller prints, no empty space next to the title. */
.svp-events-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.svp-events-layout .svp-heading {
  font-size: clamp(2rem, 3.3vw, 3.1rem);
}

.svp-events-layout .svp-events-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin-top: 0;
}

.svp-events-layout .svp-event {
  display: flex;
  flex-direction: column-reverse;
  gap: 1.1rem;
  padding: 0;
  border-top: 0;
}

.svp-events-layout .svp-event-head {
  position: static;
  gap: 0.35rem;
}

.svp-events-layout .svp-event-name {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

.svp-events-layout .svp-event-topic {
  max-width: none;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.svp-events-layout .svp-event-topic span {
  margin-bottom: 0.4rem;
}

.svp-events-layout .svp-event-prints {
  gap: 0.7rem;
}

.svp-events-layout .svp-print {
  padding: 0.4rem 0.4rem 0;
  border-radius: 12px;
}

.svp-events-layout .svp-print img {
  border-radius: 8px;
}

.svp-events-layout .svp-print-caption {
  padding: 0.5rem 0.1rem 0.6rem;
  font-size: 0.78rem;
}

@media (max-width: 1024px) {
  .svp-events-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .svp-events-layout .svp-events-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* SEO: the warrior clip from the blog hub, a page decoration on the right-hand side where two sections meet. It takes no space of its own:
   it is out of the flow, so the sections around it keep their spacing. Transparent video, shown whole; the blog-hero-video class lets the
   page script swap in the MP4 for Safari, which drops the alpha. */
.svp-cta {
  position: relative;
}

.svp-cta-video {
  position: absolute;
  z-index: 2;
  top: clamp(-11rem, -10vw, -7rem);
  right: calc((100% - var(--boxed-guide-width)) / 2 - 7rem);
  width: clamp(12rem, 22vw, 20rem);
  margin: 0;
  /* Safari plays the opaque MP4; darken drops its pale backdrop against the page */
  mix-blend-mode: darken;
  pointer-events: none;
  animation: svp-art-float 6s ease-in-out infinite;
}

.svp-cta-video .blog-hero-video {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

@media (max-width: 1024px) {
  .svp-cta-video {
    top: clamp(-6rem, -12vw, -3.5rem);
    right: -0.5rem;
    width: clamp(8.5rem, 30vw, 13rem);
  }
}

@keyframes svp-art-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-14px) rotate(1.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svp-cta-video {
    animation: none;
  }
}

/* "That's Leadly." is the last thing to appear: it waits for the lines above and for the rule to finish drawing (about 2s after the block arrives) */
@media (prefers-reduced-motion: no-preference) {
  .svp-equation.eq-ready .eq-result {
    opacity: 0;
    transition: opacity 0.35s var(--eq-ease) 0.9s;
  }

  .svp-equation.eq-ready.is-in .eq-result {
    opacity: 1;
  }

  .svp-equation.eq-ready .eq-result .eq-w {
    transition: transform 0.7s var(--eq-ease) calc(0.95s + var(--w, 0) * 55ms);
  }
}

/* The search bar icon is a magnifying glass: a lens with a handle */
.svp-search-icon {
  position: relative;
  flex: 0 0 auto;
  margin-right: 4px;
}

.svp-search-icon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  width: 6px;
  height: 1.7px;
  margin: -2.5px 0 0 -2px;
  border-radius: 2px;
  background: rgba(46, 46, 46, 0.55);
  transform: rotate(45deg);
  transform-origin: left center;
}

/* Event prints are real polaroids: cream card, deep bottom border, soft sheen, handwritten caption */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://leadly-website.pages.dev/assets/caveat-600-latin.woff2") format("woff2");
}

.svp-print,
.svp-events-layout .svp-print {
  position: relative;
  padding: 0.7rem 0.7rem 0;
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%),
    #fbfaf6;
  box-shadow:
    0 1px 1px rgba(46, 46, 46, 0.18),
    0 10px 22px rgba(46, 46, 46, 0.16),
    0 24px 40px rgba(46, 46, 46, 0.1);
}

.svp-print img,
.svp-events-layout .svp-print img {
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(46, 46, 46, 0.12);
  filter: saturate(0.92) contrast(1.03);
}

.svp-print-caption,
.svp-events-layout .svp-print-caption {
  display: flex;
  align-items: center;
  min-height: 3.1rem;
  padding: 0.35rem 0.2rem 0.5rem;
  color: rgba(46, 46, 46, 0.88);
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.05;
  transform: rotate(-1.2deg);
}

/* Creative rows: each row draws its top rule, then the number, title and copy arrive one after another */
@media (prefers-reduced-motion: no-preference) {
  .svp-reveal-ready .svp-band-row[data-svp-reveal] {
    transform: none;
    border-top-color: transparent;
    position: relative;
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(244, 244, 244, 0.22);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1100ms var(--ease-soft);
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal].is-in::before {
    transform: scaleX(1);
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal] .svp-band-index,
  .svp-reveal-ready .svp-band-row[data-svp-reveal] .svp-band-row-title,
  .svp-reveal-ready .svp-band-row[data-svp-reveal] .svp-band-row-body > * {
    opacity: 0;
    translate: 0 36px;
    transition:
      opacity 700ms var(--ease-soft),
      translate 900ms var(--ease-soft);
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal] .svp-band-index {
    translate: -16px 0;
    transition-delay: 150ms;
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal] .svp-band-row-title {
    translate: 0 56px;
    transition-delay: 250ms;
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal] .svp-band-row-body > :nth-child(1) {
    transition-delay: 420ms;
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal] .svp-band-row-body > :nth-child(2) {
    transition-delay: 540ms;
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal] .svp-band-row-body > :nth-child(n + 3) {
    transition-delay: 660ms;
  }

  .svp-reveal-ready .svp-band-row[data-svp-reveal].is-in .svp-band-index,
  .svp-reveal-ready .svp-band-row[data-svp-reveal].is-in .svp-band-row-title,
  .svp-reveal-ready .svp-band-row[data-svp-reveal].is-in .svp-band-row-body > * {
    opacity: 1;
    translate: 0 0;
  }
}

/* Clean polaroids: no caption on the card. The text stays for screen readers and the lightbox, and the deep bottom border stays. */
.svp-print,
.svp-events-layout .svp-print {
  padding-bottom: clamp(2.2rem, 3.4vw, 3rem);
}

.svp-print-caption,
.svp-events-layout .svp-print-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bigger polaroids: the heading sits above, and the two events share the full width so each print is roughly 40% larger */
.svp-events-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.svp-events-layout .svp-events-list {
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
}

.svp-events-layout .svp-event-prints {
  gap: 1rem;
}

/* FAQ asterisk sits 40px further right */
html body .svp-faq .svp-faq-floater {
  right: calc((100% - var(--boxed-guide-width)) / 2 - 7rem);
}

@media (max-width: 1024px) {
  html body .svp-faq .svp-faq-floater {
    right: -5rem;
  }
}

/* On stage: the title sits on the left and the polaroids pile up beside it, overlapping and tossed at different angles */
@media (min-width: 1025px) {
  .svp-events-layout {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  .svp-events-layout .svp-events-list {
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
  }

  .svp-events-layout .svp-event-prints {
    gap: 0;
    padding: 1rem 0 1.25rem;
  }

  .svp-events-layout .svp-print {
    flex: var(--r) 1 0;
  }

  .svp-events-layout .svp-print + .svp-print {
    margin-left: -3.2rem;
  }

  .svp-events-layout .svp-event:nth-child(1) .svp-print:nth-child(1) {
    --tilt: -6deg;
    margin-top: 1.6rem;
    z-index: 1;
  }

  .svp-events-layout .svp-event:nth-child(1) .svp-print:nth-child(2) {
    --tilt: 4.5deg;
    margin-top: -0.4rem;
    z-index: 2;
  }

  .svp-events-layout .svp-event:nth-child(2) .svp-print:nth-child(1) {
    --tilt: 3.5deg;
    margin-top: 0.2rem;
    z-index: 1;
  }

  .svp-events-layout .svp-event:nth-child(2) .svp-print:nth-child(2) {
    --tilt: -5.5deg;
    margin-top: 2.2rem;
    z-index: 2;
  }

  .svp-events-layout .svp-print:hover,
  .svp-events-layout .svp-print:focus-visible {
    z-index: 5;
  }
}

@media (max-width: 1024px) {
  .svp-events-layout .svp-print + .svp-print {
    margin-left: -1.6rem;
  }

  .svp-events-layout .svp-event-prints {
    gap: 0;
  }

  .svp-events-layout .svp-print:nth-child(odd) {
    --tilt: -4deg;
  }

  .svp-events-layout .svp-print:nth-child(even) {
    --tilt: 4deg;
    margin-top: 1rem;
  }
}

/* Rotation is deliberately uneven: no two neighbouring pieces lean the same way or by the same amount */
.svp-polaroid {
  transform: translate(-50%, -50%) rotate(3.5deg);
}

.svp-polaroid ~ .svp-float-tl {
  --r: -9deg;
}

.svp-polaroid ~ .svp-float-br {
  --r: 6.5deg;
}

.svp-polaroid ~ .svp-sticker-1 {
  rotate: 11deg;
}

.svp-polaroid ~ .svp-sticker-2 {
  rotate: -13deg;
}

.svp-polaroid ~ .svp-sticker-3 {
  rotate: 4deg;
}

@media (min-width: 1025px) {
  .svp-events-layout .svp-event:nth-child(1) .svp-print:nth-child(1) {
    --tilt: -9deg;
  }

  .svp-events-layout .svp-event:nth-child(1) .svp-print:nth-child(2) {
    --tilt: 3deg;
  }

  .svp-events-layout .svp-event:nth-child(2) .svp-print:nth-child(1) {
    --tilt: 7deg;
  }

  .svp-events-layout .svp-event:nth-child(2) .svp-print:nth-child(2) {
    --tilt: -3.5deg;
  }
}

/* SEO closing section: copy left-aligned, with the video sitting lower on the right, facing it */
.svp-cta:has(> .svp-cta-video) .svp-cta-inner {
  justify-items: start;
  text-align: left;
}

.svp-cta:has(> .svp-cta-video) .svp-cta-copy {
  justify-items: start;
}

.svp-cta:has(> .svp-cta-video) .svp-cta-title {
  text-wrap: pretty;
}

.svp-cta:has(> .svp-cta-video) .svp-cta-video {
  top: 50%;
  translate: 0 -46%;
  right: calc((100% - var(--boxed-guide-width)) / 2);
  width: clamp(15rem, 30vw, 27rem);
}

@media (max-width: 1024px) {
  .svp-cta:has(> .svp-cta-video) {
    display: flex;
    flex-direction: column;
  }

  .svp-cta:has(> .svp-cta-video) .svp-cta-video {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    translate: none;
    align-self: flex-end;
    margin-top: 1rem;
    margin-right: 1rem;
    width: clamp(10rem, 44vw, 16rem);
  }
}

/* SEO hero: the search card drops lower and tucks over the corner of the print */
.svp-polaroid ~ .svp-float-tl {
  top: 11%;
  left: -3%;
}

/* Creative gallery: the image shadows were clipped into a hard edge under the row, and the first row drew a rule right below it. Both go. */
.svp-gallery {
  margin-bottom: 0;
  padding-block: 1.2rem 5.5rem;
}

.svp-band-many .section-shell > .svp-band-row:first-child,
.svp-reveal-ready .svp-band-many .section-shell > .svp-band-row[data-svp-reveal]:first-child {
  border-top: 0;
}

.svp-reveal-ready .svp-band-many .section-shell > .svp-band-row[data-svp-reveal]:first-child::before {
  content: none;
}

/* Miles the mascot sits right beside his name in Key wins */
.svp-miles-value {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
}

.svp-miles-img {
  display: block;
  width: auto;
  height: 1.5em;
  margin-block: -0.35em;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 10px rgba(46, 46, 46, 0.18));
}

/* SEO closing section: the title stacks on two lines and the video stays fully inside the page */
.svp-cta:has(> .svp-cta-video) .svp-cta-video {
  width: clamp(14rem, 26vw, 24rem);
  right: max(1rem, calc((100% - var(--boxed-guide-width)) / 2));
}

.svp-cta:has(> .svp-cta-video) .svp-cta-title {
  text-align: left;
  text-wrap: nowrap;
}

/* The last word of the title ("something.") always starts a new line, flush left */
.svp-cta:has(> .svp-cta-video) .svp-cta-title .svp-hw:last-child {
  display: block;
}

/* Miles: smaller, and the soft floor shadow comes from the artwork itself, so no extra filter */
.svp-miles-img {
  height: 1.05em;
  margin-block: -0.2em;
  filter: none;
}

/* Mobile: more breathing room between the text and the edge of the dark box. Only the content narrows; the box itself animates exactly as before. */
@media (max-width: 768px) {
  .service-page .svp-band-panel .section-shell {
    width: calc(var(--boxed-guide-width) - 2rem);
  }
}

/* Mobile: the SEO closing video sits centred under the copy */
@media (max-width: 1024px) {
  .svp-cta:has(> .svp-cta-video) .svp-cta-video {
    align-self: center;
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  .svp-cta:has(> .svp-cta-video) .svp-cta-video {
    right: auto;
  }
}

/* Mobile: the SEO closing video sits centred under the copy */
@media (max-width: 1024px) {
  .svp-cta:has(> .svp-cta-video) .svp-cta-video {
    right: auto;
  }
}

/* Mobile SEO hero: the cards, print and tags stay inside the frame and fit their content */
@media (max-width: 768px) {
  .svp-polaroid {
    left: 52%;
    top: 45%;
    width: 64%;
    transform: translate(-50%, -50%) rotate(2deg);
  }

  .svp-polaroid ~ .svp-float-tl {
    top: 2%;
    left: 0;
    width: 50%;
    --r: -5deg;
  }

  .svp-polaroid ~ .svp-float-br {
    right: 1%;
    bottom: 2%;
    width: 54%;
    --r: 4deg;
  }

  .svp-polaroid ~ .svp-sticker-1 {
    top: 5%;
    right: 2%;
  }

  .svp-polaroid ~ .svp-sticker-2 {
    bottom: 34%;
    left: 4%;
  }

  .svp-polaroid ~ .svp-sticker-3 {
    bottom: 1%;
    left: 8%;
  }

  .svp-hero-stage .svp-widget {
    font-size: 12px;
  }

  .svp-hero-stage .svp-widget-top {
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
  }
}

/* Service page heroes: the copy is centred on mobile only. Everything larger stays left aligned. */
@media (max-width: 768px) {
  .service-page:not(.company-page) .svp-hero-copy {
    justify-items: center;
    text-align: center;
  }

  .service-page:not(.company-page) .svp-hero-lead {
    margin-inline: auto;
  }

  .service-page:not(.company-page) .svp-hero-actions {
    justify-content: center;
  }
}

/* Nothing is cropped: the equation word masks and the button label masks reach slightly past their letters, with matching negative margins so layout is unchanged. */
html .service-page .eq-wm {
  padding: 0.14em 0.1em 0.2em;
  margin: -0.14em -0.1em -0.2em;
}

.service-page .hero-button-text {
  padding-inline: 0.1em;
  margin-inline: -0.1em;
}

/* Closing "Let's build something" title: smaller, so it no longer dominates the section */
.service-page .svp-cta-title {
  font-size: clamp(2.25rem, 4.4vw, 3.9rem);
}

/* "More of the work" heading matches the closing "Let's build something" title */
.service-page .svp-more-slider .srv-heading {
  font-size: clamp(2.25rem, 4.4vw, 3.9rem);
}

/* Lead Generation hero card: new enquiries arriving, sorted into the ones worth having and the ones that are not */
.svp-widget-leads ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svp-widget-leads li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(46, 46, 46, 0.08);
}

.svp-widget-leads li:first-child {
  border-top: 0;
}

.svp-lead-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(46, 46, 46, 0.1);
}

.svp-widget-leads .is-good .svp-lead-dot {
  background: var(--svp-accent);
}

.svp-lead-lines {
  display: grid;
  gap: 0.3rem;
}

.svp-lead-lines b,
.svp-lead-lines i {
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(46, 46, 46, 0.14);
}

.svp-lead-lines b {
  width: 85%;
}

.svp-lead-lines i {
  width: 55%;
  background: rgba(46, 46, 46, 0.08);
}

.svp-widget-leads em {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(46, 46, 46, 0.08);
  color: rgba(46, 46, 46, 0.6);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.svp-widget-leads .is-good em {
  background: var(--svp-accent);
  color: #fff;
}

/* The full stop after a hero title sits a touch further from the last letter (tight tracking was pulling it into the "t") */
.service-page:not(.company-page) .svp-hero-title .contact-title-dot {
  margin-left: 0.05em;
}

/* Creative hero: three designed posts from the team, stacked and tipped, with the format tags around them */
.svp-ad-stack {
  position: absolute;
  inset: 4% 2% 6%;
}

.svp-ad {
  position: absolute;
  display: block;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(46, 46, 46, 0.22);
  animation:
    svp-pop 1.2s var(--ease-settle) both,
    svp-bob 8s ease-in-out infinite;
}

.svp-ad-1 {
  top: 12%;
  left: 2%;
  z-index: 1;
  width: 41%;
  rotate: -9deg;
  animation-delay: 120ms, 0s;
}

.svp-ad-3 {
  top: 0;
  left: 52%;
  z-index: 1;
  width: 38%;
  rotate: 10deg;
  animation-delay: 300ms, -2s;
}

.svp-ad-2 {
  top: 30%;
  left: 27%;
  z-index: 2;
  width: 44%;
  rotate: 3deg;
  animation-delay: 480ms, -4s;
}

@media (max-width: 768px) {
  .svp-ad {
    border-radius: 14px;
    box-shadow: 0 18px 36px rgba(46, 46, 46, 0.2);
  }
}

/* Creative hero v2: the team's landing page hero, a designed organic post and a looping video */
.svp-ad-lp {
  top: 6%;
  left: 0;
  z-index: 1;
  width: 94%;
  aspect-ratio: auto;
  rotate: -3deg;
  object-fit: contain;
  border-radius: 16px;
  animation-delay: 120ms, 0s;
}

.svp-ad-organic {
  bottom: 2%;
  left: 3%;
  z-index: 2;
  width: 31%;
  rotate: -7deg;
  animation-delay: 360ms, -3s;
}

.svp-ad-video {
  right: 1%;
  bottom: -2%;
  z-index: 3;
  width: 30%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  rotate: 5deg;
  animation-delay: 560ms, -5s;
}

.svp-ad-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svp-ad-stack ~ .svp-sticker-1 {
  top: 3%;
  right: 3%;
}

.svp-ad-stack ~ .svp-sticker-2 {
  top: auto;
  right: 33%;
  bottom: 22%;
  left: auto;
}

.svp-ad-stack ~ .svp-sticker-3 {
  bottom: 6%;
  left: 38%;
}

/* Creative hero v3: a bold designed post, the landing page hero and a UGC-style clip as a GIF */
.svp-ad.svp-ad-organic {
  top: 20%;
  left: 0;
  z-index: 1;
  width: 53%;
  aspect-ratio: 1 / 1;
  rotate: -6deg;
  animation-delay: 120ms, 0s;
}

.svp-ad.svp-ad-lp {
  top: 0;
  left: 53%;
  z-index: 2;
  width: 31%;
  aspect-ratio: 3 / 4;
  rotate: 5deg;
  object-fit: cover;
  animation-delay: 320ms, -3s;
}

.svp-ad.svp-ad-gif {
  top: 40%;
  right: 0;
  left: auto;
  z-index: 3;
  width: 29%;
  aspect-ratio: 9 / 16;
  rotate: 4deg;
  object-fit: cover;
  animation-delay: 520ms, -5s;
}

.svp-ad-stack ~ .svp-sticker-1 {
  top: 2%;
  right: 2%;
}

.svp-ad-stack ~ .svp-sticker-2 {
  top: auto;
  right: auto;
  bottom: 24%;
  left: 40%;
}

.svp-ad-stack ~ .svp-sticker-3 {
  bottom: 5%;
  left: 8%;
}

/* Creative hero v4: two phone mockups (a social feed post and a UGC-style clip) plus a designed card */
.svp-phone {
  position: absolute;
  aspect-ratio: 9 / 19;
  padding: 0.4rem;
  border-radius: 2.1rem;
  background: #1c1c1c;
  box-shadow:
    inset 0 0 0 2px #3b3b3b,
    0 30px 60px rgba(46, 46, 46, 0.28);
  animation:
    svp-pop 1.2s var(--ease-settle) both,
    svp-bob 8s ease-in-out infinite;
}

.svp-phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.7rem;
  background: #fff;
}

.svp-phone-notch {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  z-index: 3;
  width: 28%;
  height: 0.95rem;
  border-radius: 999px;
  background: #111;
  translate: -50% 0;
}

.svp-phone-clip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svp-feed-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 2.1rem 0.8rem 0.55rem;
}

.svp-feed-avatar {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--pink);
}

.svp-feed-lines {
  display: grid;
  flex: 1;
  gap: 0.25rem;
}

.svp-feed-lines b,
.svp-feed-lines i {
  display: block;
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(46, 46, 46, 0.16);
}

.svp-feed-lines b {
  width: 55%;
}

.svp-feed-lines i {
  width: 35%;
  background: rgba(46, 46, 46, 0.08);
}

.svp-feed-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.svp-feed-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.4rem;
}

.svp-feed-actions i {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 2px solid rgba(46, 46, 46, 0.35);
}

.svp-feed-text {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.8rem;
}

.svp-feed-text b {
  display: block;
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(46, 46, 46, 0.12);
}

.svp-feed-text b:last-child {
  width: 60%;
}

.svp-phone-feed {
  top: 14%;
  left: 0;
  z-index: 1;
  width: 37%;
  rotate: -7deg;
  animation-delay: 120ms, 0s;
}

.svp-phone-video {
  top: 2%;
  right: 3%;
  z-index: 2;
  width: 39%;
  rotate: 5deg;
  animation-delay: 360ms, -3s;
}

.svp-ad.svp-ad-card {
  bottom: 1%;
  left: 31%;
  top: auto;
  z-index: 3;
  width: 37%;
  aspect-ratio: 1 / 1;
  rotate: -4deg;
  animation-delay: 560ms, -5s;
}

.svp-ad-stack ~ .svp-sticker-1 {
  top: 1%;
  right: 0;
}

.svp-ad-stack ~ .svp-sticker-2 {
  top: auto;
  right: 6%;
  bottom: 18%;
  left: auto;
}

.svp-ad-stack ~ .svp-sticker-3 {
  bottom: 8%;
  left: 5%;
}

@media (max-width: 768px) {
  .svp-phone {
    padding: 0.28rem;
    border-radius: 1.4rem;
  }

  .svp-phone-screen {
    border-radius: 1.1rem;
  }

  .svp-phone-notch {
    top: 0.35rem;
    height: 0.6rem;
  }

  .svp-feed-head {
    padding: 1.3rem 0.5rem 0.35rem;
  }

  .svp-feed-avatar {
    width: 1rem;
    height: 1rem;
  }
}

/* Creative hero: Car Finance R Us posts on the front cards */
.svp-ad.svp-ad-card-a {
  bottom: 6%;
  left: 24%;
  z-index: 3;
  width: 30%;
  rotate: -8deg;
  animation-delay: 520ms, -2s;
}

.svp-ad.svp-ad-card-b {
  bottom: 0;
  left: 46%;
  z-index: 4;
  width: 30%;
  rotate: 5deg;
  animation-delay: 700ms, -5s;
}

/* Creative hero: the phone with the clip and the two Car Finance R Us posts */
.svp-phone-video {
  top: 0;
  right: 5%;
  width: 43%;
}

.svp-ad.svp-ad-card-a {
  top: 14%;
  bottom: auto;
  left: 0;
  z-index: 3;
  width: 41%;
  rotate: -7deg;
}

.svp-ad.svp-ad-card-b {
  bottom: 2%;
  left: 19%;
  z-index: 4;
  width: 39%;
  rotate: 5deg;
}

.svp-ad-stack ~ .svp-sticker-3 {
  bottom: 3%;
  left: 2%;
}

/* The Car Finance R Us posts show whole: no crop and square corners */
.svp-ad.svp-ad-card-a,
.svp-ad.svp-ad-card-b {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

/* Creative hero: two phones with Swoppa talking-head clips, and the two Car Finance R Us posts */
.svp-phone-video {
  top: 0;
  right: auto;
  left: 31%;
  width: 34%;
  rotate: -4deg;
  z-index: 2;
}

.svp-phone-video-2 {
  top: 10%;
  right: 0;
  left: auto;
  width: 34%;
  rotate: 6deg;
  z-index: 3;
  animation-delay: 540ms, -4s;
}

.svp-ad.svp-ad-card-a {
  top: 6%;
  left: 0;
  width: 37%;
}

.svp-ad.svp-ad-card-b {
  bottom: 4%;
  left: 6%;
  width: 36%;
}

/* Creative hero: one phone with the clip and two Car Finance R Us posts, all larger */
.svp-ad-stack {
  scale: 1.18;
  transform-origin: 50% 50%;
}

.svp-phone-video {
  top: 0;
  right: 2%;
  left: auto;
  width: 45%;
  rotate: 5deg;
}

.svp-ad.svp-ad-card-a {
  top: 2%;
  left: 0;
  width: 40%;
  rotate: -7deg;
}

.svp-ad.svp-ad-card-b {
  top: auto;
  bottom: 2%;
  left: 12%;
  width: 36%;
  rotate: 4deg;
}

/* Creative hero: the phone and posts settle in once and then stay still (no floating) */
.svp-phone,
.svp-ad {
  animation: svp-pop 1.2s var(--ease-settle) both;
}

/* Creative hero: three posts fan out on the left of the phone */
.svp-ad.svp-ad-card-a {
  top: 0;
  left: 0;
  width: 35%;
  rotate: -7deg;
  z-index: 2;
}

.svp-ad.svp-ad-card-c {
  top: 26%;
  left: 20%;
  z-index: 4;
  width: 32%;
  rotate: 4deg;
  animation-delay: 700ms;
}

.svp-ad.svp-ad-card-b {
  top: auto;
  bottom: 0;
  left: 2%;
  z-index: 3;
  width: 34%;
  rotate: -5deg;
}

.svp-ad.svp-ad-card-c {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

/* Smaller phone */
.svp-phone-video {
  top: 6%;
  right: 5%;
  width: 36%;
}

/* Creative hero: the clip sits in the centre with one post either side */
.svp-phone-video {
  top: 8%;
  left: 50%;
  right: auto;
  width: 34%;
  translate: -50% 0;
  rotate: 0deg;
  z-index: 3;
}

.svp-ad.svp-ad-card-a {
  top: 6%;
  bottom: auto;
  left: 0;
  width: 31%;
  rotate: -6deg;
  z-index: 2;
}

.svp-ad.svp-ad-card-b {
  top: auto;
  bottom: 4%;
  left: auto;
  right: 0;
  width: 31%;
  rotate: 5deg;
  z-index: 2;
}

/* Creative hero: two phones of the same size, tilted opposite ways, with a post at each end */
.svp-phone-video {
  top: 12%;
  left: 22%;
  right: auto;
  width: 27%;
  translate: none;
  rotate: -5deg;
  z-index: 3;
}

.svp-phone-video.svp-phone-video-2 {
  top: 8%;
  left: 53%;
  right: auto;
  width: 27%;
  rotate: 5deg;
  z-index: 3;
  animation-delay: 540ms;
}

.svp-ad.svp-ad-card-a {
  top: 4%;
  bottom: auto;
  left: 0;
  width: 27%;
  rotate: 6deg;
  z-index: 2;
}

.svp-ad.svp-ad-card-b {
  top: auto;
  bottom: 2%;
  left: auto;
  right: 0;
  width: 27%;
  rotate: -6deg;
  z-index: 2;
}

@media (max-width: 768px) {
  .svp-ad-stack {
    scale: 1;
  }
}

/* Creative hero: larger phones with squarer, realistic corners */
.svp-phone {
  padding: 0.35rem;
  border-radius: 1.1rem;
}

.svp-phone-screen {
  border-radius: 0.8rem;
}

.svp-phone-notch {
  top: 0.45rem;
  height: 0.7rem;
}

.svp-phone-video {
  top: 8%;
  left: 15%;
  width: 34%;
}

.svp-phone-video.svp-phone-video-2 {
  top: 4%;
  left: 51%;
  width: 34%;
}

.svp-ad.svp-ad-card-a {
  top: 2%;
  width: 26%;
}

.svp-ad.svp-ad-card-b {
  bottom: 0;
  width: 26%;
}

/* Creative hero: corners scale with the phone so it reads as a normal handset */
.svp-phone {
  border-radius: 13% / 6%;
}

.svp-phone-screen {
  border-radius: 11.5% / 5.3%;
}

/* Creative hero: the two posts sit in front and overlap the phones */
.svp-ad.svp-ad-card-a {
  top: 34%;
  left: 2%;
  width: 29%;
  z-index: 5;
}

.svp-ad.svp-ad-card-b {
  bottom: 0;
  right: 1%;
  width: 29%;
  z-index: 5;
}

/* Creative hero: the purple clip keeps its true proportions on a matching purple screen */
.svp-phone-video-2 .svp-phone-screen {
  background: #1e1062;
}

.svp-phone-video-2 .svp-phone-clip {
  object-fit: contain;
}

/* Creative hero: the green post sits lower so the UGC face stays clear */
.svp-ad.svp-ad-card-a {
  top: 62%;
  left: 0;
}

/* ============================================================
   CREATIVE HERO: PEELABLE HEART STICKER
   A pink "like" heart as a die-cut sticker behind the phones. It
   slaps on as the page loads, then the top corner slowly peels back,
   the same fold trick as the contact page sticker: .svp-heart-fold is
   turned so its right-hand side points up, the stuck sticker is
   clipped --sh-fold% short of that side, and a mirrored white copy of
   the strip past the fold is the flap.
   ============================================================ */
@property --sh-lift {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --sh-wiggle {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.svp-heart {
  position: absolute;
  top: -9%;
  left: 71%;
  z-index: 1;
  width: 36%;
  pointer-events: none;
}

.svp-heart-sticker {
  --sh-fold: calc(11 + var(--sh-lift) * 6 + var(--sh-wiggle));
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  rotate: 12deg;
  filter: drop-shadow(0 6px 10px rgba(46, 46, 46, 0.14));
  animation:
    svp-heart-on 700ms cubic-bezier(0.5, 1.8, 0.62, 1) 300ms both,
    svp-heart-peel 1100ms cubic-bezier(0.33, 0, 0.2, 1) 900ms both;
}

@keyframes svp-heart-on {
  from {
    opacity: 0;
    scale: 1.12;
    rotate: 24deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 12deg;
  }
}

@keyframes svp-heart-peel {
  from { --sh-lift: 0; }
  to { --sh-lift: 1; }
}

@keyframes svp-heart-wiggle {
  0%,
  100% { --sh-wiggle: 0; }
  50% { --sh-wiggle: 2.6; }
}

.svp-heart-fold {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.svp-heart-unpeeled,
.svp-heart-peeled {
  position: absolute;
  inset: 0;
}

.svp-heart-unpeeled {
  clip-path: inset(0 calc(var(--sh-fold) * 1%) 0 0);
}

.svp-heart-peeled {
  clip-path: inset(0 0 0 calc(100% - var(--sh-fold) * 1%));
  transform-origin: calc(100% - var(--sh-fold) * 1%) 50%;
  transform: scaleX(-1);
  filter: brightness(0) invert(1);
}

.svp-heart-face {
  position: absolute;
  inset: 0;
  background: url("https://leadly-website.pages.dev/assets/svp-heart-sticker.svg") center / contain no-repeat;
  transform: rotate(90deg);
}

@media (hover: hover) and (pointer: fine) {
  .svp-heart-sticker {
    pointer-events: auto;
  }

  .svp-heart:has(.svp-heart-sticker:hover) {
    animation: svp-heart-wiggle 1300ms ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svp-heart-sticker {
    animation: none;
    --sh-lift: 1;
  }
}

@media (max-width: 768px) {
  .svp-heart {
    left: 64%;
    width: 34%;
  }
}

/* ============================================================
   CREATIVE CLOSING SECTION: copy on the left, a MacBook on the right
   showing the carloans365 homepage. The MacBook is drawn in CSS:
   a dark lid with a slim bezel and camera, the screen at 16:10, and
   a thin silver base with the thumb notch.
   ============================================================ */
.svp-cta-inner:has(> .svp-cta-browser) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  justify-items: start;
  gap: clamp(2rem, 5vw, 5rem);
  text-align: left;
}

.svp-cta-inner:has(> .svp-cta-browser) .svp-cta-copy {
  justify-items: start;
}

.svp-cta-inner:has(> .svp-cta-browser) .svp-cta-title {
  text-align: left;
  text-wrap: pretty;
}









@media (max-width: 1024px) {
  .svp-cta-inner:has(> .svp-cta-browser) {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

}

/* Creative closing section: a browser window onto the real carloans365 site.
   Hover (or tap) and the page scrolls through itself; click opens the site. */
.svp-cta-browser {
  position: relative;
  display: block;
  width: 100%;
  justify-self: end;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(46, 46, 46, 0.08),
    0 28px 56px rgba(46, 46, 46, 0.14);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.5s var(--ease-settle, ease),
    box-shadow 0.5s ease;
}

.svp-cta-browser:hover,
.svp-cta-browser:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(46, 46, 46, 0.1),
    0 36px 70px rgba(46, 46, 46, 0.2);
}

.svp-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid rgba(46, 46, 46, 0.08);
  background: #f2f2f4;
}

.svp-browser-dots {
  display: inline-flex;
  gap: 0.4rem;
}

.svp-browser-dots i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #d6d6db;
}

.svp-browser-address {
  flex: 1;
  max-width: 62%;
  margin-right: 3.2rem;
  margin-left: auto;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  background: #fff;
  color: rgba(46, 46, 46, 0.62);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
}

.svp-browser-view {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.svp-browser-view img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  /* Heads back to the top quickly when the pointer leaves */
  transition: object-position 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .svp-cta-browser:hover .svp-browser-view img,
  .svp-cta-browser:focus-visible .svp-browser-view img {
    object-position: 50% 100%;
    transition: object-position 16s linear;
  }

  .svp-browser-view::after {
    content: "Hover to explore";
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--pink, #ff0099);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    transition: opacity 0.3s ease;
  }

  .svp-cta-browser:hover .svp-browser-view::after,
  .svp-cta-browser:focus-visible .svp-browser-view::after {
    opacity: 0;
  }
}

/* Touch screens have no hover, so the site scrolls itself, slowly, and back */
@media (hover: none) {
  .svp-browser-view img {
    animation: svp-browser-scroll 26s ease-in-out infinite alternate;
  }
}

@keyframes svp-browser-scroll {
  from { object-position: 50% 0%; }
  to { object-position: 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .svp-browser-view img {
    animation: none;
    transition: none;
  }
}

@media (max-width: 1024px) {
  .svp-cta-browser {
    justify-self: center;
    width: min(100%, 34rem);
  }
}

/* Creative hero: the phones sit 40px lower (the stack is scaled up 1.18, so 34px of layout is 40px on screen) */
.svp-phone-video {
  top: calc(8% + 34px);
}

.svp-phone-video.svp-phone-video-2 {
  top: calc(4% + 34px);
}

@media (max-width: 768px) {
  .svp-phone-video {
    top: calc(8% + 40px);
  }

  .svp-phone-video.svp-phone-video-2 {
    top: calc(4% + 40px);
  }
}

/* Out of Home: the carloans365 billboards in Glasgow, cropped in on the boards.
   One large photograph beside the campaign numbers, three more underneath. */
.svp-cases-showcase {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
}

.svp-cases-feature,
.svp-cases-shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--svp-card-radius, 20px);
  background: #1b1b1b;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.3);
}

.svp-cases-feature {
  grid-column: 1 / span 7;
}

.svp-cases-shot {
  grid-column: span 4;
}

.svp-cases-feature img,
.svp-cases-shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.9s var(--ease-settle, ease);
}

.svp-cases-feature:hover img,
.svp-cases-shot:hover img {
  transform: scale(1.04);
}

.svp-cases-showcase > .svp-case {
  grid-column: 8 / span 5;
  justify-content: center;
}

@media (max-width: 900px) {
  .svp-cases-feature,
  .svp-cases-showcase > .svp-case {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .svp-cases-shot {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svp-cases-feature img,
  .svp-cases-shot img {
    transition: none;
  }

  .svp-cases-feature:hover img,
  .svp-cases-shot:hover img {
    transform: none;
  }
}

/* Out of Home: the "3s" is lighter and more open, and the "40" is no longer hot pink */
.svp-timer-value {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.svp-timer-value small {
  margin-left: 0.08em;
  letter-spacing: 0.02em;
}

.svp-cases-showcase .svp-case-figure strong {
  color: rgba(244, 244, 244, 0.96);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Out of Home "One brand, everywhere": the dark panel arrives filling the whole screen, then pulls in to a rounded box as you scroll,
   like the homepage case study. More air between it and the two cards above. */
.svp-duo.svp-duo-roomy {
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

.svp-band.svp-band-fill .svp-band-panel {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
}

.svp-band.svp-band-fill .svp-band-panel > .section-shell {
  margin-inline: auto;
}


.svp-hero-stage.is-remote .svp-hero-object-wrap {
  inset: 10% -8% 14% -6%;
}

.svp-hero-stage.is-remote .svp-hero-ground {
  left: 12%;
  right: 12%;
  bottom: 10%;
}

.svp-band-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
}

.svp-band-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 3 / 2;
  background: rgba(244, 244, 244, 0.06);
}

.svp-band-grid figure:nth-child(even) {
  translate: 0 clamp(1.2rem, 3vw, 2.4rem);
}

.svp-band-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svp-band-fill .svp-band-layout {
  grid-template-columns: minmax(0, 35rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

@media (max-width: 1280px) {
  .svp-band-fill .svp-band-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 1024px) {
  .svp-band-fill .svp-band-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.svp-band-fill .svp-band-title {
  max-width: 7em;
  text-wrap: wrap;
}

.svp-cta-inner:has(> .svp-cta-remote) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  justify-items: start;
  gap: clamp(2rem, 5vw, 5rem);
  text-align: left;
}

.svp-cta-inner:has(> .svp-cta-remote) .svp-cta-copy {
  justify-items: start;
}

.svp-cta-inner:has(> .svp-cta-remote) .svp-cta-title {
  text-align: left;
  text-wrap: pretty;
}

.svp-cta-remote {
  margin: 0;
  width: 100%;
}

.svp-cta-remote img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 38px rgba(46, 46, 46, 0.2));
  animation: svp-bob 7s ease-in-out infinite;
}

@media (max-width: 1024px) {
  .svp-cta-inner:has(> .svp-cta-remote) {
    grid-template-columns: minmax(0, 1fr);
  }
}


.svp-cases-showcase > .svp-case.svp-case-how {
  justify-content: center;
  grid-column: span 4;
  align-items: flex-start;
}

.svp-case-how h3 {
  margin: 0.2rem 0 0.2rem;
}

.svp-case-how p:not(.svp-pill) {
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .svp-cases-showcase > .svp-case.svp-case-how {
    grid-column: span 4;
  }
}

@media (max-width: 640px) {
  .svp-cases-showcase > .svp-case.svp-case-how {
    grid-column: 1 / -1;
  }
}

/* Out of Home case studies: keep the second row even. */
.svp-cases-showcase .svp-cases-shot img {
  aspect-ratio: 4 / 3;
}

.svp-cases-showcase > .svp-case.svp-case-how {
  gap: 0.6rem;
  padding: clamp(1.2rem, 2vw, 1.7rem);
}

.svp-case-how h3 {
  font-size: 1.25rem;
  margin: 0;
}

.svp-case-how p:not(.svp-pill) {
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Growth Studio products: one product at a time, switched by tabs. */
.svp-prod {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svp-prod-tabs {
  display: inline-flex;
  justify-self: start;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid rgba(244, 244, 244, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.svp-prod-tab {
  display: grid;
  place-items: center;
  min-width: 8.5rem;
  height: 3rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.35s var(--ease-soft, ease);
}

.svp-prod-tab img {
  display: block;
  width: auto;
  height: 1.45rem;
  /* The "white" marks ship without a fill, so flatten them to white. */
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.35s var(--ease-soft, ease);
}

.svp-prod-tab:hover img,
.svp-prod-tab.is-active img {
  opacity: 1;
}

.svp-prod-tab.is-active {
  background: var(--color-pink, #ff0099);
}

.svp-prod-tab:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.svp-prod-panel {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 244, 0.1);
  border-radius: var(--svp-card-radius);
  background: rgba(255, 255, 255, 0.04);
  animation: svp-prod-in 0.6s var(--ease-settle, ease) both;
}

.svp-prod-panel[hidden] {
  display: none;
}

@keyframes svp-prod-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

.svp-prod-main {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.svp-prod-visual {
  display: grid;
  place-items: center;
  min-height: 20rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}

.svp-prod-visual .svp-pv-pruuv,
.svp-prod-visual .svp-pv-swoppa {
  scale: 1.15;
}

.svp-prod-copy {
  display: grid;
  align-content: center;
  gap: 1.5rem;
}

.svp-prod-block {
  display: grid;
  gap: 0.5rem;
}

.svp-prod-block h3 {
  color: var(--color-pink, #ff0099);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svp-prod-block p {
  max-width: 38rem;
  color: rgba(244, 244, 244, 0.78);
  font-size: 1rem;
  line-height: 1.55;
}

.svp-prod-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.6rem;
}

.svp-prod-list li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--white);
  font-size: 0.92rem;
  line-height: 1.4;
}

.svp-prod-list li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-pink, #ff0099);
}

.svp-prod-result {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem 2rem;
  padding: 1.3rem clamp(1.4rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(244, 244, 244, 0.1);
  color: var(--white);
  font-size: 1.02rem;
  line-height: 1.5;
}

.svp-prod-result span {
  color: rgba(244, 244, 244, 0.55);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .svp-prod-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .svp-prod-visual {
    min-height: 14rem;
  }

  .svp-prod-result {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .svp-prod-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
  }

  .svp-prod-tab {
    min-width: 0;
  }

  .svp-prod-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svp-prod-panel {
    animation: none;
  }
}

/* Creative: the pink L decoration hangs off the right edge of the page. */
.svp-has-side-deco {
  position: relative;
  overflow-x: clip;
}

.svp-side-deco {
  position: absolute;
  z-index: 2;
  top: 3%;
  right: clamp(0.25rem, 1.2vw, 1.5rem);
  width: clamp(8rem, 14vw, 14.5rem);
  height: auto;
  rotate: 4deg;
  pointer-events: none;
  animation: svp-bob 9s ease-in-out infinite;
}

@media (max-width: 900px) {
  .svp-side-deco {
    top: auto;
    bottom: 2%;
    width: clamp(6.5rem, 26vw, 9rem);
    right: 0.25rem;
  }
}

/* CTA paragraphs share one box and wrap normally, so a long first paragraph
   is not pulled narrower than the second. */
.svp-cta-copy p {
  width: 100%;
  max-width: 35rem;
  text-wrap: wrap;
}

/* Out of Home hero: the film replaces the square stage. */
.svp-hero-stage.is-video {
  aspect-ratio: auto;
  align-self: end;
}

.svp-hero-video {
  overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 32px);
  background: #2e2e2e;
  box-shadow: 0 34px 60px rgba(46, 46, 46, 0.22);
  aspect-ratio: 4 / 3;
}

.svp-hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svp-hero-stage.is-video .svp-float-br {
  right: -3%;
  top: -12%;
  bottom: auto;
}

@media (min-width: 1025px) {
  .svp-hero-stage.is-video {
    width: 120%;
    max-width: none;
    margin-right: -7%;
  }
}

/* Out of Home case studies: two aligned columns. Left: one large photo above two
   smaller ones. Right: the case panel above the "How we work" panel. Both rows
   share the same left and right edges. */
.svp-cases-showcase {
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: stretch;
}

.svp-cases-showcase > .svp-cases-feature {
  grid-column: 1 / span 14;
}

.svp-cases-showcase > .svp-case:not(.svp-case-how) {
  grid-column: 15 / span 10;
}

.svp-cases-showcase > .svp-cases-shot {
  grid-column: span 7;
}

.svp-cases-showcase > .svp-case.svp-case-how {
  grid-column: 15 / span 10;
}

.svp-cases-showcase .svp-cases-shot img {
  aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
  .svp-cases-showcase > .svp-cases-feature,
  .svp-cases-showcase > .svp-case:not(.svp-case-how),
  .svp-cases-showcase > .svp-case.svp-case-how {
    grid-column: 1 / -1;
  }

  .svp-cases-showcase > .svp-cases-shot {
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  .svp-cases-showcase > .svp-cases-shot {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .svp-hero-stage.is-video .svp-float-br {
    display: none;
  }
}

@media (min-width: 1025px) {
  .svp-hero-layout:has(.svp-hero-stage.is-video) {
    align-items: end;
  }
}

/* SEO hero search bar: reserve room for the longest phrase so the card does not jump while it types. */
.svp-search-bar [data-svp-typewriter] {
  min-width: 13.5em;
}

/* SEO hero search card: wide enough that the longest typed phrase stays inside the card. */
.svp-float:has(.svp-widget-search) {
  width: max(calc(var(--w) * 1.9%), 17.5rem);
  /* Grow to the left so the wider card never covers the face in the polaroid. */
  margin-left: -5.5rem;
}

.svp-search-bar [data-svp-typewriter] {
  min-width: 0;
}

.svp-widget-search .svp-search-bar {
  min-width: 0;
  padding-right: 1.1rem;
}