/* Copyright (c) 2026 Gotoproject platform B.V. All rights reserved. */
#aanpak.site-section--scene::before,
#aanpak.site-section--scene .site-band::before,
#in-het-kort.site-section--scene::before,
#in-het-kort.site-section--scene .site-band::before {
  content: none;
  display: none;
}
.home .site-section--scene {
  min-height: 100svh;
}
#in-het-kort .site-band,
#probleem .site-band,
#aanpak .site-band,
#resultaat .site-band,
#expertises .site-band,
#over-ons .site-band {
  gap: clamp(3.25rem, 8vh, 5.25rem);
}
#toolbox .site-band {
  gap: var(--gtp-row-gap);
}
#expertises.site-section--scene::before {
  content: none;
  display: none;
}
#expertises .skill-mark {
  box-shadow: none;
}
.nowrap {
  white-space: nowrap;
}
.site-copy p:not(.overline):not(.step-mark) {
  max-width: var(--gtp-measure);
  color: var(--gtp-text-secondary);
  font-size: var(--sl-font-size-large);
  line-height: 1.6;
}
.media-frame--illustration {
  background: var(--sl-color-neutral-0);
}
.media-frame--illustration img {
  object-fit: contain;
}
.media-frame--wide.media-frame--illustration img {
  object-fit: cover;
  object-position: center;
}
.media-frame--issue {
  aspect-ratio: 4 / 3;
  min-height: 11rem;
}
.hero-orbit {
  --orbit-blur: 0px;
  --orbit-parallax: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-size);
  height: var(--orbit-size);
  translate: -50% -50%;
  transform: translate3d(0, var(--orbit-parallax), 0);
  z-index: 0;
  pointer-events: none;
  filter: blur(var(--orbit-blur));
}
.hero-orbit-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(36rem, 64vmin);
  height: min(36rem, 64vmin);
  translate: -50% -50%;
  border-radius: var(--gtp-radius-circle);
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--gtp-brand-blue) 16%, transparent),
    transparent 100%
  );
}
.hero-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: var(--gtp-radius-circle);
  border: var(--gtp-border-width-thin) solid color-mix(in srgb, var(--gtp-brand-blue) 38%, transparent);
}
.hero-orbit-ring--1 {
  width: calc(var(--orbit-r-1) * 2);
  height: calc(var(--orbit-r-1) * 2);
  opacity: 0.85;
}
.hero-orbit-ring--2 {
  width: calc(var(--orbit-r-2) * 2);
  height: calc(var(--orbit-r-2) * 2);
  opacity: 0.55;
}
.hero-orbit-ring--3 {
  width: calc(var(--orbit-r-3) * 2);
  height: calc(var(--orbit-r-3) * 2);
  opacity: 0.32;
}
.hero-orbit-shell {
  position: absolute;
  inset: 0;
}
.hero-orbit-shell--1 {
  --orbit-r: var(--orbit-r-1);
  --orbit-dur: 96s;
}
.hero-orbit-shell--2 {
  --orbit-r: var(--orbit-r-2);
  --orbit-dur: 132s;
}
.hero-orbit-shell--3 {
  --orbit-r: var(--orbit-r-3);
  --orbit-dur: 168s;
}
.hero-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  transform-origin: 0 0;
  transform: rotate(var(--a)) translateX(var(--orbit-r));
  animation: hero-orbit-dot var(--orbit-dur) linear infinite;
}
.hero-orbit-shell--2 .hero-dot,
.hero-orbit-shell--2 .hero-dot-face {
  animation-direction: reverse;
}
.hero-dot-face {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  translate: -50% -50%;
  border: var(--gtp-border-width) solid color-mix(in srgb, var(--gtp-brand-blue) 34%, var(--gtp-border));
  border-radius: var(--gtp-radius-circle);
  background: var(--gtp-surface);
  color: var(--sl-color-primary-700);
  box-shadow: 0 0 0 4px var(--gtp-page-bg);
  animation: hero-unspin var(--orbit-dur) linear infinite;
}
.hero-dot-face .gtp-icon {
  width: 1.28rem;
  height: 1.28rem;
}
.hero-dot--person {
  --a: var(--a-wide);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-dot--person {
    --a: var(--a-narrow);
  }
}
.hero-dot--person .hero-dot-face {
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-color: var(--sl-color-neutral-0);
  background: var(--sl-color-primary-100);
  box-shadow:
    0 0 0 4px var(--gtp-page-bg),
    0 0.5rem 1.2rem -0.5rem color-mix(in srgb, var(--gtp-brand-navy) 35%, transparent);
}
.hero-dot--person img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-dot--plain::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.65rem;
  height: 0.65rem;
  translate: -50% -50%;
  border-radius: var(--gtp-radius-circle);
  background: color-mix(in srgb, var(--gtp-brand-blue) 58%, var(--sl-color-neutral-0));
}
.platform-visual {
  --orbit-size: min(76rem, 160vw);
  --hub-d: min(12.5rem, 44vw);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 24rem;
  margin-inline: auto;
  min-width: 0;
  overflow: visible;
}
#toolbox.site-section--scene::before {
  content: none;
}
#toolbox .site-copy,
#toolbox .tool-cards {
  position: relative;
  z-index: 2;
}
#toolbox .platform-visual {
  z-index: 0;
}
.hero-orbit.platform-orbit {
  --orbit-size: inherit;
  --orbit-blur: 0px;
  --orbit-parallax: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-size);
  height: var(--orbit-size);
  filter: none;
  transform: none;
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent 0 calc(var(--hub-d) * 0.5 + 0.55rem),
    #000 calc(var(--hub-d) * 0.5 + 1.1rem)
  );
  mask-image: radial-gradient(
    circle at center,
    transparent 0 calc(var(--hub-d) * 0.5 + 0.55rem),
    #000 calc(var(--hub-d) * 0.5 + 1.1rem)
  );
}
.platform-orbit .hero-orbit-glow {
  display: none;
}
.platform-orbit .hero-orbit-ring--1 {
  width: 40%;
  height: 40%;
  filter: blur(0);
}
.platform-orbit .hero-orbit-ring--2 {
  width: 68%;
  height: 68%;
  filter: blur(1.15px);
}
.platform-orbit .hero-orbit-ring--3 {
  width: 98%;
  height: 98%;
  filter: blur(2.6px);
}
.platform-orbit .hero-orbit-shell--1 {
  --orbit-r: calc(var(--orbit-size) * 0.2);
  filter: blur(0.25px);
}
.platform-orbit .hero-orbit-shell--2 {
  --orbit-r: calc(var(--orbit-size) * 0.34);
  filter: blur(1.2px);
}
.platform-orbit .hero-orbit-shell--3 {
  --orbit-r: calc(var(--orbit-size) * 0.49);
  filter: blur(2.8px);
}
.platform-orbit .hero-dot-face {
  width: 2.55rem;
  height: 2.55rem;
}
.platform-orbit .hero-dot-face .gtp-icon {
  width: 1.12rem;
  height: 1.12rem;
}
.platform-orbit .hero-dot--plain::after {
  width: 0.55rem;
  height: 0.55rem;
}
.hero-dot-label {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  translate: -50% 0;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--gtp-page-bg);
  color: var(--sl-color-primary-700);
  font-size: 0.82rem;
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
}
.som-com-orbit .hero-dot--person .hero-dot-face {
  width: 3.2rem;
  height: 3.2rem;
}
.som-com-orbit .hero-orbit-shell--1 {
  z-index: 1;
}
@media (max-width: 1023px) {
  .som-com .platform-visual {
    --orbit-size: min(40rem, 124vw);
    --hub-d: min(9rem, 28vw);
    min-height: min(32rem, 100vw);
  }
  .som-com-orbit .hero-orbit-ring--1 {
    width: 52%;
    height: 52%;
  }
  .som-com-orbit .hero-orbit-shell--1 {
    --orbit-r: calc(var(--orbit-size) * 0.26);
  }
  .som-com .platform-hub p {
    font-size: 1rem;
  }
}
.platform-hub {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: var(--hub-d);
  height: var(--hub-d);
  margin: 0;
  padding: 1.1rem 1.15rem;
  overflow: hidden;
  border-radius: var(--gtp-radius-circle);
  background: var(--gtp-page-bg);
  box-shadow: 0 0 0 0.55rem var(--gtp-page-bg);
  text-align: center;
  pointer-events: auto;
}
.platform-hub img {
  display: block;
  height: auto;
  width: auto;
  max-width: 82%;
  max-height: 2.15rem;
}
.platform-hub p {
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: clamp(1.15rem, 0.95rem + 0.45vw, 1.35rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.platform-hub .btn {
  margin-top: 0.55rem;
}
.hero:not(.is-hero-in) .hero-orbit {
  opacity: 0;
  animation: hero-fallback 0.4s ease 2.5s forwards;
}
.hero.is-hero-in .hero-orbit {
  opacity: 1;
}
.js-reveal .hero.is-hero-in .hero-orbit {
  transition: opacity 1.2s ease 80ms;
}
@media (scripting: none) {
  .hero:not(.is-hero-in) .hero-orbit {
    opacity: 1;
    translate: 0;
  }
}
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gtp-spacing-form-gap);
  align-items: center;
  min-width: 0;
}
.stage--photo .site-copy {
  max-width: 34rem;
}
.stage .media-frame {
  min-height: 14rem;
}
#over-ons .section-head h2 {
  max-width: 28ch;
}
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vh, 3.5rem);
  width: 100%;
  min-width: 0;
}
.about-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  aspect-ratio: 6 / 5;
}
.about-collage .media-frame {
  z-index: 1;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}
.about-collage .media-frame--empty {
  border: var(--gtp-rule);
  background: var(--sl-color-primary-50);
}
.about-collage .media-frame--collage-main {
  grid-column: 1 / 10;
  grid-row: 1 / 11;
}
.about-collage .media-frame--collage-top,
.about-collage .media-frame--collage-bottom {
  z-index: 2;
  box-shadow: 0 0 0 0.25rem var(--gtp-page-bg);
}
.about-collage .media-frame--collage-top {
  grid-column: 8 / 13;
  grid-row: 2 / 6;
}
.about-collage .media-frame--collage-bottom {
  grid-column: 6 / 12;
  grid-row: 8 / 13;
}
.about-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  min-width: 0;
}
.about-story h3 {
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.about-story p {
  margin: 0;
  color: var(--gtp-text-secondary);
  font-size: var(--sl-font-size-large);
  line-height: 1.6;
}
.about-story p + p {
  margin-top: 0.5rem;
}
.about-story .about-story-close {
  padding-left: 1rem;
  border-left: var(--gtp-border-width) solid var(--gtp-brand-blue);
  color: var(--gtp-text-primary);
  font-weight: var(--sl-font-weight-semibold);
  line-height: 1.4;
}
.about-story .cta-row {
  margin-top: 1rem;
}
#over-ons {
  gap: clamp(3.25rem, 8vh, 5.25rem);
}
.final-cta .final-cta-person {
  margin-top: 2rem;
}
.final-cta-person {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: none;
}
.final-cta-person-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
}
.final-cta-person-copy strong {
  font-size: var(--sl-font-size-x-large);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.final-cta-person-copy span {
  color: color-mix(in srgb, var(--sl-color-neutral-0) 78%, transparent);
  font-size: var(--sl-font-size-large);
  font-weight: var(--sl-font-weight-normal);
  line-height: 1.35;
}
.final-cta-avatar {
  display: block;
  flex-shrink: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--gtp-radius-circle);
  object-fit: cover;
  object-position: center;
  background: var(--sl-color-neutral-100);
}
.site-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gtp-spacing-stack);
  min-width: 0;
  max-width: 40rem;
}
.site-copy h2 {
  margin: 0;
  font-size: clamp(1.7rem, 1.15rem + 1.8vw, 2.5rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.site-copy p {
  margin: 0;
}
.about-story p a,
.site-copy p a {
  color: var(--sl-color-primary-700);
  font-weight: var(--sl-font-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--gtp-transition-md);
}
.about-story p a {
  white-space: nowrap;
}
.about-story p a:hover,
.about-story p a:focus-visible,
.site-copy p a:hover,
.site-copy p a:focus-visible {
  color: var(--sl-color-primary-800);
}
.site-section--tint :is(.text-link, .site-copy p a, .section-head p:not(.overline) a, .platform-tour-number, .visual-card-number) {
  color: var(--sl-color-primary-800);
}
.site-section--tint :is(.text-link, .site-copy p a, .section-head p:not(.overline) a):is(:hover, :focus-visible) {
  color: var(--sl-color-primary-900);
}
#in-het-kort .site-copy {
  gap: 1.15rem;
}
#in-het-kort .site-copy > .cta-row {
  width: 100%;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
#in-het-kort .site-copy > .cta-row .btn {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  padding-inline: 1.2rem;
  white-space: nowrap;
}
.step-mark {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-mark);
  height: var(--step-mark);
  margin: 0;
  max-width: none;
  border: var(--gtp-border-width) solid var(--sl-color-primary-700);
  border-radius: var(--gtp-radius-circle);
  background: var(--sl-color-primary-700);
  color: var(--sl-color-neutral-0);
  font-size: var(--sl-font-size-large);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px var(--sl-color-neutral-0);
  transition:
    background-color 0.48s ease,
    color 0.48s ease,
    border-color 0.48s ease;
}
.js-steps .step-mark:not(.is-filled) {
  border-color: color-mix(in srgb, var(--gtp-brand-blue) 42%, var(--sl-color-neutral-0));
  background: var(--sl-color-neutral-0);
  color: var(--sl-color-primary-700);
}
#aanpak .method-chapters {
  margin-top: clamp(4.5rem, 12vh, 7.5rem);
}
.method-chapters {
  display: flex;
  flex-direction: column;
  gap: clamp(6.5rem, 16vh, 10rem);
  width: 100%;
  margin-top: clamp(2.5rem, 8vh, 5.25rem);
}
.method-chapters .site-copy {
  max-width: 34rem;
}
.method-chapters .site-copy h3 {
  margin: 0;
  font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.issue-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
.issue-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vh, 3.5rem);
  width: 100%;
}
#probleem .issue-grid,
#aanpak .method,
.tool-cards {
  margin-top: clamp(1.5rem, 4.5vh, 3rem);
}
.issue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.7rem;
  min-width: 0;
}
.issue .media-frame {
  width: 100%;
}
.issue-copy {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  max-width: 28rem;
}
#probleem .overline {
  color: var(--gtp-brand-red-text);
}
.issue h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}
.issue-copy p {
  margin: 0;
  color: var(--gtp-text-secondary);
}
.issue-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin-top: clamp(1.35rem, 4.5vh, 2.75rem);
}
.skill-orbit {
  --skill-mark: 3.35rem;
  --skill-fill-count: 0;
  --skill-ring-width: 1px;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-inline: auto;
  padding: 2.25rem 1rem 2rem;
}
.skill-orbit-ring {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.skill-orbit-ring--track {
  inset: 0;
  border-radius: 1.85rem;
  border: var(--gtp-border-width-thin) solid color-mix(in srgb, var(--gtp-brand-blue) 28%, transparent);
}
.skill-orbit-ring--progress {
  display: none;
}
.skill-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 2.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  width: 100%;
  max-width: 18rem;
  min-width: 0;
  margin-inline: auto;
  text-align: center;
}
.skill:nth-child(1) {
  --i: 0;
}
.skill:nth-child(2) {
  --i: 1;
}
.skill:nth-child(3) {
  --i: 2;
}
.skill:nth-child(4) {
  --i: 3;
}
.skill:nth-child(5) {
  --i: 4;
}
.skill:nth-child(6) {
  --i: 5;
}
.skill-mark {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--skill-mark);
  height: var(--skill-mark);
  flex: 0 0 var(--skill-mark);
  border: var(--gtp-border-width) solid var(--sl-color-primary-700);
  border-radius: var(--gtp-radius-circle);
  background: var(--sl-color-primary-700);
  color: var(--sl-color-neutral-0);
  box-shadow: 0 0 0 6px var(--gtp-page-bg);
  transition:
    background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-skill-orbit-ready .skill-mark:not(.is-filled) {
  border-color: color-mix(in srgb, var(--gtp-brand-blue) 42%, var(--sl-color-neutral-0));
  background: var(--sl-color-neutral-0);
  color: var(--sl-color-primary-700);
}
.skill-mark .gtp-icon {
  width: 1.35rem;
  height: 1.35rem;
}
.skill-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.skill h3 {
  margin: 0;
  max-width: 100%;
  color: var(--sl-color-primary-700);
  font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.28rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}
.skill h3 a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.skill-copy p {
  margin: 0;
  max-width: 22rem;
  color: var(--gtp-text-secondary);
  text-wrap: pretty;
}
.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  min-width: 0;
}
.result-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem 0.9rem;
  min-width: 0;
  padding: 1.25rem 1.35rem 1.35rem;
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius-lg);
  background: var(--gtp-surface);
}
.result-card .outcome-mark {
  width: 2.5rem;
  height: 2.5rem;
}
.result-card .outcome-mark .gtp-icon {
  width: 1.2rem;
  height: 1.2rem;
}
.result-card h3 {
  margin: 0;
  color: var(--sl-color-primary-700);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}
.result-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--gtp-text-secondary);
  text-wrap: pretty;
}
.result-visual {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius-lg);
  background: var(--gtp-surface);
}
.result-visual .media-frame {
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
}
.result-visual .media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
}
.result-visual-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.35rem 1.35rem 1.5rem;
  border-top: var(--gtp-rule);
}
.result-visual-copy h3 {
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}
.result-visual-copy p {
  margin: 0;
  color: var(--gtp-text-secondary);
}
.result-visual-copy .btn {
  margin-top: 0.6rem;
}
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.arrow-link .gtp-icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: translate var(--gtp-transition-md);
}
.project-feature-summary {
  margin: 0;
  max-width: 30rem;
  color: var(--gtp-muted-on-dark);
  font-size: var(--sl-font-size-medium);
  line-height: 1.55;
}
.layer-tone--blue {
  --layer: var(--gtp-brand-blue);
  --layer-ink: color-mix(in srgb, var(--gtp-brand-blue) 72%, var(--gtp-brand-navy));
}
.layer-tone--teal {
  --layer: var(--gtp-brand-teal);
  --layer-ink: color-mix(in srgb, var(--gtp-brand-teal) 50%, var(--gtp-brand-navy));
}
.layer-tone--gold {
  --layer: var(--gtp-brand-gold);
  --layer-ink: color-mix(in srgb, var(--gtp-brand-gold) 50%, var(--gtp-brand-navy));
}
.layer-tone--coral {
  --layer: var(--gtp-brand-coral);
  --layer-ink: color-mix(in srgb, var(--gtp-brand-coral) 68%, var(--gtp-brand-navy));
}
.layers {
  --layers-ease: 380ms ease;
  --layers-spin: 1.7s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  min-width: 0;
}
.layers-figure {
  position: relative;
  container-type: inline-size;
  width: min(100%, 30rem);
  aspect-ratio: 1;
  margin-inline: auto;
}
.layers-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.layers-halo {
  fill: color-mix(in srgb, var(--gtp-brand-blue) 9%, transparent);
}
.layers-core {
  fill: var(--gtp-surface);
  stroke: var(--gtp-brand-blue);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.layers-band {
  fill: transparent;
  cursor: pointer;
  transition: fill var(--layers-ease);
}
.layers-ring.is-hover .layers-band {
  fill: color-mix(in srgb, var(--layer) 4%, transparent);
}
.layers-ring.is-active .layers-band {
  fill: color-mix(in srgb, var(--layer) 7%, transparent);
}
.layers-line {
  fill: none;
  stroke: color-mix(in srgb, var(--layer) 32%, var(--sl-color-neutral-200));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition:
    stroke var(--layers-ease),
    stroke-width var(--layers-ease);
}
.layers-ring.is-hover .layers-line {
  stroke: color-mix(in srgb, var(--layer) 72%, var(--sl-color-neutral-200));
}
.layers-ring.is-active .layers-line {
  stroke: var(--layer);
  stroke-width: 2;
}
.layers-spoke {
  fill: none;
  stroke: var(--layer);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.1;
  pointer-events: none;
  transition: stroke-dashoffset 220ms ease;
}
.layers-ring.is-active .layers-spoke {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 620ms cubic-bezier(0.22, 1, 0.36, 1) 90ms;
}
.layers-dot,
.layers-badge {
  position: absolute;
  top: var(--y);
  z-index: 1;
  display: grid;
  place-items: center;
  border: var(--gtp-border-width-thin) solid color-mix(in srgb, var(--layer) 35%, var(--sl-color-neutral-200));
  background: var(--gtp-surface);
  translate: -50% -50%;
  pointer-events: none;
  transition:
    scale var(--layers-ease),
    color var(--layers-ease),
    background-color var(--layers-ease),
    border-color var(--layers-ease),
    box-shadow var(--layers-ease),
    rotate var(--layers-spin) calc(var(--i, 0) * 120ms),
    opacity 600ms ease calc(var(--i, 0) * 120ms + 450ms);
}
.layers-ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.layers-ring,
.layers-orbit {
  transition:
    rotate var(--layers-spin) calc(var(--i) * 120ms),
    scale var(--layers-spin) calc(var(--i) * 120ms),
    opacity 700ms ease calc(var(--i) * 120ms);
}
.layers-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.js-reveal .layers-figure.reveal:not(.is-in) :is(.layers-ring, .layers-orbit) {
  opacity: 0;
  rotate: var(--from);
  scale: 0.94;
}
.js-reveal .layers-figure.reveal:not(.is-in) .layers-dot {
  rotate: calc(-1 * var(--from));
}
.js-reveal .layers-figure.reveal:not(.is-in) .layers-badge {
  opacity: 0;
}
.layers-dot {
  left: var(--x);
  width: 7cqi;
  height: 7cqi;
  border-radius: 50%;
  color: color-mix(in srgb, var(--layer) 45%, var(--sl-color-neutral-400));
  scale: 0.8;
}
.layers-dot .gtp-icon {
  width: 55%;
  height: 55%;
}
.layers-dot.is-hover {
  scale: 0.9;
}
.layers-dot.is-active {
  border-color: var(--layer);
  color: var(--layer-ink);
  box-shadow:
    0 0 0 1.1cqi color-mix(in srgb, var(--layer) 16%, transparent),
    0 0.4cqi 1.6cqi color-mix(in srgb, var(--gtp-brand-navy) 10%, transparent);
  scale: 1;
}
.layers-badge {
  left: 50%;
  min-width: 6cqi;
  height: 6cqi;
  padding-inline: 1cqi;
  border-radius: 999px;
  color: var(--sl-color-neutral-500);
  font-size: clamp(0.625rem, 2.6cqi, 0.875rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--sl-font-weight-semibold);
  line-height: 1;
}
.layers-badge.is-active {
  border-color: var(--layer);
  background: var(--layer);
  color: var(--gtp-brand-navy);
}
.layers-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqi;
  width: 22cqi;
  text-align: center;
  translate: -50% -50%;
  pointer-events: none;
}
.layers-hub img {
  display: block;
  width: 100%;
  height: auto;
}
.layers-hub p {
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: clamp(0.95rem, 4.6cqi, 1.6rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.layers-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  width: min(100%, 34rem);
  min-width: 0;
  margin-inline: auto;
}
.layers-side .autoplay-toggle {
  margin-inline-start: 0.6rem;
}
.layers-list {
  --layers-indent: calc(1.25rem + 0.75rem + 1.4rem + 2 * 0.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.layers-item {
  position: relative;
  border-radius: var(--gtp-radius-md-lg);
  transition:
    background-color var(--layers-ease),
    box-shadow var(--layers-ease);
}
.layers-item.is-open {
  background: var(--gtp-surface);
  box-shadow: var(--gtp-shadow-selected);
}
.layers-item-head {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: inherit;
}
.layers-item-button {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--gtp-text-secondary);
  font: inherit;
  font-size: var(--sl-font-size-large);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color var(--layers-ease);
}
.layers-item.is-open .layers-item-button {
  color: var(--gtp-text-primary);
  cursor: default;
}
.layers-item-button:focus-visible {
  outline: none;
  box-shadow: var(--gtp-input-focus-shadow);
}
.layers-item-mark {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--layer);
  border-radius: 50%;
  transition: background-color var(--layers-ease);
}
.layers-item-number {
  flex: none;
  width: 1.4rem;
  color: var(--layer-ink);
  font-size: var(--sl-font-size-medium);
  font-variant-numeric: tabular-nums;
  font-weight: var(--sl-font-weight-semibold);
}
.layers-item.is-open .layers-item-title {
  font-weight: var(--sl-font-weight-semibold);
}
.layers-item.is-open .layers-item-mark {
  background: var(--layer);
}
@media (hover: hover) {
  .layers-item:not(.is-open):hover {
    background: var(--sl-color-neutral-50);
  }
  .layers-item:not(.is-open):hover .layers-item-button {
    color: var(--gtp-text-primary);
  }
}
.layers-progress {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0.45rem;
  width: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--sl-color-neutral-200);
  opacity: 0;
  transition: opacity var(--layers-ease);
}
.layers.is-auto .layers-item.is-open .layers-progress {
  opacity: 1;
}
.layers-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--layer);
  transform-origin: top;
  scale: 1 0;
}
.layers.is-auto .layers-item.is-open .layers-progress::after {
  animation: tour-progress 6s linear both;
}
.layers:not(.is-visible) .layers-progress::after {
  animation-play-state: paused;
}
.layers-item-body {
  display: grid;
  grid-template-rows: 1fr;
}
.layers.is-ready .layers-item-body {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--layers-ease),
    visibility 0s linear 380ms;
}
.layers.is-ready .layers-item.is-open .layers-item-body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--layers-ease),
    visibility 0s;
}
.layers-item-body > div {
  min-height: 0;
  overflow: hidden;
}
.layers-item-body p {
  margin: 0;
  padding: 0 1.25rem 1.1rem var(--layers-indent);
  color: var(--gtp-text-secondary);
  line-height: 1.55;
}
.layers.is-ready .layers-item-body p {
  opacity: 0;
  transition: opacity 240ms ease;
}
.layers.is-ready .layers-item.is-open .layers-item-body p {
  opacity: 1;
  transition: opacity 320ms ease 120ms;
}
.layers-item-body p > span {
  display: block;
}
@media (min-width: 1024px) {
  .layers {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
  .layers-figure {
    width: min(100%, 34rem);
  }
  .layers-side {
    width: 100%;
    margin-inline: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .layers *,
  .layers.is-ready .layers-item-body,
  .layers.is-ready .layers-item.is-open .layers-item-body,
  .layers.is-ready .layers-item-body p,
  .layers.is-ready .layers-item.is-open .layers-item-body p {
    transition: none;
  }
  .layers-progress::after {
    animation: none;
  }
}
@media not ((hover: hover) and (pointer: fine)) {
  .about-story p a:focus-visible,
  .site-copy p a:focus-visible,
  .about-story p a:hover,
  .site-copy p a:hover {
    color: inherit;
  }
}
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover .gtp-icon {
    translate: 0.15rem 0;
  }
}
@media (max-width: 767px) {
  #in-het-kort .site-copy > .cta-row {
    gap: 1.15rem;
  }
  .hero-dot-face {
    width: 2.55rem;
    height: 2.55rem;
  }
  .hero-dot--person .hero-dot-face {
    width: 2.85rem;
    height: 2.85rem;
  }
  .hero-dot-face .gtp-icon {
    width: 1.1rem;
    height: 1.1rem;
  }
  #in-het-kort .site-band,
  #probleem .site-band,
  #aanpak .site-band,
  #resultaat .site-band,
  #expertises .site-band,
  #over-ons .site-band {
    gap: clamp(3.75rem, 10vh, 5.5rem);
  }
  #over-ons {
    gap: clamp(3.75rem, 10vh, 5.5rem);
  }
  #in-het-kort .section-head,
  #probleem .section-head,
  #aanpak .section-head,
  #resultaat .section-head,
  #expertises .section-head,
  #over-ons .section-head {
    gap: 1.5rem;
  }
  .stage,
  .issue {
    gap: 2.5rem;
  }
  #in-het-kort .site-copy,
  #toolbox .site-copy,
  .method-chapters .site-copy {
    gap: 1.5rem;
  }
  .issue-grid {
    gap: 3.25rem;
  }
  .issue-copy {
    gap: 0.75rem;
  }
  .issue-close {
    gap: 1.85rem;
    margin-top: clamp(1.6rem, 5vh, 3rem);
  }
  .skill-grid {
    gap: 2.5rem;
  }
  .skill {
    gap: 1.2rem;
  }
  .skill-copy {
    gap: 0.7rem;
  }
  .method-chapters {
    gap: clamp(5.5rem, 14vh, 8rem);
    margin-top: clamp(2rem, 7vh, 4rem);
  }
}
@media (min-width: 768px) {
  .platform-visual {
    --orbit-size: min(80rem, 125vw);
  }
  .method-chapters .stage {
    justify-items: center;
    gap: 2.75rem;
  }
  .method-chapters .method-scene,
  .method-chapters .site-copy {
    width: 100%;
    max-width: 34rem;
  }
  .issue {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    align-items: center;
    gap: 2.25rem;
  }
  .issue .media-frame--issue {
    min-height: 12rem;
  }
  .issue-copy {
    max-width: 17rem;
  }
  .result-grid {
    gap: 1.25rem;
  }
  .result-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .result-card {
    grid-template-columns: minmax(0, 1fr);
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-items: start;
    row-gap: 0.5rem;
    padding: 1.5rem 1.6rem 1.65rem;
  }
  .result-card .outcome-mark {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 1023px) {
  #in-het-kort .site-band,
  #probleem .site-band,
  #aanpak .site-band,
  #resultaat .site-band,
  #expertises .site-band,
  #over-ons .site-band {
    gap: 0;
  }
  #in-het-kort .stage--photo .method-scene {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
  }
  .stage .media-frame:has(img),
  .issue .media-frame:has(img) {
    min-height: 0;
    max-height: none;
    height: auto;
  }
  .media-frame--wide.media-frame--illustration img {
    position: static;
    inset: auto;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    translate: none;
  }
  .about-collage .media-frame--photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
  #in-het-kort .stage {
    gap: 2rem;
  }
  .issue + .issue::before,
  .issue-close::before,
  .method-chapters .stage::before {
    content: "";
    display: block;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: var(--gtp-border-width-thin);
    margin-inline: 0;
    margin-block: var(--gtp-hairline-space);
    border: 0;
    background-color: transparent;
    background-image: linear-gradient(var(--gtp-border), var(--gtp-border));
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--gtp-hairline-width) 100%;
    pointer-events: none;
  }
  .issue + .issue::before,
  .method-chapters .stage::before {
    grid-column: 1 / -1;
  }
  .issue-grid {
    gap: 0;
  }
  .issue-close {
    margin-top: 0;
  }
  .method-chapters {
    gap: 0;
    margin-top: 0;
  }
  #probleem {
    --gtp-hairline-space: clamp(4.25rem, 10vh, 5.5rem);
  }
  #probleem .issue {
    gap: clamp(2rem, 5vh, 2.75rem);
  }
  #aanpak .method-chapters {
    --gtp-hairline-space: clamp(4.25rem, 10vh, 5.5rem);
  }
  #aanpak .method-chapters > .stage:first-child {
    margin-top: clamp(5.75rem, 14vh, 7.5rem);
  }
  #expertises {
    --gtp-hairline-space: clamp(4.25rem, 10vh, 5.5rem);
  }
  #toolbox .stage {
    gap: clamp(3.75rem, 9vh, 5.25rem);
  }
  #toolbox .site-copy {
    align-items: center;
    gap: clamp(1.75rem, 4vh, 2.5rem);
    max-width: 36rem;
    margin-inline: auto;
    text-align: center;
  }
  #toolbox .site-copy h2,
  #toolbox .site-copy p {
    margin-inline: auto;
  }
  #over-ons .section-head::after {
    content: none;
    display: none;
    margin: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .result-visual {
    flex-direction: row;
  }
  .result-visual .media-frame {
    flex: 0 0 calc((100% - 1.25rem) / 2);
    aspect-ratio: auto;
    min-height: 15rem;
  }
  .result-visual-copy {
    justify-content: center;
    padding: 1.75rem;
    border-top: 0;
    border-left: var(--gtp-rule);
  }
  .home .project-grid > .project-card:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
  .home .project-grid > .project-card:nth-child(3):last-child > a {
    flex-direction: row;
  }
  .home .project-grid > .project-card:nth-child(3):last-child .project-card-media {
    display: flex;
    flex: 0 0 calc((100% - 1.75rem) / 2);
    border-radius: var(--project-card-radius) 0 0 var(--project-card-radius);
  }
  .home .project-grid > .project-card:nth-child(3):last-child .media-frame--project:has(img) {
    height: auto;
    aspect-ratio: auto;
  }
  #in-het-kort .stage {
    justify-items: center;
  }
  #in-het-kort .site-copy {
    max-width: 36rem;
    margin-inline: auto;
  }
  .issue + .issue::before,
  .issue-close::before,
  .method-chapters .stage::before {
    content: none;
    display: none;
    margin: 0;
  }
  .issue + .issue,
  .issue-close,
  .method-chapters .stage {
    margin-top: var(--gtp-hairline-space);
  }
}
@media (max-width: 767px) {
  .site-band .issue > .media-frame,
  .site-band .stage > .media-frame,
  .site-band .stage > .platform-visual,
  .site-band .stage > .method-scene,
  .site-band > .skill-orbit {
    margin-inline: calc(-1 * var(--gtp-chrome-bleed));
    width: calc(100% + 2 * var(--gtp-chrome-bleed));
    max-width: none;
  }
  .issue-copy {
    align-self: center;
  }
  #in-het-kort .section-head::after {
    content: none;
    display: none;
    margin: 0;
  }
  .skill-orbit {
    padding: 0;
  }
  .skill-orbit-ring--track,
  .skill-orbit-ring--progress {
    display: none;
  }
  .skill-grid {
    gap: 0;
  }
  .skill {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.1rem;
    max-width: none;
    margin-inline: 0;
    padding-block: 0;
    text-align: left;
  }
  .issue + .issue::before,
  .issue-close::before,
  .method-chapters .stage::before {
    content: none;
    display: none;
    margin: 0;
  }
  .issue + .issue,
  .issue-close,
  .method-chapters .stage {
    margin-top: var(--gtp-hairline-space);
  }
  .skill + .skill {
    margin-top: 2.5rem;
  }
  .skill-mark {
    box-shadow: none;
  }
  .skill-copy {
    align-items: flex-start;
    gap: 0.4rem;
  }
  #expertises .skill {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #expertises .skill-copy {
    align-items: center;
  }
}
@media (min-width: 768px) {
  .skill-orbit {
    --orbit-r: calc(13rem + 4.5vw);
    --skill-mark: 3.6rem;
    --skill-ring-width: 1px;
    width: min(100%, calc(var(--orbit-r) * 2 + 18rem));
    min-height: calc(var(--orbit-r) * 2 + 11rem);
    padding: 0.85rem 0 7.5rem;
  }
  .skill-orbit-ring--track,
  .skill-orbit-ring--progress {
    inset: auto;
    left: 50%;
    top: calc(var(--orbit-r) + (var(--skill-mark) / 2) + 0.85rem);
    width: calc(var(--orbit-r) * 2);
    height: calc(var(--orbit-r) * 2);
    translate: -50% -50%;
    border-radius: var(--gtp-radius-circle);
  }
  .skill-orbit-ring--track {
    border: 1px solid color-mix(in srgb, var(--gtp-brand-blue) 24%, transparent);
  }
  .skill-orbit-ring--progress {
    display: block;
    border: 0;
    background: conic-gradient(
      from -90deg,
      var(--sl-color-primary-700) 0deg,
      var(--sl-color-primary-700) calc(var(--skill-fill-count) * 60deg),
      transparent calc(var(--skill-fill-count) * 60deg)
    );
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--skill-ring-width)),
      #000 calc(100% - var(--skill-ring-width) + 0.5px)
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--skill-ring-width)),
      #000 calc(100% - var(--skill-ring-width) + 0.5px)
    );
  }
  .js-reveal .skill-orbit:not(.is-in) .skill-orbit-ring--track {
    animation: none;
    rotate: -48deg;
  }
  .js-reveal .skill-orbit:not(.is-in) .skill-orbit-ring--progress {
    animation: none;
    rotate: -48deg;
    --skill-fill-count: 0;
  }
  .js-reveal .skill-orbit:not(.is-in) .skill {
    animation: none;
    transform: rotate(calc(var(--a) - 48deg)) translate(var(--orbit-r)) rotate(calc(48deg - var(--a)))
      translate(-50%, calc(var(--skill-mark) / -2));
  }
  .js-reveal .skill-orbit.is-in .skill-orbit-ring--track {
    animation: skill-orbit-arrive 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .js-reveal .skill-orbit.is-in .skill-orbit-ring--progress {
    animation: skill-orbit-arrive 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .js-reveal .skill-orbit.is-in .skill {
    animation: skill-orbit-item-arrive 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .skill-grid {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--orbit-r) * 2 + var(--skill-mark) + 1.7rem);
  }
  .skill {
    --a: calc((var(--i) * 60deg) - 90deg);
    position: absolute;
    left: 50%;
    top: calc(var(--orbit-r) + (var(--skill-mark) / 2) + 0.85rem);
    width: min(17.25rem, 28.5vw);
    max-width: min(17.25rem, 28.5vw);
    transform-origin: 0 0;
    transform: rotate(var(--a)) translate(var(--orbit-r)) rotate(calc(var(--a) * -1))
      translate(-50%, calc(var(--skill-mark) / -2));
  }
  .skill h3 {
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .skill-copy {
    padding: 0.25rem 0.65rem 0.45rem;
    border-radius: 1.15rem;
    background: var(--gtp-page-bg);
    box-shadow: 0 0 1.5rem 1.05rem var(--gtp-page-bg);
  }
}
@media (min-width: 1024px) {
  .skill-orbit {
    --orbit-r: min(16.75rem, 26vw);
    min-height: calc(var(--orbit-r) * 2 + 9.5rem);
  }
  .skill {
    width: 17.25rem;
    max-width: 17.25rem;
  }
  .issue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    gap: 4rem;
    width: 100%;
  }
  .issue {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.85rem;
  }
  .issue-grid > .issue {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-items: start;
  }
  .issue-grid > .issue > .issue-copy {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-items: start;
    justify-self: center;
  }
  .issue .media-frame--issue {
    min-height: 12.5rem;
  }
  .result-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
  }
  .about-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
  .about-collage,
  .about-story {
    max-width: none;
  }
  .result-list {
    gap: 1.5rem;
  }
  .result-visual .media-frame {
    flex: 1 1 0;
    aspect-ratio: auto;
    min-height: 13rem;
  }
  .result-visual-copy {
    padding: 1.5rem 1.6rem 1.65rem;
  }
  .platform-visual {
    --orbit-size: min(58rem, 72vw);
    width: 100%;
    min-height: 30rem;
    align-self: stretch;
  }
  .hero--page .platform-visual,
  #toolbox .platform-visual {
    min-height: 0;
  }
  #toolbox .tool-cards {
    margin-top: clamp(3rem, 6.5vw, 6rem);
  }
  .stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
  }
  .method-chapters .stage {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    justify-items: stretch;
    gap: 5rem;
  }
  .method-chapters .method-scene {
    max-width: none;
  }
  .method-chapters .stage--swap {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
  .method-chapters .stage--swap .method-scene {
    order: 2;
  }
  .method-chapters .stage--swap .site-copy {
    order: 1;
  }
  .stage--photo {
    grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr);
    gap: 4rem;
  }
  #in-het-kort .stage--photo {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
  }
  #in-het-kort .stage--photo .method-scene {
    max-width: none;
  }
  .stage--flip .media-frame,
  .stage--flip .platform-visual,
  .stage--swap .media-frame {
    order: 2;
  }
  .stage--swap .site-copy {
    order: 1;
  }
  .toolbox .hero--page .hero-center,
  .som-com .hero--page .hero-center {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.9fr);
    align-items: center;
    gap: 3.5rem 4rem;
  }
  .toolbox .hero-copy,
  .som-com .hero-copy {
    align-items: flex-start;
    text-align: left;
    max-width: none;
    margin-inline: 0;
  }
  .toolbox .hero-copy h1,
  .toolbox .hero-copy .lede,
  .som-com .hero-copy h1,
  .som-com .hero-copy .lede {
    margin-inline: 0;
  }
  .toolbox .hero-copy .cta-row,
  .som-com .hero-copy .cta-row {
    justify-content: flex-start;
  }
}
@media (min-width: 1440px) {
  .skill-orbit {
    --orbit-r: min(20.5rem, 20vw);
    --skill-mark: 3.75rem;
    width: min(100%, calc(var(--orbit-r) * 2 + 20rem));
    min-height: calc(var(--orbit-r) * 2 + 10rem);
  }
  .skill {
    width: 18.5rem;
    max-width: 18.5rem;
  }
}
@media (min-width: 1920px) {
  .skill-orbit {
    --orbit-r: min(24rem, 16vw);
    width: min(100%, calc(var(--orbit-r) * 2 + 22rem));
    min-height: calc(var(--orbit-r) * 2 + 11rem);
  }
}
.site-section.site-section--tint {
  min-height: 0;
  padding-block: var(--gtp-section-pad);
  background: var(--gtp-surface-tint);
}
.toolbox .site-section .site-band,
.som-com .site-section .site-band {
  gap: var(--gtp-section-gap);
}
.site-section.site-section--follow {
  padding-top: calc(var(--gtp-section-pad) * 0.8);
}
.toolbox .site-section .section-head,
.som-com .site-section .section-head {
  margin-bottom: 0;
}
.platform-tour-stage {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.mock-note {
  margin: 0;
  color: var(--gtp-text-secondary);
  font-size: var(--sl-font-size-small);
  line-height: 1.45;
}
.visual-card h3 {
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}
.visual-card p {
  margin: 0;
  color: var(--gtp-text-secondary);
  text-wrap: pretty;
}
.visual-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.visual-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.visual-card > :first-child {
  margin-bottom: 1rem;
}
.toolbox .site-section:has(> .site-band > .visual-cards) > .site-band {
  gap: calc(var(--gtp-section-gap) * 0.8);
}
.visual-cards .app-mock--mini .app-mock-bar,
.visual-cards .app-mock--mini .app-mock-body {
  font-size: clamp(0.625rem, 2.85cqi, 0.8125rem);
}
.toolbox .site-section.site-section--scale {
  padding-bottom: calc(var(--gtp-section-pad) * 0.8);
}
.visual-cards--scale > .visual-card > .visual-card-number {
  margin: 0;
}
.visual-cards--scale .app-mock {
  margin-bottom: 1rem;
}
.spec-block {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  padding-top: clamp(2.5rem, 6vh, 3.5rem);
  border-top: var(--gtp-rule);
}
.spec-block h3 {
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: var(--sl-font-size-x-large);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.01em;
}
.platform-tour {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  width: 100%;
  min-width: 0;
}
.platform-tour-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.platform-tour-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}
.platform-tour-steps .autoplay-toggle {
  margin-inline-start: 0.85rem;
}
.platform-tour-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  width: 100%;
  padding: 1rem 1.15rem 1rem 1.6rem;
  border: 0;
  border-radius: var(--gtp-radius-md-lg);
  background: transparent;
  color: var(--gtp-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--gtp-transition-md),
    box-shadow var(--gtp-transition-md);
}
.platform-tour-tab:focus-visible {
  outline: none;
  box-shadow: var(--gtp-input-focus-shadow);
}
.platform-tour-tab[aria-selected="true"] {
  background: var(--gtp-surface);
  box-shadow: var(--gtp-shadow-selected);
}
.platform-tour-tab[aria-selected="true"]:focus-visible {
  box-shadow: var(--gtp-input-focus-shadow);
}
.platform-tour-number,
.visual-card-number {
  color: var(--sl-color-primary-700);
  font-size: var(--sl-font-size-medium);
  font-variant-numeric: tabular-nums;
  font-weight: var(--sl-font-weight-semibold);
}
.platform-tour-title {
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.platform-tour-text {
  grid-column: 2;
  color: var(--gtp-text-secondary);
  font-size: var(--sl-font-size-medium);
  line-height: 1.55;
  text-wrap: pretty;
}
.platform-tour-tab[aria-selected="false"] {
  color: color-mix(in srgb, var(--gtp-text-primary) 72%, transparent);
}
.platform-tour-progress {
  position: absolute;
  top: 1.05rem;
  bottom: 1.05rem;
  left: 0.65rem;
  width: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--sl-color-neutral-200);
  opacity: 0;
}
.platform-tour-tab[aria-selected="true"] .platform-tour-progress {
  opacity: 1;
}
.platform-tour-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gtp-brand-blue);
  transform-origin: top;
}
.platform-tour.is-auto .platform-tour-tab[aria-selected="true"] .platform-tour-progress::after {
  animation: tour-progress 7s linear both;
}
.platform-tour:not(.is-visible) .platform-tour-progress::after {
  animation-play-state: paused;
}
.autoplay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem 0.35rem 0.65rem;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: var(--sl-border-radius-pill);
  background: var(--gtp-surface);
  color: var(--gtp-text-secondary);
  font: inherit;
  font-size: var(--sl-font-size-small);
  line-height: 1.2;
  cursor: pointer;
  transition:
    color var(--gtp-transition-md),
    border-color var(--gtp-transition-md);
}
.autoplay-toggle[hidden] {
  display: none;
}
.autoplay-toggle:hover {
  color: var(--gtp-text-primary);
  border-color: var(--sl-color-neutral-300);
}
.autoplay-toggle:focus-visible {
  outline: none;
  border-color: var(--gtp-brand-navy);
  color: var(--gtp-text-primary);
}
.autoplay-toggle .gtp-icon {
  width: 1rem;
  height: 1rem;
}
.autoplay-icon {
  display: inline-flex;
}
.autoplay-toggle[data-state="playing"] .autoplay-icon--play,
.autoplay-toggle[data-state="paused"] .autoplay-icon--pause {
  display: none;
}
.app-mock--tour .app-mock-body {
  display: grid;
}
.platform-tour-panel {
  min-width: 0;
  border-radius: 0.75em;
}
.platform-tour.is-ready .platform-tour-panel {
  grid-area: 1 / 1;
}
.platform-tour-panel[hidden] {
  display: block;
  visibility: hidden;
}
.platform-tour-panel[hidden] *,
.platform-tour-panel[hidden] *::before,
.platform-tour-panel[hidden] *::after {
  animation: none !important;
}
.platform-tour-panel:focus-visible {
  outline: 2px solid var(--sl-color-primary-600);
  outline-offset: 0.35em;
}
.pf-app {
  --pf-brown: #7a5a2e;
  --pf-teal: #1f9aa8;
  --pf-gold: #d9a12b;
  --pf-red: var(--gtp-brand-red-text);
  --pf-indigo: #1f3b8a;
  --pf-green: #2e9a5b;
  --pf-purple: #7a3fa8;
  --pf-orange: #e07b2a;
  --pf-violet: #7c6cf0;
  --pf-plum: #5b2148;
  --pf-loop: 7s;
  --pf-field: color-mix(in srgb, color-mix(in srgb, var(--gtp-brand-teal) 50%, var(--gtp-brand-gold)) 24%, var(--sl-color-neutral-0));
  --pf-water: color-mix(in srgb, var(--gtp-brand-blue) 24%, var(--sl-color-neutral-0));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.8em;
  min-width: 0;
  aspect-ratio: 16 / 9;
}
.pf-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-width: 0;
}
.pf-round {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3em;
  height: 2.3em;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 50%;
  background: var(--sl-color-neutral-0);
  color: var(--gtp-brand-navy);
}
.pf-round .gtp-icon {
  width: 1.1em;
  height: 1.1em;
}
.pf-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pf-title strong {
  font-size: 1.3em;
  font-weight: var(--sl-font-weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.pf-title span {
  overflow: hidden;
  color: var(--mock-muted);
  font-size: 0.85em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-actions {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-left: auto;
}
.pf-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 1em;
  background: var(--sl-color-neutral-0);
}
.pf-map {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--pf-field);
}
.pf-map > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pf-strips path {
  stroke: color-mix(in srgb, var(--sl-color-neutral-0) 55%, transparent);
  stroke-width: 0.5;
}
.pf-ditches path {
  stroke: color-mix(in srgb, var(--pf-water) 70%, transparent);
  stroke-width: 0.8;
}
.pf-water {
  fill: var(--pf-water);
}
.pf-vaart {
  fill: none;
  stroke: var(--pf-water);
  stroke-linecap: round;
  stroke-width: 3;
}
.pf-kern {
  fill: color-mix(in srgb, var(--sl-color-neutral-200) 85%, var(--pf-field));
}
.pf-building {
  fill: var(--sl-color-neutral-300);
}
.pf-lanes path {
  fill: none;
  stroke: var(--sl-color-neutral-0);
  stroke-linecap: round;
  stroke-width: 2;
}
.pf-sewer path {
  fill: none;
  stroke: color-mix(in srgb, var(--gtp-brand-blue) 80%, var(--gtp-brand-navy));
  stroke-linecap: round;
  stroke-width: 0.9;
}
.pf-road-edge,
.pf-road {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-road-edge {
  stroke: var(--sl-color-neutral-300);
  stroke-width: 4.2;
}
.pf-road {
  stroke: var(--sl-color-neutral-0);
  stroke-width: 3;
}
.pf-plan {
  fill: none;
  stroke: var(--gtp-brand-red);
  stroke-dasharray: 100;
  stroke-linecap: round;
  stroke-width: 2;
  animation: mock-draw 1.2s ease-out both;
  animation-delay: calc(var(--i) * 150ms + 400ms);
}
.pf-parcel {
  stroke-width: 0.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: mock-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(var(--i) * 60ms + 900ms);
}
.pf-parcel--ja {
  fill: color-mix(in srgb, var(--gtp-brand-red) 55%, var(--sl-color-neutral-0));
  stroke: var(--gtp-brand-red);
}
.pf-parcel--twijfel {
  fill: color-mix(in srgb, var(--gtp-brand-gold) 62%, var(--sl-color-neutral-0));
  stroke: color-mix(in srgb, var(--gtp-brand-gold) 70%, var(--gtp-brand-navy));
}
.pf-parcel--selected {
  stroke: var(--gtp-brand-navy);
  stroke-width: 1.4;
}
.pf-gemaal {
  fill: var(--pf-plum);
  stroke: var(--sl-color-neutral-0);
  stroke-width: 0.9;
}
.pf-map--zoom .pf-road-edge {
  stroke-width: 2.4;
}
.pf-map--zoom .pf-road {
  stroke-width: 1.8;
}
.pf-map--zoom .pf-plan {
  stroke-width: 1;
}
.pf-map--zoom .pf-strips path,
.pf-map--zoom .pf-ditches path {
  stroke-width: 0.25;
}
.pf-map--zoom .pf-parcel {
  stroke-width: 0.3;
}
.pf-map--zoom .pf-parcel--selected {
  stroke-width: 0.7;
}
.pf-zoom {
  position: absolute;
  top: 0.7em;
  right: 0.7em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.6em;
  background: var(--sl-color-neutral-0);
  box-shadow: 0 0.15em 0.5em color-mix(in srgb, var(--gtp-brand-navy) 14%, transparent);
}
.pf-zoom span {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  font-weight: var(--sl-font-weight-semibold);
}
.pf-zoom span + span {
  border-top: var(--gtp-border-width-thin) solid var(--mock-line);
}
.pf-tools {
  position: absolute;
  right: 0.7em;
  bottom: 0.7em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.pf-tools .pf-round {
  width: 2em;
  height: 2em;
  box-shadow: 0 0.15em 0.5em color-mix(in srgb, var(--gtp-brand-navy) 14%, transparent);
}
.pf-tools .gtp-icon {
  width: 1em;
  height: 1em;
}
.pf-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.8em;
  border-left: var(--gtp-border-width-thin) solid var(--mock-line);
}
.pf-panel > * {
  animation: mock-fade 0.5s ease 0.5s both;
}
.pf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0;
}
.pf-tabs span {
  padding: 0.3em 0.7em;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 999px;
  font-size: 0.82em;
  font-weight: var(--sl-font-weight-medium);
  white-space: nowrap;
}
.pf-tabs .is-on {
  border-color: var(--gtp-brand-navy);
  background: var(--gtp-brand-navy);
  color: var(--sl-color-neutral-0);
}
.pf-object {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin: 0.2em 0 0;
  padding-bottom: 0.55em;
  border-bottom: var(--gtp-border-width-thin) solid var(--mock-line);
}
.pf-object strong {
  font-size: 1.05em;
}
.pf-object span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--mock-muted);
  font-size: 0.82em;
}
.pf-object .gtp-icon {
  width: 1em;
  height: 1em;
}
.pf-fields {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  margin: 0;
}
.pf-field dt {
  color: var(--mock-muted);
  font-size: 0.78em;
  font-weight: var(--sl-font-weight-semibold);
}
.pf-field dd {
  margin: 0.15em 0 0;
  font-weight: var(--sl-font-weight-semibold);
}
.pf-field .mock-skeleton {
  display: block;
  height: 0.55em;
  margin-top: 0.4em;
}
.pf-close {
  align-self: flex-end;
  margin-top: auto;
  padding: 0.35em 0.9em;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 999px;
  font-size: 0.82em;
  font-weight: var(--sl-font-weight-semibold);
}
.pf-ask {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  margin-top: auto;
  padding: 0.7em;
  border-radius: 0.7em;
  background: var(--sl-color-primary-50);
}
.pf-app--structure {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 1em;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gtp-brand-navy) 12%, transparent) 0.06em, transparent 0.07em) 0 0 / 1.1em 1.1em,
    var(--mock-soft);
}
.pf-tree {
  position: relative;
  min-height: 0;
}
.pf-tree > svg {
  position: absolute;
  inset: 6% 0 6%;
  width: 100%;
  height: 88%;
}
.pf-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--gtp-brand-navy) 50%, transparent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  animation: mock-fade 0.6s ease both;
  animation-delay: calc(var(--i) * 80ms + 500ms);
}
.pf-edge--org {
  stroke: color-mix(in srgb, var(--gtp-brand-gold) 75%, var(--gtp-brand-navy));
  stroke-dasharray: 4 3;
}
.pf-node {
  position: absolute;
  top: calc(6% + var(--y) * 0.88);
  left: var(--x);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  width: 7.4em;
  padding: 0.4em 0.5em 0.45em;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-left: 0.3em solid var(--c);
  border-radius: 0.45em;
  background: var(--sl-color-neutral-0);
  box-shadow: 0 0.2em 0.6em color-mix(in srgb, var(--gtp-brand-navy) 8%, transparent);
  font-size: 0.74em;
  translate: -50% -50%;
  animation: mock-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(var(--i) * 90ms + 200ms);
}
.pf-node strong {
  overflow: hidden;
  font-size: 0.95em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-node .mock-skeleton {
  height: 0.5em;
}
.pf-node-tag {
  align-self: flex-start;
  padding: 0.1em 0.45em;
  border-radius: 0.3em;
  background: var(--c);
  color: var(--sl-color-neutral-0);
  font-size: 0.8em;
  font-weight: var(--sl-font-weight-semibold);
}
.pf-node-role {
  position: absolute;
  top: -0.75em;
  right: -0.5em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--pf-violet);
  color: var(--sl-color-neutral-0);
  font-size: 0.72em;
  font-weight: var(--sl-font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pf-node--selected {
  z-index: 1;
  width: auto;
  white-space: nowrap;
  border-color: var(--gtp-brand-navy);
  border-left-color: var(--c);
  box-shadow:
    0 0 0 0.25em color-mix(in srgb, var(--gtp-brand-blue) 22%, transparent),
    0 0.2em 0.6em color-mix(in srgb, var(--gtp-brand-navy) 12%, transparent);
}
.pf-legend,
.pf-search-field {
  border-radius: 999px;
  background: var(--sl-color-neutral-0);
  box-shadow: 0 0.15em 0.5em color-mix(in srgb, var(--gtp-brand-navy) 10%, transparent);
}
.pf-legend {
  position: absolute;
  bottom: 0.7em;
  left: 0.7em;
  display: flex;
  gap: 0.8em;
  margin: 0;
  padding: 0.4em 0.8em;
  font-size: 0.78em;
}
.pf-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.pf-legend span::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--dot);
}
.pf-legend-organisatie {
  --dot: var(--pf-violet);
}
.pf-legend-laag {
  --dot: var(--pf-teal);
}
.pf-legend-project {
  --dot: var(--pf-green);
}
.pf-search {
  position: absolute;
  top: 0.7em;
  left: 0.7em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
}
.pf-search-field {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 11em;
  padding: 0.5em 1em;
  color: var(--mock-muted);
  font-size: 0.85em;
}
.pf-search .gtp-icon {
  width: 1em;
  height: 1em;
}
.pf-node-panel {
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  bottom: 0.6em;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  width: 35%;
  overflow: hidden;
  border-radius: 0.9em;
  background: var(--sl-color-neutral-0);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--gtp-brand-navy) 6%, transparent),
    0 1em 2em -1em color-mix(in srgb, var(--gtp-brand-navy) 30%, transparent);
  animation: mock-rise 0.6s ease 0.5s both;
}
.pf-node-cover {
  flex: none;
  height: 22%;
  overflow: hidden;
}
.pf-node-cover .scene-area {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.pf-node-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding-inline: 0.8em;
}
.pf-node-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--gtp-brand-teal) 22%, var(--sl-color-neutral-0));
  color: color-mix(in srgb, var(--gtp-brand-teal) 30%, var(--gtp-brand-navy));
}
.pf-node-mark .gtp-icon {
  width: 1.1em;
  height: 1.1em;
}
.pf-tabs--line {
  gap: 1em;
  padding-inline: 0.8em;
  border-bottom: var(--gtp-border-width-thin) solid var(--mock-line);
}
.pf-tabs--line span {
  padding: 0.35em 0;
  border: 0;
  border-radius: 0;
  color: var(--mock-muted);
}
.pf-tabs--line .is-on {
  background: none;
  color: var(--gtp-brand-navy);
  box-shadow: inset 0 -0.15em 0 var(--gtp-brand-navy);
}
.pf-links-head {
  margin: 0.2em 0.8em 0;
  color: var(--mock-muted);
  font-size: 0.72em;
  font-weight: var(--sl-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pf-links {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin: 0;
  padding: 0 0.8em;
  list-style: none;
}
.pf-links li {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.55em;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 0.55em;
  font-size: 0.82em;
}
.pf-links .gtp-icon {
  flex: none;
  width: 1em;
  height: 1em;
  color: color-mix(in srgb, var(--gtp-brand-teal) 60%, var(--gtp-brand-navy));
}
.pf-links span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--sl-font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-links em {
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--mock-soft);
  color: var(--mock-muted);
  font-size: 0.85em;
  font-style: normal;
}
.pf-world {
  transform-box: view-box;
}
.pf-app--pick .pf-world {
  animation: pf-zoom var(--pf-loop) ease-in-out infinite;
}
.pf-pick-pointer,
.pf-pointer-shape path {
  fill: var(--gtp-brand-navy);
  stroke: var(--sl-color-neutral-0);
  stroke-linejoin: round;
  stroke-width: 1.2;
}
.pf-pick-pointer {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: pf-pick var(--pf-loop) ease-in-out infinite;
}
.pf-parcel--pick {
  stroke: var(--gtp-brand-navy);
  stroke-width: 1.4;
  animation:
    mock-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--i) * 60ms + 900ms) both,
    pf-pick-parcel var(--pf-loop) ease infinite;
}
.pf-stack {
  display: grid;
  flex: 1;
  min-height: 0;
}
.pf-stack > * {
  grid-area: 1 / 1;
  min-height: 0;
}
.pf-hint {
  align-self: center;
  margin: 0;
  color: var(--mock-muted);
  font-size: 0.85em;
  text-align: center;
  opacity: 0;
  animation: pf-hint var(--pf-loop) ease infinite;
}
.pf-detail {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  animation: pf-detail var(--pf-loop) ease infinite;
}
.pf-edge.pf-glow {
  animation:
    mock-fade 0.6s ease calc(var(--i) * 80ms + 500ms) both,
    pf-edge-glow var(--pf-loop) ease-in-out calc(var(--g) * var(--pf-loop) / 3 + 0.6s) infinite;
}
.pf-node.pf-glow {
  animation:
    mock-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--i) * 90ms + 200ms) both,
    pf-node-glow var(--pf-loop) ease-in-out calc(var(--g) * var(--pf-loop) / 3 + 0.6s) infinite;
}
.pf-links li.pf-glow {
  animation: pf-link-glow var(--pf-loop) ease-in-out calc(var(--g) * var(--pf-loop) / 3 + 0.6s) infinite;
}
.pf-parcel-ring {
  fill: none;
  stroke: var(--gtp-brand-navy);
  stroke-width: 0.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-ring 2.4s ease-out 1.4s infinite;
}
.pf-ask-button {
  position: relative;
  animation: pf-press-button var(--pf-loop) ease infinite;
}
.pf-ask-pointer {
  position: absolute;
  top: 55%;
  left: 62%;
  width: 1.15em;
  opacity: 0;
  transform-origin: 0 0;
  animation: pf-press var(--pf-loop) ease-in-out infinite;
}
.pf-pointer-shape {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pf-sent {
  position: absolute;
  bottom: 0.8em;
  left: 0.8em;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 0.9em 0.55em 0.6em;
  border-radius: 0.8em;
  background: var(--sl-color-neutral-0);
  box-shadow: 0 0.3em 1.2em color-mix(in srgb, var(--gtp-brand-navy) 18%, transparent);
  opacity: 0;
  animation: pf-sent var(--pf-loop) ease infinite;
}
.pf-sent > .gtp-icon {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  padding: 0.35em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gtp-brand-teal) 22%, var(--sl-color-neutral-0));
  color: color-mix(in srgb, var(--gtp-brand-teal) 30%, var(--gtp-brand-navy));
}
.pf-sent > span {
  display: flex;
  flex-direction: column;
}
.pf-sent strong {
  font-size: 0.9em;
}
.pf-sent > span > span {
  color: var(--mock-muted);
  font-size: 0.78em;
}
@container mock (max-width: 30rem) {
  .pf-app {
    aspect-ratio: 4 / 3.4;
  }
  .pf-title span,
  .pf-tools,
  .pf-actions .pf-round,
  .pf-tabs:not(.pf-tabs--line) span:not(.is-on),
  .pf-field:nth-child(n + 4),
  .pf-search-field,
  .pf-legend {
    display: none;
  }
  .pf-body {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .pf-node-panel {
    width: 44%;
  }
  .pf-node:not(.pf-node--selected) {
    width: 6.4em;
  }
}
.app-mock {
  --mock-line: color-mix(in srgb, var(--gtp-brand-navy) 9%, transparent);
  --mock-soft: var(--sl-color-neutral-50);
  --mock-muted: var(--sl-color-neutral-500);
  container: mock / inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: var(--gtp-radius-md-lg);
  background: var(--gtp-surface);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--gtp-brand-navy) 4%, transparent),
    0 30px 60px -34px color-mix(in srgb, var(--gtp-brand-navy) 32%, transparent);
  color: var(--gtp-brand-navy);
  text-align: left;
}
.app-mock-bar,
.app-mock-body {
  font-size: clamp(0.5625rem, 1.45cqi, 0.8125rem);
  letter-spacing: 0;
  line-height: 1.35;
}
.app-mock--mini .app-mock-bar,
.app-mock--mini .app-mock-body {
  font-size: clamp(0.5625rem, 2.5cqi, 0.75rem);
}
.app-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.9em;
  height: 2.6em;
  padding-inline: 1em;
  border-bottom: var(--gtp-border-width-thin) solid var(--mock-line);
  background: var(--mock-soft);
}
.app-mock-dots {
  display: flex;
  flex: none;
  gap: 0.4em;
}
.app-mock-dots span {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--sl-color-neutral-300);
}
.app-mock-title {
  overflow: hidden;
  color: var(--mock-muted);
  font-weight: var(--sl-font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-mock-body {
  position: relative;
  padding: 1.1em;
}
.app-mock--mini {
  display: flex;
  flex-direction: column;
  aspect-ratio: 6 / 5;
}
.app-mock--mini .app-mock-body {
  flex: 1;
  min-height: 0;
}
.mock-tone--red {
  --tone: var(--gtp-brand-red);
}
.mock-tone--gold {
  --tone: var(--gtp-brand-gold);
}
.mock-tone--teal {
  --tone: color-mix(in srgb, var(--gtp-brand-teal) 72%, var(--sl-color-primary-700));
}
.mock-tone--navy {
  --tone: var(--gtp-brand-navy);
}
.mock-tone--neutral {
  --tone: var(--sl-color-neutral-400);
}
.mock-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  margin: 0 0 0.7em;
  font-size: 1.08em;
  font-weight: var(--sl-font-weight-semibold);
}
.mock-heading > span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 15%, var(--sl-color-neutral-0));
  color: color-mix(in srgb, var(--tone) 50%, var(--gtp-brand-navy));
  font-size: 0.82em;
  font-weight: var(--sl-font-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
}
.mock-chip .gtp-icon {
  width: 1.1em;
  height: 1.1em;
}
.mock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
}
.mock-dot {
  width: 0.75em;
  height: 0.75em;
  flex: none;
  border-radius: 50%;
  background: var(--tone);
}
.mock-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mock-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  min-width: 0;
  padding: 0.6em 0.15em;
  border-bottom: var(--gtp-border-width-thin) solid var(--mock-line);
  animation: mock-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms + 350ms);
}
.mock-row:last-child {
  border-bottom: 0;
}
.mock-row-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
}
.mock-row-title {
  overflow: hidden;
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-row-meta {
  overflow: hidden;
  color: var(--mock-muted);
  font-size: 0.92em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-progress {
  position: relative;
  display: block;
  width: 4.5em;
  height: 0.45em;
  flex: none;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sl-color-neutral-100);
}
.mock-progress > span {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--tone);
  transform-origin: left;
  animation: mock-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms + 650ms);
}
.mock-card {
  padding: 1em;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 0.75em;
  background: var(--sl-color-neutral-0);
}
.mock-card .mock-heading {
  margin-bottom: 0.4em;
}
.mock-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  height: 100%;
  min-height: 0;
}
.mock-map {
  position: relative;
  aspect-ratio: 16 / 11;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.75em;
  background: color-mix(in srgb, var(--sl-color-primary-50) 55%, var(--sl-color-neutral-100));
}
.app-mock--mini .mock-map {
  flex: 1;
  aspect-ratio: auto;
}
.mock-map-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mock-map-water {
  fill: none;
  stroke: color-mix(in srgb, var(--gtp-brand-blue) 24%, var(--sl-color-neutral-0));
  stroke-linecap: round;
  stroke-width: 22;
}
.mock-map-road {
  fill: none;
  stroke: var(--sl-color-neutral-0);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9;
}
.mock-map-road--minor {
  stroke-width: 5;
}
.mock-map-area {
  fill: color-mix(in srgb, var(--gtp-brand-blue) 12%, transparent);
  stroke: var(--gtp-brand-blue);
  stroke-dasharray: 7 5;
  stroke-linejoin: round;
  stroke-width: 2;
  animation: mock-fade 0.8s ease 0.2s both;
}
.mock-pin {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 1;
  width: 1.3em;
  height: 1.3em;
  margin: -0.65em 0 0 -0.65em;
  border: 0.22em solid var(--sl-color-neutral-0);
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0.15em 0.5em color-mix(in srgb, var(--gtp-brand-navy) 25%, transparent);
  animation: mock-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 140ms + 300ms);
}
.mock-pin--pulse::after {
  content: "";
  position: absolute;
  inset: -0.22em;
  border: 0.15em solid var(--tone);
  border-radius: 50%;
  opacity: 0;
  animation: mock-pulse 2.4s ease-out 1.4s infinite;
}
.mock-pin-label {
  position: absolute;
  top: 50%;
  left: 1.45em;
  padding: 0.25em 0.6em;
  border-radius: 0.5em;
  background: var(--sl-color-neutral-0);
  box-shadow: 0 0.1em 0.45em color-mix(in srgb, var(--gtp-brand-navy) 16%, transparent);
  font-size: 0.9em;
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
  translate: 0 -50%;
}
.mock-map--thumb,
.app-mock--mini .mock-map--thumb {
  flex: none;
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: 0.5em;
}
.mock-map--thumb .mock-pin {
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border-width: 0.18em;
}
.mock-gantt {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.mock-gantt-head,
.mock-gantt li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  align-items: center;
  gap: 0.75em;
  margin: 0;
}
.mock-gantt-months {
  display: flex;
  justify-content: space-between;
  color: var(--mock-muted);
  font-size: 0.85em;
}
.mock-gantt ul {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mock-gantt-label {
  overflow: hidden;
  font-weight: var(--sl-font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-gantt-track {
  position: relative;
  height: 1.35em;
  border-radius: 0.4em;
  background: var(--mock-soft);
}
.mock-gantt-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--from);
  width: var(--w);
  border-radius: 0.4em;
  background: var(--tone);
  transform-origin: left;
  animation: mock-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms + 300ms);
}
.mock-button {
  align-self: flex-start;
  padding: 0.55em 1.15em;
  border-radius: 999px;
  background: var(--gtp-btn-primary-bg);
  color: var(--sl-color-neutral-0);
  font-weight: var(--sl-font-weight-semibold);
}
.mock-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mock-tile .mock-map-base {
  transform-origin: var(--crop, center);
  scale: 1.8;
}
.mock-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45em;
  min-width: 0;
  padding: 0.55em;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 0.75em;
  animation: mock-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms + 300ms);
}
.mock-tile .mock-row-copy {
  flex: none;
  width: 100%;
}
@media (min-width: 768px) {
  .mock-tiles {
    grid-auto-rows: minmax(0, 1fr);
    height: 100%;
  }
  .mock-tile {
    min-height: 0;
  }
  .mock-tile > .mock-map--thumb {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
}
.mock-map--parcels {
  background: var(--mock-soft);
}
.mock-parcel {
  stroke: var(--sl-color-neutral-0);
  stroke-linejoin: round;
  stroke-width: 4;
  animation: mock-fade 0.5s ease both;
  animation-delay: calc(var(--i, 0) * 90ms + 300ms);
}
.mock-parcel--ok {
  fill: color-mix(in srgb, var(--gtp-brand-teal) 45%, var(--sl-color-neutral-0));
}
.mock-parcel--talk {
  fill: color-mix(in srgb, var(--gtp-brand-gold) 55%, var(--sl-color-neutral-0));
}
.mock-parcel--open {
  fill: var(--sl-color-neutral-200);
}
.mock-poll {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 0.4em 0 0;
  padding: 0;
  list-style: none;
}
.mock-poll-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45em 0.75em;
  animation: mock-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms + 300ms);
}
.mock-poll-option .mock-progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 0.75em;
}
.mock-foot {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: auto 0 0;
  color: var(--mock-muted);
}
.mock-foot .gtp-icon {
  width: 1.15em;
  height: 1.15em;
}
.mock-poll-value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--sl-font-weight-bold);
}
.mock-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mock-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: 0;
  padding: 0.8em 0.9em;
  border-radius: 0.75em;
  background: var(--mock-soft);
  animation: mock-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms + 300ms);
}
.mock-kpi strong {
  font-size: 1.9em;
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
}
.mock-card--chart {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
}
.mock-chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}
.mock-chart-grid {
  fill: none;
  stroke: var(--sl-color-neutral-200);
  stroke-width: 1;
}
.mock-chart-area {
  fill: color-mix(in srgb, var(--gtp-brand-blue) 12%, transparent);
  animation: mock-fade 1s ease 1.3s both;
}
.mock-chart-line {
  fill: none;
  stroke: var(--gtp-brand-blue);
  stroke-dasharray: 100;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  animation: mock-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}
.js-reveal .reveal:not(.is-in) .app-mock *,
.js-reveal .reveal:not(.is-in) .app-mock *::after,
.js-reveal .app-mock.reveal:not(.is-in) *,
.js-reveal .app-mock.reveal:not(.is-in) *::after {
  animation-play-state: paused;
}
.final-cta .final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.final-cta .final-cta-actions .btn {
  min-width: 13.5rem;
}
.final-cta .site-band > p.final-cta-note {
  margin-top: 1.25rem;
  color: var(--gtp-muted-on-dark);
  font-size: var(--sl-font-size-medium);
}
.final-cta-note a {
  color: var(--sl-color-neutral-0);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sl-color-neutral-0) 45%, transparent);
  text-underline-offset: 0.2em;
}
@media (hover: hover) {
  .final-cta-note a:hover {
    text-decoration-color: currentColor;
  }
}
@media (max-width: 767px) {
  .app-mock--mini {
    aspect-ratio: auto;
  }
  .app-mock--mini .mock-map:not(.mock-map--thumb) {
    flex: none;
    aspect-ratio: 16 / 10;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .visual-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    gap: 0.6rem 2rem;
  }
  .visual-card > :first-child {
    grid-row: 1 / -1;
    margin: 0;
  }
  .visual-card h3 {
    grid-row: 2;
  }
  .visual-card p {
    grid-row: 3;
  }
  .visual-cards--scale > .visual-card {
    grid-template-rows: 1fr auto auto auto 1fr;
  }
  .visual-cards--scale > .visual-card > .app-mock {
    grid-row: 1 / -1;
    grid-column: 1;
    margin: 0;
  }
  .visual-cards--scale > .visual-card > .visual-card-number {
    grid-row: 2;
    grid-column: 2;
  }
  .visual-cards--scale > .visual-card > h3 {
    grid-row: 3;
    grid-column: 2;
  }
  .visual-cards--scale > .visual-card > p {
    grid-row: 4;
    grid-column: 2;
  }
}
@media (min-width: 1024px) {
  .visual-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2rem;
  }
  .visual-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-items: start;
    row-gap: 0.6rem;
  }
  .visual-cards--scale > .visual-card {
    grid-row: span 4;
  }
  .platform-tour {
    grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.6fr);
    align-items: center;
    gap: 3rem;
  }
}
@media (hover: hover) {
  .platform-tour-tab[aria-selected="false"]:hover {
    background: color-mix(in srgb, var(--sl-color-neutral-0) 55%, transparent);
  }
}
.story {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  min-width: 0;
}
.story-rows {
  display: flex;
  flex-direction: column;
  gap: var(--gtp-row-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-copy.story-copy {
  gap: 0.875rem;
  max-width: var(--gtp-measure);
}
@media (max-width: 1023px) {
  .story--copy-first > .story-copy {
    order: -1;
  }
}
.story-copy h2 {
  text-wrap: balance;
}
.story-copy > p:not(.overline) {
  margin-top: 0.5rem;
}
.story-copy > h2 + p {
  margin-top: var(--sl-spacing-x-small);
}
.story-copy > p:not(.overline) + p {
  margin-top: 0.4rem;
}
.site-copy.story-copy > p.story-lede {
  color: var(--gtp-text-primary);
  font-size: var(--sl-font-size-x-large);
  line-height: 1.55;
}
.story-copy h3 {
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}
.story-number {
  font-variant-numeric: tabular-nums;
}
.feature-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-list > .outcome {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0;
}
.feature-list {
  --outcome-mark: 2.4rem;
}
.feature-list .outcome-mark {
  width: var(--outcome-mark);
  height: var(--outcome-mark);
  flex: none;
}
.feature-list .outcome-mark .gtp-icon {
  width: 1.2rem;
  height: 1.2rem;
}
.feature-list .outcome-copy {
  gap: 0.4rem;
  padding-top: 0.45rem;
}
.feature-list .outcome h3 {
  color: var(--gtp-text-primary);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
}
.feature-list .outcome-copy p {
  max-width: var(--gtp-measure);
}
.feature-list--3 > .outcome {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem 1rem;
}
.feature-list--3 > .outcome > .outcome-copy {
  display: contents;
}
.feature-list--3 > .outcome > .outcome-mark {
  grid-row: 1;
}
.feature-list--3 > .outcome h3 {
  grid-row: 1;
  grid-column: 2;
  padding-top: max(0px, calc((var(--outcome-mark) - 1.25em) / 2));
}
.feature-list--3 > .outcome p {
  grid-row: 2;
  grid-column: 2;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-list--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .feature-list--3 > .outcome {
    grid-row: span 3;
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-list--3 > .outcome h3 {
    grid-row: 2;
    grid-column: 1;
    padding-top: 0;
    margin-top: 0.6rem;
  }
  .feature-list--3 > .outcome p {
    grid-row: 3;
    grid-column: 1;
  }
}
.team-flow {
  --team-flow-line: color-mix(in srgb, var(--gtp-brand-blue) 50%, var(--sl-color-neutral-0));
  --team-flow-step: 1.25rem;
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-flow-stage {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--team-flow-step);
  min-width: 0;
}
.team-flow-label {
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: var(--sl-font-size-medium);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: var(--gtp-letter-spacing-overline);
  line-height: 1.35;
  text-transform: uppercase;
}
.team-flow-text {
  max-width: var(--gtp-measure);
  margin: 0;
  color: var(--gtp-text-secondary);
  font-size: var(--sl-font-size-large);
  line-height: 1.6;
  text-wrap: pretty;
}
.team-flow-stage + .team-flow-stage {
  padding-top: 4.5rem;
}
.team-flow-stage + .team-flow-stage::before,
.team-flow-stage + .team-flow-stage::after {
  content: "";
  position: absolute;
  left: 0.625rem;
}
.team-flow-stage + .team-flow-stage::before {
  top: 1.25rem;
  width: 1px;
  height: 2rem;
  background: var(--team-flow-line);
}
.team-flow-stage + .team-flow-stage::after {
  top: calc(3.25rem - 0.45rem);
  width: 0.45rem;
  height: 0.45rem;
  margin-left: calc(-0.225rem + 0.5px);
  border-right: var(--gtp-border-width-thin) solid var(--team-flow-line);
  border-bottom: var(--gtp-border-width-thin) solid var(--team-flow-line);
  rotate: 45deg;
}
.som-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: som-step;
}
.som-step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-content: start;
  gap: 0.35rem 1rem;
  min-width: 0;
  padding-block: 1.4rem;
  border-top: var(--gtp-rule);
  counter-increment: som-step;
}
.som-step::before {
  content: counter(som-step, decimal-leading-zero);
  grid-row: 1 / span 3;
  color: var(--sl-color-primary-700);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.som-step h3 {
  grid-column: 2;
  margin: 0;
  color: var(--gtp-text-primary);
  font-size: var(--sl-font-size-x-large);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.som-step-text,
.som-step-plus {
  grid-column: 2;
  margin: 0;
  line-height: 1.55;
}
.som-step-text {
  color: var(--gtp-text-primary);
}
.som-step-plus {
  position: relative;
  margin-top: 0.3rem;
  padding-left: 1.15rem;
  color: var(--sl-color-primary-700);
}
.som-step-plus::before {
  content: "+";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: var(--sl-font-weight-bold);
}
.som-plus-text {
  color: var(--sl-color-primary-700);
}
@media (min-width: 1024px) {
  .story {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--gtp-spacing-form-gap);
  }
  .story > .media-frame,
  .story > .method-scene {
    grid-row: 1;
    grid-column: 1 / span 6;
  }
  .story > .story-copy {
    grid-row: 1;
    grid-column: 8 / span 5;
  }
  .story--flip > .media-frame,
  .story--flip > .method-scene {
    grid-column: 7 / span 6;
  }
  .story--wide > .media-frame,
  .story--wide > .method-scene {
    grid-column: 1 / span 7;
    width: calc(100% - var(--gtp-spacing-form-gap));
  }
  .story--flip > .story-copy {
    grid-column: 1 / span 5;
  }
  .feature-list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem var(--gtp-three-gutter);
  }
  .feature-list--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .feature-list--4 > .outcome {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-items: start;
    row-gap: 1rem;
  }
  .feature-list--4 > .outcome > .outcome-copy {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0.4rem;
    padding-top: 0;
  }
  .team-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gtp-three-gutter) minmax(0, 1fr) var(--gtp-three-gutter) minmax(0, 1fr);
    gap: var(--team-flow-step) 0;
    width: 100%;
  }
  .team-flow-stage {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
  .team-flow-stage:nth-child(2) {
    grid-column: 3;
  }
  .team-flow-stage:nth-child(3) {
    grid-column: 5;
  }
  .team-flow-stage > :nth-child(2) {
    align-self: center;
  }
  .team-flow-stage + .team-flow-stage {
    padding-top: 0;
  }
  .team-flow-stage + .team-flow-stage::before,
  .team-flow-stage + .team-flow-stage::after {
    grid-row: 2 / 3;
    top: 50%;
    left: auto;
  }
  .team-flow-stage + .team-flow-stage::before {
    right: calc(100% + 1rem);
    width: calc(var(--gtp-three-gutter) - 2rem);
    height: 1px;
  }
  .team-flow-stage + .team-flow-stage::after {
    right: calc(100% + 1rem);
    margin: -0.225rem 0 0;
    border-bottom: 0;
    border-top: var(--gtp-border-width-thin) solid var(--team-flow-line);
  }
  .som-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 4rem;
  }
}
.tool-cards {
  --tool-gap: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tool-gap);
  width: 100%;
  margin-bottom: 0; 
  padding: 0;
  list-style: none;
}
.tool-card {
  container: tool-card / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--gtp-border-width-thin) solid color-mix(in srgb, var(--gtp-brand-navy) 10%, transparent);
  border-radius: var(--gtp-radius-card);
  background: var(--sl-color-neutral-0);
  transition:
    translate 0.25s ease,
    border-color 0.25s ease;
}
.tool-card > h3 {
  margin: 1.5rem 1.5rem 0;
  color: var(--gtp-text-primary);
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.tool-card > p {
  margin: 0.5rem 1.5rem 0;
  color: var(--gtp-text-secondary);
  font-size: var(--sl-font-size-medium);
  line-height: 1.55;
  text-wrap: pretty;
}
.tool-card .arrow-link {
  align-self: flex-start;
  margin: auto 1.5rem 1.5rem;
  padding-top: 1.25rem;
}
.tool-card .arrow-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tool-card:has(.arrow-link:focus-visible) {
  box-shadow: var(--gtp-input-focus-shadow);
}
.tool-card-preview {
  flex: none;
  --mock-line: color-mix(in srgb, var(--gtp-brand-navy) 9%, transparent);
  --mock-soft: var(--sl-color-neutral-50);
  --mock-muted: var(--sl-color-neutral-500);
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--gtp-surface-tint);
  font-size: clamp(0.625rem, 2.5cqi, 0.8125rem);
  line-height: 1.35;
}
.tool-card-preview > .app-mock {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  width: calc(100% - 3rem);
  transition: translate 0.25s ease;
}
.tool-card-preview > .app-mock {
  min-height: calc(100% - 0.75rem);
}
.tool-card .app-mock {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--gtp-brand-navy) 5%, transparent),
    0 14px 30px -20px color-mix(in srgb, var(--gtp-brand-navy) 24%, transparent);
}
.tool-card .app-mock-bar,
.tool-card .app-mock-body {
  font-size: inherit;
}
.tool-card-preview *,
.tool-card-preview *::after {
  animation: none;
}
.tool-card-preview .mock-heading > span:first-child {
  flex: none;
}
.mock-skeleton {
  display: block;
  width: var(--w, 60%);
  height: 0.55em;
  border-radius: 999px;
  background: var(--sl-color-neutral-200);
}
.tool-preview-mark {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  flex: none;
  border-radius: 0.5em;
  background: var(--sl-color-primary-50);
  color: var(--sl-color-primary-700);
}
.tool-preview-mark .gtp-icon {
  width: 1.1em;
  height: 1.1em;
}
.tool-platform {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1em;
}
.tool-platform-nav {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin: 0;
  padding: 0 0.9em 0 0;
  border-right: var(--gtp-border-width-thin) solid var(--mock-line);
  list-style: none;
}
.tool-platform-nav li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.7em;
  border-radius: 0.55em;
  color: var(--mock-muted);
  font-weight: var(--sl-font-weight-medium);
}
.tool-platform-nav li.is-active {
  background: var(--sl-color-primary-50);
  color: var(--sl-color-primary-700);
}
.tool-platform-nav .gtp-icon {
  width: 1.2em;
  height: 1.2em;
}
.tool-platform-map {
  --info-w: 12em;
  position: relative;
  min-width: 0;
}
.tool-platform-map .mock-map {
  height: 100%;
  min-height: 18em;
  aspect-ratio: auto;
}
.tool-platform-info {
  position: absolute;
  top: 1.2em;
  right: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: var(--info-w);
  box-shadow: 0 0.4em 1.2em -0.5em color-mix(in srgb, var(--gtp-brand-navy) 22%, transparent);
}
.tool-platform-pins {
  position: absolute;
  inset: 0 calc(var(--info-w) + 1.4em) 0 0;
}
.tool-platform-info .mock-heading {
  margin: 0;
}
.tool-platform-info .mock-row {
  gap: 0.6em;
  padding-block: 0.45em;
}
.tool-platform-info .mock-row .mock-skeleton {
  margin-left: auto;
}
.tool-book-bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.8em;
  color: var(--mock-muted);
  font-weight: var(--sl-font-weight-medium);
}
.tool-book-bar .gtp-icon {
  width: 1.25em;
  height: 1.25em;
  color: var(--gtp-brand-navy);
}
.tool-book-pages {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.tool-book {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 0.5em;
  background: var(--sl-color-neutral-0);
  box-shadow:
    0 0 0 var(--gtp-border-width-thin) var(--mock-line),
    0 0.6em 1.4em -0.8em color-mix(in srgb, var(--gtp-brand-navy) 25%, transparent);
}
.tool-page {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  min-width: 0;
  min-height: 15em;
  padding: 1.1em 1em 1.4em;
}
.tool-page + .tool-page {
  border-left: var(--gtp-border-width-thin) solid var(--mock-line);
}
.tool-book-number {
  margin: 0.4em 0 0;
  color: var(--sl-color-primary-700);
  font-size: 2.6em;
  font-weight: var(--sl-font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tool-book-title {
  margin: 0 0 0.35em;
  padding-bottom: 0.5em;
  overflow: hidden;
  border-bottom: var(--gtp-border-width-thin) solid color-mix(in srgb, var(--sl-color-primary-700) 35%, transparent);
  color: var(--sl-color-primary-700);
  font-size: 1.15em;
  text-overflow: ellipsis;
}
.tool-book-toc {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}
.tool-book .mock-skeleton {
  height: 0.4em;
}
.tool-book-toc .mock-skeleton {
  background: color-mix(in srgb, var(--sl-color-primary-700) 30%, var(--sl-color-neutral-0));
}
.tool-book-callout {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.8em;
  border-radius: 0.35em;
  background: var(--sl-color-primary-700);
}
.tool-book-callout .mock-skeleton {
  background: color-mix(in srgb, var(--sl-color-neutral-0) 55%, transparent);
}
.tool-book-callout-title,
.tool-book-heading {
  display: block;
  height: 0.6em;
  border-radius: 999px;
}
.tool-book-callout-title {
  width: 45%;
  margin-bottom: 0.15em;
  background: var(--sl-color-neutral-0);
}
.tool-book-heading {
  width: 60%;
  margin-top: 0.45em;
  background: color-mix(in srgb, var(--sl-color-primary-700) 60%, var(--sl-color-neutral-0));
}
.tool-book-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6em;
}
.tool-book-cols > div {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.tool-book--turn {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  perspective: 60em;
}
.tool-book-turn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: tool-book-turn 7s ease-in-out 2.4s infinite;
}
.tool-book-face {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-left: var(--gtp-border-width-thin) solid var(--mock-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gtp-brand-navy) 6%, transparent), transparent 22%), var(--sl-color-neutral-0);
  opacity: 0;
  backface-visibility: hidden;
  animation: tool-book-face 7s ease-in-out 2.4s infinite;
}
.tool-book-face.tool-book-face--back {
  border-left: 0;
  border-right: var(--gtp-border-width-thin) solid var(--mock-line);
  background: linear-gradient(270deg, color-mix(in srgb, var(--gtp-brand-navy) 6%, transparent), transparent 22%), var(--sl-color-neutral-0);
  transform: rotateY(180deg);
}
.tool-custom {
  position: absolute;
  inset: 0;
}
.tool-custom-map {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  width: 78%;
}
.tool-custom-map .app-mock-body {
  position: relative;
  padding: 0.8em;
}
.tool-custom-map .mock-map {
  aspect-ratio: 16 / 10;
}
.tool-custom-layers {
  position: absolute;
  top: 1.6em;
  left: 1.6em;
  padding: 0.75em 0.9em;
  box-shadow: 0 0.4em 1.2em -0.5em color-mix(in srgb, var(--gtp-brand-navy) 22%, transparent);
}
.tool-custom-layers .mock-heading {
  margin-bottom: 0.4em;
}
.tool-custom-layers ul {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tool-custom-layers li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--gtp-brand-navy);
}
.tool-check {
  display: grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  border: 0.12em solid var(--sl-color-neutral-300);
  border-radius: 0.3em;
  color: transparent;
}
.tool-check.is-on {
  border-color: var(--sl-color-primary-700);
  background: var(--sl-color-primary-700);
  color: var(--sl-color-neutral-0);
}
.tool-check .gtp-icon {
  width: 0.85em;
  height: 0.85em;
}
.tool-custom-dashboard {
  position: absolute;
  right: 1.25rem;
  bottom: -1.5rem;
  width: 44%;
  padding: 1em 1.1em 2.5em;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--gtp-brand-navy) 5%, transparent),
    0 14px 30px -20px color-mix(in srgb, var(--gtp-brand-navy) 28%, transparent);
  transition: translate 0.25s ease;
}
.tool-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.45em;
  height: 5.5em;
  margin: 0.6em 0 0;
}
.tool-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 0.25em 0.25em 0 0;
  background: color-mix(in srgb, var(--gtp-brand-blue) 75%, var(--sl-color-neutral-0));
}
@container tool-card (max-width: 22rem) {
  .tool-platform {
    grid-template-columns: minmax(0, 1fr);
  }
  .tool-platform-nav {
    display: none;
  }
  .tool-platform-map {
    --info-w: 11.5em;
  }
  .tool-book-title {
    font-size: 1.05em;
  }
  .tool-book-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .tool-book-cols > div + div {
    display: none;
  }
  .tool-custom-map {
    width: calc(100% - 1.75rem);
  }
  .tool-custom-dashboard {
    width: 38%;
    right: 0.75rem;
  }
  .tool-custom-dashboard .mock-heading {
    font-size: 1em;
  }
}
@media (hover: hover) {
  .tool-card:hover {
    border-color: color-mix(in srgb, var(--gtp-brand-navy) 20%, transparent);
    translate: 0 -2px;
  }
  .tool-card:hover .tool-card-preview > .app-mock,
  .tool-card:hover .tool-card-shot,
  .tool-card:hover .tool-custom-dashboard {
    translate: 0 -3px;
  }
  .tool-card:hover .arrow-link .gtp-icon {
    translate: 0.22rem 0;
  }
}
@media (min-width: 768px) {
  .tool-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tool-card:nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--tool-gap)) / 2);
  }
}
@media (min-width: 1024px) {
  .tool-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tool-card:nth-child(3):last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}
.method-scene {
  --mock-line: color-mix(in srgb, var(--gtp-brand-navy) 9%, transparent);
  --mock-soft: var(--sl-color-neutral-50);
  --mock-muted: var(--sl-color-neutral-500);
  --scene-shadow:
    0 1px 2px color-mix(in srgb, var(--gtp-brand-navy) 6%, transparent),
    0 1.4em 2.8em -1.4em color-mix(in srgb, var(--gtp-brand-navy) 34%, transparent);
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 5 / 4;
  color: var(--gtp-brand-navy);
  text-align: left;
}
.scene-canvas {
  position: absolute;
  inset: 0;
  font-size: 2.15cqi;
  line-height: 1.35;
}
.scene-backdrop {
  position: absolute;
  inset: var(--inset);
  overflow: hidden;
  border-radius: 2.4em;
  background:
    radial-gradient(120% 110% at 0% 0%, var(--sl-color-primary-50) 30%, transparent 75%),
    linear-gradient(140deg, var(--sl-color-primary-100), color-mix(in srgb, var(--gtp-brand-teal) 16%, var(--sl-color-neutral-0)));
  translate: 0 var(--parallax-y, 0px);
  animation: scene-backdrop-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.site-section--tint .scene-backdrop {
  background: linear-gradient(
    140deg,
    var(--sl-color-primary-100),
    color-mix(in srgb, var(--gtp-brand-teal) 20%, var(--sl-color-primary-50))
  );
}
.scene-backdrop > .scene-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--sl-color-neutral-0) 85%, transparent);
  stroke-width: 0.45;
}
.scene-layer {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: var(--o);
  width: var(--w);
  translate: 0 var(--parallax-y, 0px);
}
.scene-layer--up {
  --from: 0 1.8em;
}
.scene-layer--left {
  --from: -2.4em 0;
}
.scene-layer--right {
  --from: 2.4em 0;
}
.scene-in {
  rotate: var(--r, 0deg);
  animation: scene-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--o) * 160ms + 80ms);
}
.scene-layer--float .scene-in {
  animation:
    scene-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) both,
    scene-float 5.5s ease-in-out calc(var(--o) * 0.8s + 1.4s) infinite alternate;
  animation-delay: calc(var(--o) * 160ms + 80ms), calc(var(--o) * 0.8s + 1.4s);
}
.scene-layer--late .scene-in {
  animation-delay: 1.6s;
}
.method-scene .app-mock {
  box-shadow: var(--scene-shadow);
}
.method-scene .app-mock-bar,
.method-scene .app-mock-body {
  font-size: inherit;
}
.scene-card,
.scene-note,
.scene-reply {
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 1em;
  background: var(--sl-color-neutral-0);
  box-shadow: var(--scene-shadow);
}
.scene-card {
  position: relative;
  padding: 0.95em 1.05em 0.7em;
}
.scene-card .mock-heading {
  margin-bottom: 0.3em;
}
.scene-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scene-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-width: 0;
  padding: 0.5em 0;
  border-bottom: var(--gtp-border-width-thin) solid var(--mock-line);
}
.scene-row:last-child {
  border-bottom: 0;
}
.scene-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scene-row .mock-skeleton,
.scene-card .tool-check {
  flex: none;
}
.scene-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--sl-color-primary-100);
  color: var(--sl-color-primary-700);
}
.scene-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.scene-avatar .gtp-icon {
  width: 55%;
  height: 55%;
}
.scene-person {
  position: relative;
  aspect-ratio: 4 / 5;
}
.scene-person-figure {
  position: absolute;
  inset: 0;
  clip-path: inset(-60% -40% 0 -40%);
}
.scene-person-figure > img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  animation: scene-person-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--o) * 160ms + 200ms);
}
.scene-person-figure > img {
  filter: saturate(0.85) contrast(0.94) brightness(1.04) drop-shadow(0 1em 1.4em color-mix(in srgb, var(--gtp-brand-navy) 14%, transparent));
}
.scene-avatar img {
  filter: saturate(0.85) contrast(0.94) brightness(1.04);
}
.scene-layer--person .scene-in {
  animation-name: mock-fade;
}
.scene-person-role,
.scene-portrait-role {
  position: absolute;
  top: var(--tag-y, 40%);
  padding: 0.4em 0.95em;
  border-radius: 999px;
  background: var(--gtp-brand-navy);
  box-shadow: var(--scene-shadow);
  color: var(--sl-color-neutral-0);
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
  animation: mock-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(var(--o) * 160ms + 900ms);
}
.scene-person--tag-center .scene-person-role {
  left: 50%;
  translate: -50% 0;
}
.scene-person--tag-left .scene-person-role {
  left: -10%;
}
.scene-person--tag-right .scene-person-role {
  right: -10%;
}
.scene-cursor {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.scene-cursor svg {
  width: 1.25em;
  height: 1.4em;
  flex: none;
  fill: var(--sl-color-primary-700);
  stroke: var(--sl-color-neutral-0);
  stroke-linejoin: round;
  stroke-width: 1.5;
  filter: drop-shadow(0 0.12em 0.2em color-mix(in srgb, var(--gtp-brand-navy) 30%, transparent));
}
.scene-cursor > span {
  margin: 1.05em 0 0 -0.15em;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  background: var(--sl-color-primary-700);
  color: var(--sl-color-neutral-0);
  font-size: 0.82em;
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
}
.scene-cursor--drag > span,
.scene-cursor--add > span {
  margin: 1.05em -0.15em 0 0;
}
.scene-cursor--drag {
  top: 35%;
  left: calc(var(--from) + var(--w));
  flex-direction: row-reverse;
  translate: calc(-100% + 1.1em) 0;
  animation:
    mock-fade 0.4s ease 1.7s both,
    scene-drag 1s cubic-bezier(0.45, 0, 0.2, 1) 2.3s forwards;
}
.mock-gantt-track:has(.scene-cursor--drag) .mock-gantt-bar {
  animation:
    mock-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    scene-stretch 1s cubic-bezier(0.45, 0, 0.2, 1) 2.3s forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 300ms), 2.3s;
}
.scene-cursor--click {
  bottom: -1.3em;
  left: 1.85em;
  animation: scene-point 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 2s both;
}
.scene-toggle {
  animation: scene-check-on 0.25s ease 2.95s forwards;
}
.scene-note {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 1em 0.6em 0.6em;
}
.scene-note-mark {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  flex: none;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--gtp-brand-teal) 22%, var(--sl-color-neutral-0));
  color: color-mix(in srgb, var(--gtp-brand-teal) 30%, var(--gtp-brand-navy));
}
.scene-note-mark .gtp-icon {
  width: 1.2em;
  height: 1.2em;
}
.scene-note > span:last-child,
.scene-reply-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.scene-note strong,
.scene-reply-text strong {
  font-weight: var(--sl-font-weight-semibold);
}
.scene-note > span:last-child > span,
.scene-reply-text > span {
  overflow: hidden;
  color: var(--mock-muted);
  font-size: 0.92em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scene-note--wrap {
  align-items: flex-start;
}
.scene-note--wrap > span:last-child > span {
  margin-top: 0.15em;
  white-space: normal;
  text-wrap: pretty;
}
.scene-platform {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7em;
}
.scene-platform-nav {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scene-platform-nav li {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.6em;
  color: var(--mock-muted);
}
.scene-platform-nav li.is-on {
  background: var(--sl-color-primary-50);
  color: var(--sl-color-primary-700);
}
.scene-platform-nav .gtp-icon {
  width: 1.1em;
  height: 1.1em;
}
.scene-planning .mock-gantt {
  font-size: 0.85em;
}
.scene-planning .mock-gantt-head,
.scene-planning .mock-gantt li {
  grid-template-columns: 6.2em minmax(0, 1fr);
  gap: 0.5em;
}
.scene-planning .mock-gantt ul {
  gap: 0.4em;
}
.scene-planning .mock-gantt-track {
  height: 1.05em;
}
.scene-hub {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 1em 0.75em 0.8em;
  border-radius: 1em;
  background: var(--gtp-surface-dark);
  box-shadow: var(--scene-shadow);
  color: var(--sl-color-neutral-0);
}
.scene-hub img {
  width: 2.3em;
  height: 2.3em;
  flex: none;
}
.scene-hub > span {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
}
.scene-hub strong {
  font-size: 1.05em;
  font-weight: var(--sl-font-weight-semibold);
  line-height: 1.2;
}
.scene-hub > span > span {
  color: color-mix(in srgb, var(--sl-color-neutral-0) 68%, transparent);
  font-size: 0.85em;
  font-weight: var(--sl-font-weight-semibold);
}
.scene-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.9em;
}
.scene-panel {
  min-width: 0;
}
.scene-panel-title {
  margin: 0 0 0.55em;
  color: var(--mock-muted);
  font-size: 0.9em;
  font-weight: var(--sl-font-weight-semibold);
}
.scene-mini-gantt {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}
.scene-overview .mock-map {
  aspect-ratio: 4 / 3;
}
.scene-mini-docs {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scene-mini-docs li {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: var(--sl-color-primary-700);
}
.scene-mini-docs .gtp-icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}
.scene-map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: var(--gtp-border-width-thin) solid var(--mock-line);
  border-radius: 1.1em;
  background: color-mix(in srgb, var(--sl-color-primary-50) 55%, var(--sl-color-neutral-100));
  box-shadow: var(--scene-shadow);
}
.scene-map-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-map-block {
  fill: color-mix(in srgb, var(--sl-color-neutral-0) 55%, transparent);
}
.scene-map-area {
  fill: color-mix(in srgb, var(--gtp-brand-blue) 13%, transparent);
  stroke: var(--gtp-brand-blue);
  stroke-dasharray: 7 5;
  stroke-linejoin: round;
  stroke-width: 2;
  animation: mock-fade 0.8s ease 0.5s both;
}
.scene-map-area--teal {
  fill: color-mix(in srgb, var(--gtp-brand-teal) 18%, transparent);
  stroke: color-mix(in srgb, var(--gtp-brand-teal) 70%, var(--sl-color-primary-700));
  animation-delay: 0.75s;
}
.scene-map-overlap {
  fill: color-mix(in srgb, var(--gtp-brand-gold) 62%, var(--sl-color-neutral-0));
  animation: mock-fade 0.6s ease 1.15s both;
}
.scene-map-focus {
  fill: none;
  stroke: var(--gtp-brand-navy);
  stroke-width: 2.5;
  animation: mock-fade 0.5s ease 1.5s both;
}
.scene-map-tag {
  position: absolute;
  top: var(--y);
  left: var(--x);
  translate: -50% -50%;
  animation: mock-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) 1.3s both;
}
.scene-map-tag .mock-chip {
  box-shadow: 0 0.2em 0.7em -0.2em color-mix(in srgb, var(--gtp-brand-navy) 25%, transparent);
}
.scene-map-tag--pin {
  animation-delay: 1.6s;
}
.scene-map-tag--pin .mock-pin {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin: 0;
  animation: none;
}
.scene-map-share {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.9em 0.35em 0.4em;
  border-radius: 999px;
  background: var(--sl-color-neutral-0);
  box-shadow: 0 0.2em 0.8em -0.2em color-mix(in srgb, var(--gtp-brand-navy) 22%, transparent);
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
  animation: mock-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1s both;
}
.scene-avatars {
  display: flex;
}
.scene-avatars .scene-avatar {
  width: 1.9em;
  height: 1.9em;
  box-shadow: 0 0 0 0.16em var(--sl-color-neutral-0);
}
.scene-avatars .scene-avatar + .scene-avatar {
  margin-left: -0.5em;
}
.scene-parcel {
  padding-bottom: 1em;
}
.scene-parcel .mock-heading {
  margin-bottom: 0.6em;
}
.scene-parcel-map {
  position: relative;
  overflow: hidden;
  aspect-ratio: 7 / 5;
  border-radius: 0.6em;
  background: var(--mock-soft);
}
.scene-parcel-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mock-parcel--focus {
  fill: color-mix(in srgb, var(--gtp-brand-blue) 26%, var(--sl-color-neutral-0));
  stroke: var(--gtp-brand-navy);
  stroke-width: 3;
}
.scene-street {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.scene-street-far {
  fill: color-mix(in srgb, var(--sl-color-neutral-0) 45%, transparent);
}
.scene-street-near {
  fill: color-mix(in srgb, var(--sl-color-neutral-0) 80%, transparent);
}
.scene-street-window {
  fill: var(--sl-color-primary-100);
}
.scene-street-tree {
  fill: color-mix(in srgb, var(--gtp-brand-teal) 40%, var(--sl-color-neutral-0));
}
.scene-street-ground {
  fill: var(--sl-color-neutral-0);
}
.scene-bubble {
  position: relative;
  margin: 0;
  padding: 0.85em 1.05em;
  border-radius: 1.1em;
  background: var(--sl-color-neutral-0);
  box-shadow: var(--scene-shadow);
  font-weight: var(--sl-font-weight-medium);
  text-wrap: balance;
}
.scene-reply {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 1em 0.6em 0.6em;
}
.scene-reply .scene-avatar {
  width: 2.4em;
  height: 2.4em;
}
.scene-reply-body {
  display: grid;
  align-items: center;
  min-width: 0;
}
.scene-reply-body > * {
  grid-area: 1 / 1;
}
.scene-typing {
  display: flex;
  gap: 0.3em;
  animation: scene-status-out 0.3s ease 2.6s both;
}
.scene-typing span {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--sl-color-neutral-400);
  animation: scene-typing 0.9s ease-in-out infinite;
}
.scene-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.scene-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
.scene-reply-text {
  animation: mock-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 2.75s both;
}
.scene-status {
  display: grid;
  justify-items: end;
}
.scene-status > .mock-chip {
  grid-area: 1 / 1;
}
.scene-status > .mock-chip:first-child {
  animation: scene-status-out 0.4s ease 3s both;
}
.scene-status > .mock-chip:last-child {
  animation: scene-status-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 3.2s both;
}
.scene-layer--secondary {
  --scene-shadow:
    0 1px 2px color-mix(in srgb, var(--gtp-brand-navy) 5%, transparent),
    0 0.9em 2em -1.2em color-mix(in srgb, var(--gtp-brand-navy) 24%, transparent);
}
.scene-layer--secondary .scene-in {
  font-size: 0.9em;
}
.scene-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.4em 1em 0.4em 0.4em;
  border-radius: 999px;
  background: var(--sl-color-neutral-0);
  box-shadow: var(--scene-shadow);
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
}
.scene-tag-mark {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 18%, var(--sl-color-neutral-0));
  color: color-mix(in srgb, var(--tone) 45%, var(--gtp-brand-navy));
}
.scene-tag-mark .gtp-icon {
  width: 1.1em;
  height: 1.1em;
}
.scene-area {
  --area-green: color-mix(in srgb, color-mix(in srgb, var(--gtp-brand-teal) 50%, var(--gtp-brand-gold)) 28%, var(--sl-color-neutral-0));
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--area-green) 35%, var(--sl-color-neutral-50));
}
.scene-area svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-area-green {
  fill: var(--area-green);
  stroke: var(--area-green);
  stroke-linejoin: round;
  stroke-width: 8;
}
.scene-area-water {
  fill: none;
  stroke: color-mix(in srgb, var(--gtp-brand-blue) 38%, var(--sl-color-neutral-0));
  stroke-linecap: round;
}
.scene-area-road-edge {
  fill: none;
  stroke: var(--sl-color-neutral-200);
  stroke-linecap: round;
}
.scene-area-road {
  fill: none;
  stroke: var(--sl-color-neutral-0);
  stroke-linecap: round;
}
.scene-area-road-edge-fill {
  fill: var(--sl-color-neutral-200);
}
.scene-area-road-fill {
  fill: var(--sl-color-neutral-0);
}
.scene-area-building {
  fill: color-mix(in srgb, var(--sl-color-neutral-300) 60%, var(--sl-color-neutral-0));
}
.scene-area-tree {
  fill: color-mix(in srgb, color-mix(in srgb, var(--gtp-brand-teal) 45%, var(--gtp-brand-gold)) 55%, var(--sl-color-neutral-0));
}
.scene-area-talk {
  fill: color-mix(in srgb, var(--gtp-brand-gold) 45%, var(--sl-color-neutral-0));
  stroke: color-mix(in srgb, var(--gtp-brand-gold) 60%, var(--gtp-brand-navy));
  stroke-linejoin: round;
  stroke-width: 1.5;
  animation: mock-fade 0.5s ease 0.3s both;
}
.scene-area-focus {
  fill: color-mix(in srgb, var(--gtp-brand-blue) 30%, var(--sl-color-neutral-0));
  stroke: var(--gtp-brand-navy);
  stroke-linejoin: round;
  stroke-width: 2;
  animation: mock-fade 0.5s ease 0.4s both;
}
.method-scene--card .mock-row {
  padding-block: 0.42em;
}
.scene-avatars--row {
  margin: 0.2em 0 0.35em;
}
.scene-avatars--row .scene-avatar {
  width: 2.3em;
  height: 2.3em;
}
.scene-avatar--more {
  background: var(--sl-color-neutral-100);
  color: var(--gtp-text-secondary);
  font-size: 0.8em;
  font-weight: var(--sl-font-weight-semibold);
}
.scene-avatars--row .scene-avatar--more {
  width: calc(2.3em / 0.8);
  height: calc(2.3em / 0.8);
}
.scene-card--fit {
  width: max-content;
  max-width: 100%;
}
.mock-row.scene-row-live {
  position: relative;
  margin-inline: -0.5em;
  padding-inline: 0.65em;
  border-bottom-color: transparent;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--gtp-brand-gold) 12%, var(--sl-color-neutral-0));
  animation:
    mock-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    scene-live 0.6s ease 2.6s both;
  animation-delay: calc(var(--i, 0) * 110ms + 350ms), 2.6s;
}
.scene-row-live .mock-chip {
  background: var(--sl-color-neutral-0);
}
.scene-progress {
  position: relative;
  margin-bottom: 1.7em;
}
.scene-today {
  position: absolute;
  top: 1.3em;
  bottom: -0.35em;
  left: calc(8.25em + (100% - 8.25em) * var(--at));
  border-left: 1.5px dashed var(--gtp-brand-navy);
  animation: mock-fade 0.5s ease 1.4s both;
}
.scene-today > span {
  position: absolute;
  top: 100%;
  left: 0;
  translate: -50% 0.3em;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  background: var(--gtp-brand-navy);
  color: var(--sl-color-neutral-0);
  font-size: 0.72em;
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
}
.scene-layer--signal .scene-note-mark {
  background: color-mix(in srgb, var(--gtp-brand-gold) 26%, var(--sl-color-neutral-0));
  color: color-mix(in srgb, var(--gtp-brand-gold) 35%, var(--gtp-brand-navy));
}
.method-scene--card {
  aspect-ratio: 4 / 3;
}
.method-scene--card .scene-canvas {
  font-size: 2.9cqi;
}
.scene-chapter {
  flex: none;
  width: 1.6em;
  color: var(--sl-color-primary-700);
  font-weight: var(--sl-font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.scene-card > .mock-chip {
  margin: 0.1em 0 0.45em;
}
.scene-phone {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  aspect-ratio: 9 / 18;
  overflow: hidden;
  padding: 0.8em 0.6em;
  border: 0.45em solid var(--gtp-brand-navy);
  border-radius: 1.6em;
  background: var(--sl-color-neutral-0);
  box-shadow: var(--scene-shadow);
  font-size: 0.8em;
}
.scene-phone-bar {
  margin: 0;
  padding-bottom: 0.45em;
  border-bottom: var(--gtp-border-width-thin) solid var(--mock-line);
  font-weight: var(--sl-font-weight-semibold);
  text-align: center;
}
.scene-phone--rise {
  aspect-ratio: auto;
  height: 51cqi;
  border-bottom: 0;
  border-radius: 1.6em 1.6em 0 0;
  font-size: 0.9em;
}
.scene-layer--rise {
  clip-path: inset(-20% -20% 0 -20%);
}
.scene-layer--rise .scene-in {
  animation-name: scene-person-rise;
}
.scene-phone-button {
  display: block;
  padding: 0.55em;
  border-radius: 999px;
  background: var(--sl-color-primary-700);
  color: var(--sl-color-neutral-0);
  font-weight: var(--sl-font-weight-semibold);
  text-align: center;
}
.scene-phone-news {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em;
  border-radius: 0.7em;
  background: var(--mock-soft);
}
.scene-phone-news > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.scene-phone-news strong {
  font-weight: var(--sl-font-weight-semibold);
}
.scene-phone-news > span:last-child > span {
  color: var(--mock-muted);
  font-size: 0.9em;
}
.scene-plan-head {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 0.15em 0.4em;
  border-bottom: var(--gtp-border-width-thin) solid var(--mock-line);
  color: var(--mock-muted);
  font-size: 0.8em;
  font-weight: var(--sl-font-weight-semibold);
}
.scene-add {
  position: relative;
  display: inline-flex;
  flex: none;
}
.scene-add > .mock-chip {
  animation: mock-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 2.75s both;
}
.mock-row:has(.scene-cursor) {
  position: relative;
  z-index: 2;
}
.method-scene--card .scene-cursor--add {
  top: 0;
  left: 0;
}
.method-scene--card .scene-cursor > span {
  margin-top: 0.3em;
  font-size: 0.74em;
}
.scene-cursor--add {
  top: 80%;
  left: 45%;
  flex-direction: row-reverse;
  translate: calc(-100% + 1.1em) 0;
  animation: scene-point 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 2s both;
}
.scene-order-head,
.scene-order li {
  display: grid;
  grid-template-columns: 2.4em repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.35em;
  margin: 0;
}
.scene-order-head {
  margin-bottom: 0.35em;
}
.scene-order-head > span {
  color: var(--mock-muted);
  font-size: 0.78em;
  text-align: center;
}
.scene-order ul {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  margin: 0 0 0.3em;
  padding: 0;
  list-style: none;
}
.scene-order-label {
  font-size: 0.85em;
  font-weight: var(--sl-font-weight-semibold);
}
.scene-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scene-portrait > .scene-avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  box-shadow:
    0 0 0 0.3em var(--sl-color-neutral-0),
    var(--scene-shadow);
}
.scene-portrait-role {
  position: relative;
  top: auto;
  margin-top: -0.9em;
  font-size: 0.9em;
}
.scene-order-step {
  height: 1.1em;
  border-radius: 0.35em;
  background: var(--tone);
  transform-origin: left;
  animation: mock-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 0.45s + 1.5s);
}
.js-reveal .method-scene.reveal:not(.is-in) {
  opacity: 1;
  translate: none;
}
.js-reveal .method-scene:not(.is-in) *,
.js-reveal .method-scene:not(.is-in) *::after {
  animation-play-state: paused;
}
.method {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 6vh, 3.5rem);
  width: 100%;
}
.method-intro {
  margin: 0;
  text-align: left;
}
.method-intro a {
  white-space: nowrap;
}
.method .accent-card::before {
  top: -58%;
  right: -42%;
}
.method-steps {
  --step-mark: 2.85rem;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1.85rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.method-steps li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--step-mark) minmax(0, 1fr);
  align-items: start;
  column-gap: 0.95rem;
  min-width: 0;
}
.method-steps::before,
.method-steps::after {
  content: "";
  position: absolute;
  top: calc(var(--step-mark) / 2);
  left: calc(var(--step-mark) / 2);
  z-index: 0;
  width: var(--gtp-border-width);
  height: calc(100% - var(--step-mark));
  pointer-events: none;
  translate: -50% 0;
}
.method-steps::before {
  background: color-mix(in srgb, var(--gtp-brand-blue) 28%, var(--sl-color-neutral-0));
}
.method-steps::after {
  background: var(--sl-color-primary-700);
  transform: scaleY(1);
  transform-origin: top center;
}
.js-steps .method-steps::after {
  transform: scaleY(0);
}
.js-steps .method-steps.is-filling::after {
  transform: scaleY(1);
}
.js-steps-ready .method-steps::after {
  transition: transform 0.95s cubic-bezier(0.33, 0.1, 0.25, 1);
}
.method-steps h3 {
  margin: 0;
  color: var(--sl-color-primary-700);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.method-steps li div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding-top: 0.85rem;
}
.method-steps li div p {
  max-width: 18rem;
  margin: 0;
  color: var(--gtp-text-secondary);
}
.sequence-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
@media (max-width: 767px) {
  .method .accent-card::before {
    top: -48%;
    right: -56%;
  }
  .method {
    gap: 2.75rem;
  }
  #aanpak .method {
    padding-top: 1.5rem;
  }
  .method-steps li:last-child::after {
    content: "";
    position: absolute;
    top: calc(var(--step-mark) / 2 + 1px);
    bottom: 0;
    left: calc(var(--step-mark) / 2);
    z-index: 0;
    width: 6px;
    background: var(--sl-color-neutral-0);
    pointer-events: none;
    translate: -50% 0;
  }
}
@media (min-width: 768px) {
  .method-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem 2rem;
  }
  .method-steps::before,
  .method-steps::after {
    top: calc(var(--step-mark) / 2);
    left: calc(var(--step-mark) / 2);
    width: calc(200% / 3);
    height: var(--gtp-border-width);
    transform-origin: left center;
    translate: 0 -50%;
  }
  .js-steps .method-steps::after {
    transform: scaleX(0);
  }
  .js-steps .method-steps.is-filling::after {
    transform: scaleX(1);
  }
  .method-steps li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
  .method-steps li div {
    padding-top: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #in-het-kort .site-copy .sequence-block {
    align-items: center;
  }
}
@media (max-width: 1023px) {
  #in-het-kort .sequence-follow {
    max-width: var(--gtp-measure);
    margin-inline: auto;
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .method {
    grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
  }
}
.result-visual .result-art {
  --mock-line: color-mix(in srgb, var(--gtp-brand-navy) 9%, transparent);
  --mock-soft: var(--sl-color-neutral-50);
  --mock-muted: var(--sl-color-neutral-500);
  container-type: inline-size;
  background:
    radial-gradient(90% 80% at 50% 100%, color-mix(in srgb, var(--gtp-brand-teal) 12%, transparent), transparent 70%),
    var(--gtp-surface-tint);
}
.result-art-canvas {
  position: absolute;
  inset: 0;
  color: var(--gtp-brand-navy);
  font-size: 2.65cqi;
  line-height: 1.3;
  text-align: left;
}
.result-art-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.result-art-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--sl-color-primary-700) 45%, transparent);
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  animation: mock-fade 0.6s ease calc(var(--i) * 120ms + 800ms) both;
}
.result-chip {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.85em 0.4em 0.4em;
  border-radius: 999px;
  background: var(--sl-color-neutral-0);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--gtp-brand-navy) 6%, transparent),
    0 0.8em 1.6em -0.9em color-mix(in srgb, var(--gtp-brand-navy) 35%, transparent);
  font-weight: var(--sl-font-weight-semibold);
  white-space: nowrap;
  translate: -50% -50%;
  rotate: var(--r);
  animation: result-chip-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 120ms + 100ms) both;
}
.result-chip-mark {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 18%, var(--sl-color-neutral-0));
  color: color-mix(in srgb, var(--tone) 55%, var(--gtp-brand-navy));
}
.result-chip-mark .gtp-icon {
  width: 1.05em;
  height: 1.05em;
}
.result-window {
  position: absolute;
  top: 38%;
  bottom: -1.5em;
  left: 50%;
  z-index: 1;
  width: 52%;
  translate: -50% 0;
  animation: result-window-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.result-window .app-mock {
  height: 100%;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--gtp-brand-navy) 5%, transparent),
    0 1.4em 2.8em -1.4em color-mix(in srgb, var(--gtp-brand-navy) 32%, transparent);
}
.result-window .app-mock-bar,
.result-window .app-mock-body {
  font-size: inherit;
}
.result-window .mock-heading {
  margin-bottom: 0.4em;
}
.result-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result-rows li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.36em 0;
  border-bottom: var(--gtp-border-width-thin) solid var(--mock-line);
  font-weight: var(--sl-font-weight-semibold);
}
.result-rows li:last-child {
  border-bottom: 0;
}
.result-check {
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-left: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gtp-brand-teal) 60%, var(--sl-color-primary-700));
  color: var(--sl-color-neutral-0);
  animation: mock-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--i) * 160ms + 1.2s) both;
}
.result-check .gtp-icon {
  width: 0.85em;
  height: 0.85em;
}
.js-reveal .result-visual:not(.is-in) .result-art * {
  animation-play-state: paused;
}
.media-frame--art {
  overflow: visible;
  border: 0;
  background: transparent;
}
.media-frame--art > .issue-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.issue-art g {
  transform-box: fill-box;
  transform-origin: center;
}
.pa {
  animation: pa-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 90ms + 120ms) both;
}
.pa--pop {
  animation-name: pa-pop;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.2, 1.5, 0.4, 1);
}
.pa--flash {
  animation: none;
}
.pa--flash > * {
  animation: pa-fade 0.45s ease calc(var(--i, 0) * 90ms + 120ms + var(--k, 0ms)) both;
}
.pa--flash > :nth-child(2n) {
  --k: 120ms;
}
.pa--flash > :nth-child(3n) {
  --k: 240ms;
}
.pa--hand {
  transform-box: view-box;
  transform-origin: var(--cx) var(--cy);
  animation: pa-sweep 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 90ms + 300ms) both;
}
.pa--spin {
  transform-box: view-box;
  transform-origin: var(--cx) var(--cy);
  animation-name: pa-spin-in;
  animation-duration: 0.9s;
}
.pa--turn {
  animation-name: pa-turn-in;
  animation-duration: 1s;
}
.pa--signal {
  animation:
    pa-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--i, 0) * 90ms + 120ms) both,
    pa-signal 2.4s ease-in-out calc(var(--i, 0) * 90ms + 1200ms) infinite;
}
.js-reveal .issue:not(.is-in) .issue-art * {
  animation-play-state: paused;
}
@media (max-width: 1023px) {
  .issue .media-frame--art {
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }
  .media-frame--art > .issue-art {
    position: static;
    height: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-mock *,
  .app-mock *::before,
  .app-mock *::after,
  .method-scene *,
  .method-scene *::before,
  .method-scene *::after,
  .issue-art *,
  .result-art *,
  .platform-tour-progress::after,
  .layers-progress::after {
    animation: none !important;
  }
  .scene-layer,
  .scene-backdrop {
    translate: none;
  }
  .scene-status > .mock-chip:first-child,
  .scene-typing {
    visibility: hidden;
  }
  .method-steps::after,
  .js-steps .method-steps::after,
  .js-steps .method-steps.is-filling::after {
    transform: none;
    transition: none;
  }
  .hero-dot,
  .hero-dot-face,
  .skill-orbit-ring--track,
  .skill-orbit-ring--progress,
  .skill {
    animation: none;
    rotate: 0deg;
  }
  .js-skill-orbit-ready .skill-mark:not(.is-filled) {
    border-color: var(--sl-color-primary-700);
    background: var(--sl-color-primary-700);
    color: var(--sl-color-neutral-0);
  }
  .skill-mark,
  .skill-orbit-ring--progress,
  .skill-orbit-ring--track {
    transition: none;
  }
  .hero-orbit {
    --orbit-blur: 0px;
    --orbit-parallax: 0px;
    filter: none;
    transform: none;
  }
  .hero:not(.is-hero-in) .hero-orbit,
  .hero.is-hero-in .hero-orbit,
  .js-reveal .hero:not(.is-hero-in) .hero-orbit,
  .js-reveal .hero.is-hero-in .hero-orbit {
    opacity: 1;
    translate: 0;
    transition: none;
  }
  .step-mark,
  .method-steps::after {
    transition: none;
    animation: none;
  }
  .js-steps-ready .method-steps::after {
    transition: none;
  }
  .js-steps .method-steps::after,
  .js-steps .method-steps.is-filling::after {
    transform: none;
    animation: none;
  }
}
@media print {
  .hero-orbit,
  .platform-visual {
    display: none !important;
  }
  .layers-figure {
    display: none;
  }
  .layers.is-ready .layers-item-body {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .layers.is-ready .layers-item-body p {
    opacity: 1;
  }
  .js-steps .step-mark:not(.is-filled) {
    border-color: var(--sl-color-primary-700);
    background: var(--sl-color-primary-700);
    color: var(--sl-color-neutral-0);
  }
  .js-skill-orbit-ready .skill-mark:not(.is-filled) {
    border-color: var(--sl-color-primary-700);
    background: var(--sl-color-primary-700);
    color: var(--sl-color-neutral-0);
  }
}
@keyframes hero-orbit-dot {
  from {
    transform: rotate(var(--a)) translateX(var(--orbit-r));
  }
  to {
    transform: rotate(calc(var(--a) + 360deg)) translateX(var(--orbit-r));
  }
}
@keyframes hero-unspin {
  from {
    transform: rotate(calc(var(--a) * -1));
  }
  to {
    transform: rotate(calc((var(--a) + 360deg) * -1));
  }
}
@keyframes skill-orbit-arrive {
  from {
    rotate: -48deg;
  }
  to {
    rotate: 0deg;
  }
}
@keyframes skill-orbit-item-arrive {
  from {
    transform: rotate(calc(var(--a) - 48deg)) translate(var(--orbit-r)) rotate(calc(48deg - var(--a)))
      translate(-50%, calc(var(--skill-mark) / -2));
  }
  to {
    transform: rotate(var(--a)) translate(var(--orbit-r)) rotate(calc(var(--a) * -1))
      translate(-50%, calc(var(--skill-mark) / -2));
  }
}
@keyframes tour-progress {
  from {
    scale: 1 0;
  }
  to {
    scale: 1 1;
  }
}
@keyframes pf-zoom {
  0%,
  38% {
    scale: 1;
  }
  58%,
  86% {
    scale: 1.25;
  }
  97%,
  100% {
    scale: 1;
  }
}
@keyframes pf-pick {
  0%,
  6% {
    opacity: 0;
    translate: 46px 34px;
    scale: 1;
  }
  14% {
    opacity: 1;
  }
  30% {
    translate: 0 0;
    scale: 1;
  }
  33% {
    scale: 0.82;
  }
  36% {
    opacity: 1;
    scale: 1;
  }
  48%,
  100% {
    opacity: 0;
    translate: 0 0;
  }
}
@keyframes pf-pick-parcel {
  0%,
  31%,
  97%,
  100% {
    stroke: color-mix(in srgb, var(--gtp-brand-gold) 70%, var(--gtp-brand-navy));
    stroke-width: 0.6;
  }
  34%,
  90% {
    stroke: var(--gtp-brand-navy);
    stroke-width: 1.6;
  }
}
@keyframes pf-hint {
  0%,
  33%,
  98%,
  100% {
    opacity: 1;
  }
  37%,
  93% {
    opacity: 0;
  }
}
@keyframes pf-detail {
  0%,
  34%,
  96%,
  100% {
    opacity: 0;
    translate: 0 0.5em;
  }
  42%,
  90% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes pf-edge-glow {
  0%,
  2%,
  30%,
  100% {
    stroke: color-mix(in srgb, var(--gtp-brand-navy) 50%, transparent);
    stroke-width: 1.2;
  }
  6%,
  24% {
    stroke: var(--gtp-brand-blue);
    stroke-width: 2.2;
  }
}
@keyframes pf-node-glow {
  0%,
  2%,
  30%,
  100% {
    border-top-color: var(--mock-line);
    border-right-color: var(--mock-line);
    border-bottom-color: var(--mock-line);
    box-shadow: 0 0.2em 0.6em color-mix(in srgb, var(--gtp-brand-navy) 8%, transparent);
  }
  6%,
  24% {
    border-top-color: var(--gtp-brand-blue);
    border-right-color: var(--gtp-brand-blue);
    border-bottom-color: var(--gtp-brand-blue);
    box-shadow:
      0 0 0 0.25em color-mix(in srgb, var(--gtp-brand-blue) 20%, transparent),
      0 0.2em 0.6em color-mix(in srgb, var(--gtp-brand-navy) 12%, transparent);
  }
}
@keyframes pf-link-glow {
  0%,
  2%,
  30%,
  100% {
    border-color: var(--mock-line);
    background: transparent;
  }
  6%,
  24% {
    border-color: var(--gtp-brand-blue);
    background: var(--sl-color-primary-50);
  }
}
@keyframes pf-ring {
  from {
    opacity: 0.7;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 2.2;
  }
}
@keyframes pf-press-button {
  0%,
  35%,
  44%,
  100% {
    scale: 1;
    filter: none;
  }
  37%,
  41% {
    scale: 0.96;
    filter: brightness(0.85);
  }
}
@keyframes pf-press {
  0%,
  10% {
    opacity: 0;
    translate: 2.6em 2em;
    scale: 1;
  }
  18% {
    opacity: 1;
  }
  34% {
    translate: 0 0;
    scale: 1;
  }
  37% {
    scale: 0.82;
  }
  40% {
    opacity: 1;
    scale: 1;
  }
  52%,
  100% {
    opacity: 0;
    translate: 0 0;
  }
}
@keyframes pf-sent {
  0%,
  40%,
  100% {
    opacity: 0;
    translate: 0 0.6em;
  }
  46%,
  84% {
    opacity: 1;
    translate: 0 0;
  }
  92% {
    opacity: 0;
    translate: 0 0.3em;
  }
}
@keyframes mock-rise {
  from {
    opacity: 0;
    translate: 0 0.6em;
  }
}
@keyframes mock-fade {
  from {
    opacity: 0;
  }
}
@keyframes mock-grow {
  from {
    scale: 0 1;
  }
}
@keyframes mock-pop {
  from {
    opacity: 0;
    scale: 0.4;
  }
  60% {
    opacity: 1;
    scale: 1.12;
  }
}
@keyframes mock-pulse {
  from {
    opacity: 0.7;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 2.6;
  }
}
@keyframes mock-draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes tool-book-turn {
  0%,
  4% {
    transform: rotateY(0deg);
  }
  22%,
  100% {
    transform: rotateY(-180deg);
  }
}
@keyframes tool-book-face {
  0%,
  3% {
    opacity: 0;
  }
  4%,
  22% {
    opacity: 1;
  }
  28%,
  100% {
    opacity: 0;
  }
}
@keyframes scene-live {
  from {
    background-color: transparent;
  }
}
@keyframes scene-in {
  from {
    opacity: 0;
    translate: var(--from, 0 1.8em);
    scale: 0.96;
    rotate: 0deg;
  }
}
@keyframes scene-backdrop-in {
  from {
    opacity: 0;
    scale: 0.92;
  }
}
@keyframes scene-float {
  to {
    transform: translateY(-0.45em);
  }
}
@keyframes scene-drag {
  to {
    left: calc(var(--from) + var(--w) * 1.35);
  }
}
@keyframes scene-stretch {
  from {
    scale: 1 1;
  }
  to {
    scale: 1.35 1;
  }
}
@keyframes scene-point {
  from {
    opacity: 0;
    translate: 4em 2.5em;
  }
  80% {
    scale: 1;
  }
  90% {
    scale: 0.85;
  }
}
@keyframes scene-check-on {
  to {
    border-color: var(--sl-color-primary-700);
    background: var(--sl-color-primary-700);
    color: var(--sl-color-neutral-0);
  }
}
@keyframes scene-typing {
  50% {
    opacity: 0.35;
    translate: 0 -0.2em;
  }
}
@keyframes scene-status-out {
  to {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes scene-status-in {
  from {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes result-chip-in {
  from {
    opacity: 0;
    translate: calc(-50% + var(--fx)) calc(-50% + var(--fy));
    rotate: calc(var(--r) * 4);
  }
}
@keyframes result-window-in {
  from {
    opacity: 0;
    translate: -50% 1.5em;
  }
}
@keyframes pa-in {
  from {
    opacity: 0;
    translate: var(--from, 0 10px);
    scale: 0.96;
  }
}
@keyframes pa-pop {
  from {
    opacity: 0;
    scale: 0.4;
  }
  60% {
    opacity: 1;
    scale: 1.1;
  }
}
@keyframes pa-fade {
  from {
    opacity: 0;
  }
}
@keyframes pa-sweep {
  from {
    rotate: -150deg;
  }
}
@keyframes pa-spin-in {
  from {
    opacity: 0;
    rotate: -30deg;
    scale: 0.92;
  }
}
@keyframes pa-turn-in {
  from {
    opacity: 0;
    rotate: -90deg;
  }
}
@keyframes pa-signal {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.12;
  }
}