/* ============================================================
   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.2fr) minmax(0, 0.8fr);
  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 #ff94d4;
  border-radius: 999px;
  background: #ffd1ec;
  color: #000;
  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(3rem, 6vw, 6.1rem);
  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 {
  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;
  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;
  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-lines {
  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-a span { translate: -22% -18%; }
.svp-engine-b span { translate: 22% -18%; }
.svp-engine-c span { translate: 0 28%; }

.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%; }

.svp-engine-core {
  position: absolute;
  top: 47%;
  left: 50%;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 40px rgba(255, 0, 153, 0.55);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 700ms var(--ease-settle) 1.1s;
}

.svp-engine.is-in .svp-engine-core {
  transform: translate(-50%, -50%) scale(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.05em;
}

.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) 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-billboard {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: 5.5rem;
}

.svp-billboard-face {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 2 / 1;
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  overflow: hidden;
  border: 10px solid #1b1b1b;
  border-radius: 18px;
  background: #f4f4f4;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.svp-billboard-face::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg);
  animation: svp-sweep 5.5s ease-in-out infinite;
}

.svp-billboard-brand {
  width: clamp(4rem, 7vw, 5.5rem);
  height: auto;
}

.svp-billboard-line {
  max-width: 13em;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.svp-billboard-post {
  width: 16px;
  height: 4rem;
  background: linear-gradient(90deg, #111, #2a2a2a, #111);
}

.svp-billboard-sitter {
  position: absolute;
  top: 0;
  right: 9%;
  z-index: 2;
  width: 21%;
  height: auto;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.35));
  animation: svp-bob 6s ease-in-out infinite;
}

.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.06em;
  font-variant-numeric: tabular-nums;
}

.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;
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
  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-billboard-face::after {
  content: none;
}

.service-page:not(.company-page) .svp-billboard-post {
  background: #1a1a1a;
}

.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;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: top;
}

.svp-motion .svp-hw-in {
  display: inline-block;
  translate: 0 110%;
  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);
}