.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 100svh;

--section-padding-y: var(--space-6);
}

.hero.hero--compact {
  min-block-size: auto;
}

.hero.hero--compact .hero__subline {
  
  margin-block-end: 0;
}

@media (max-width: 767px) {
  .section--screen.hero {
    justify-content: flex-start;
    --section-padding-y: var(--space-6);
  }
}

.hero > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__badge {
  margin-block-end: var(--space-5);
  max-width: 62ch;
}

.hero__title {
  max-width: 22ch;
  margin-block-end: var(--space-5);
}

.hero__subline {
  max-width: 58ch;
  margin-block-end: var(--space-6);
}

.hero__bullets {
  --stack-gap: var(--space-3);
  margin-block-end: var(--space-7);
  text-align: start;
}

.hero .hero__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.hero__check {
  flex-shrink: 0;
  color: var(--color-accent);
  
  margin-block-start: 0.15em;
}

.hero__actions {
  --cluster-gap: var(--space-4);
  justify-content: center;
}

@media (max-height: 880px) {
  .hero {
    --section-padding-y: var(--space-4);
  }

  .hero__badge,
  .hero__title {
    margin-block-end: var(--space-3);
  }

  .hero__subline {
    margin-block-end: var(--space-4);
  }

  .hero__bullets {
    --stack-gap: var(--space-2);
    margin-block-end: var(--space-5);
  }
}

@media (max-height: 800px) {
  .hero {
    --section-padding-y: var(--space-3);
  }

  .hero__bullets {
    margin-block-end: var(--space-4);
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

min-block-size: 44px;
  padding: var(--space-3) var(--space-5);

  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  text-align: center;
  text-decoration: none;

  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;

  transition: transform var(--duration-fast) var(--easing-standard);
}

.button.button--primary {
  background-color: var(--color-accent);
  color: var(--color-deep);
}

.button.button--secondary {
  background-color: var(--glass-fill);
  background-image: var(--gradient-glass);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.button.button--tertiary {
  min-block-size: 44px;
  padding-inline: 0;
  background: none;
  color: var(--color-accent);
}

.button:hover {
  transform: translateY(-1px);
}

.button.button--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.button.button--tertiary:hover {
  transform: translateX(2px);
}

.button.button--shine {
  
  --shine-ground: var(--color-deep);
  --shine-label:  var(--color-text-muted);
  
  --shine-ring:   var(--world-accent, var(--color-accent));
  --shine-peak:   var(--color-polar);

  --shine-glint: var(--shine-peak);

--shine-duration: 8s;
  --shine-inset: 2px;

--shine-idle: running;
  
  --shine-arc: 5%;

  position: relative;
  
  overflow: hidden;
  
  isolation: isolate;

  color: var(--shine-label);

background:
    linear-gradient(var(--shine-ground), var(--shine-ground)) padding-box,
    conic-gradient(
        from calc(var(--shine-angle) - var(--shine-angle-offset)),
        transparent,
        var(--shine-ring) var(--shine-arc),
        var(--shine-glint) calc(var(--shine-arc) * 2),
        var(--shine-ring) calc(var(--shine-arc) * 3),
        transparent calc(var(--shine-arc) * 4)
      )
      border-box;

box-shadow: inset 0 0 0 1px var(--color-border);

transition:
    transform var(--duration-fast) var(--easing-standard),
    color var(--duration-base) var(--easing-standard),
    --shine-angle-offset var(--duration-slower) var(--easing-premium),
    --shine-arc var(--duration-slower) var(--easing-premium),
    --shine-glint var(--duration-slower) var(--easing-premium);
}

.surface--light .button.button--shine {
  --shine-ground: var(--color-brunswick);
  --shine-label:  var(--color-polar);
  --shine-ring:   var(--color-emerald);
  --shine-peak:   var(--color-polar);
}

.button.button--shine:active {
  translate: 0 1px;
}

.button.button--shine::before,
.button.button--shine::after,
.button.button--shine .button__label::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
  transition: opacity var(--duration-slower) var(--easing-premium);
}

.button.button--shine::before {
  --dot-gap: 2px;

  inline-size: calc(100% - var(--shine-inset) * 3);
  block-size: calc(100% - var(--shine-inset) * 3);
  border-radius: inherit;

  background:
    radial-gradient(
        circle at var(--dot-gap) var(--dot-gap),
        var(--shine-label) calc(var(--dot-gap) / 4),
        transparent 0
      )
      padding-box;
  background-size: calc(var(--dot-gap) * 2) calc(var(--dot-gap) * 2);
  background-repeat: space;

mask-image: conic-gradient(
    from calc(var(--shine-angle) + 45deg),
    var(--shine-label),
    transparent 10% 90%,
    var(--shine-label)
  );

opacity: 0.3;
}

.button.button--shine::after {
  inline-size: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shine-ring), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, var(--shine-label));
  
  opacity: 0.5;
}

.button.button--shine .button__label {
  z-index: 1;
}

.button.button--shine .button__label::before {
  inline-size: calc(100% + 1rem);
  block-size: calc(100% + 1rem);
  box-shadow: inset 0 -1ex 2rem 4px var(--shine-ring);
  
  opacity: 0;
  animation: shine-breathe calc(var(--shine-duration) * 1.5) linear infinite var(--shine-idle);
}

.button.button--shine,
.button.button--shine::before {
  animation:
    shine-travel var(--shine-duration) linear infinite var(--shine-idle),
    shine-travel calc(var(--shine-duration) / 0.4) linear infinite reverse paused;
  animation-composition: add;
}

.button.button--shine.is-shine-idle {
  --shine-idle: paused;
  --shine-arc: 25%;
}

.button.button--shine::after {
  animation:
    shine-shimmer var(--shine-duration) linear infinite var(--shine-idle),
    shine-shimmer calc(var(--shine-duration) / 0.4) linear infinite reverse paused;
  animation-composition: add;
}

.button.button--shine:is(:hover, :focus-visible, :active) {
  
  --shine-arc: 20%;
  --shine-angle-offset: 95deg;
  
  --shine-glint: var(--shine-ring);
}

.button.button--shine:is(:hover, :focus-visible, :active),
.button.button--shine:is(:hover, :focus-visible, :active)::before,
.button.button--shine:is(:hover, :focus-visible, :active)::after {
  animation-play-state: running;
}

.button.button--shine:is(:hover, :focus-visible, :active)::before {
  opacity: 0.4;
}

.button.button--shine:is(:hover, :focus-visible, :active)::after {
  opacity: 0.6;
}

.button.button--shine:is(:hover, :focus-visible, :active) {
  color: var(--color-text);
}

.button.button--shine:is(:hover, :focus-visible, :active) .button__label::before {
  opacity: 1;
}

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

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

@keyframes shine-breathe {
  from, to { scale: 1; }
  50%      { scale: 1.2; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  padding: var(--space-5);
  min-width: 0;

background-color: var(--glass-fill);
  background-image: var(--gradient-glass);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-block-start-color: var(--glass-edge-lit);
  border-block-end-color: var(--glass-edge-bottom);
  border-radius: var(--radius-lg);

  transition: transform var(--duration-base) var(--easing-standard);
}

.card-wrap:hover .card {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

.card__icon {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-accent);
}

.card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}

.card__body {
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.card.card--link {
  text-decoration: none;
}

.card__arrow {
  align-self: flex-start;
  margin-block-start: auto;
  color: var(--color-accent);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.card-wrap:hover .card__arrow {
  transform: translateX(2px);
}

.service-list {
  border-block-start: 1px solid var(--color-border);
}

.service-list__row {
  border-block-end: 1px solid var(--color-border);
  
  overflow-x: clip;
}

.service-list .service-list__link {
  display: grid;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
  text-decoration: none;

padding-inline: max(
    var(--container-padding),
    calc((100% - var(--container-max-width)) / 2 + var(--container-padding))
  );

grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "name"
    "tools"
    "shots";

  transition: background-color var(--duration-base) var(--easing-standard);
}

@media (min-width: 62rem) {
  .service-list .service-list__link {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 1.45fr);
    grid-template-areas: "name tools shots";
    gap: var(--space-5);
    padding-block: var(--space-6);
  }
}

.service-list__row:hover .service-list__link {
  background-color: var(--color-bg-subtle);
}

.service-list__name {
  grid-area: name;
  min-width: 0;

font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);

hyphens: none;

  transition: transform var(--duration-base) var(--easing-standard);
}

.service-list__row:hover .service-list__name {
  transform: translateX(var(--space-2));
}

.service-list__tools {
  grid-area: tools;
  min-width: 0;

  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tool-chip {
  padding: var(--space-1) var(--space-2);

font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
  white-space: nowrap;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.service-list__row:hover .tool-chip {
  border-color: var(--color-border-strong);
}

.service-list__shots {
  grid-area: shots;
  position: relative;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
  min-width: 0;
}

.service-list__shots--images {
  
  display: block;
  
  overflow: visible;
}

.shot-strip {
  
  --shot-h: clamp(4.5rem, 22vw, 12rem);

  display: flex;
  gap: var(--space-3);
}

.shot-strip__shot {
  flex: 0 0 auto;
  display: block;
  
  overflow: hidden;
}

@media (min-width: 62rem) {
  .shot-strip {
    --shot-h: clamp(4.5rem, 9.5vw, 11rem);
  }
}

.shot-strip__shot img {
  display: block;
  
  block-size: var(--shot-h);
  inline-size: auto;
}

.faq__list {
  
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .faq__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    
    align-items: start;
  }
}

.faq__list > * {
  min-inline-size: 0;
}

.faq__item {
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-pill);
}

.faq .faq__question {
  display: flex;
  align-items: center;
  
  justify-content: flex-start;
  gap: var(--space-4);

min-block-size: 48px;

  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  cursor: pointer;
  list-style: none;
}

.faq .faq__question::-webkit-details-marker {
  display: none;
}

.faq .faq__question:hover {
  color: var(--color-accent);
}

.faq__q {
  min-inline-size: 0;
  hyphens: none;
  overflow-wrap: break-word;
}

.faq__mark {
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.faq__item[open] .faq__mark {
  transform: rotate(45deg);
}

.faq__list--collapsed > .faq__item:nth-of-type(n+4) {
  display: none;
}

.faq__more {
  display: none;
  
  inline-size: 48px;
  block-size: 48px;
  margin-inline: auto;
  margin-block-start: var(--space-2);
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-pill);
  color: var(--color-accent);
  cursor: pointer;
}

.faq__list--collapsed > .faq__more {
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq__more:hover {
  color: var(--color-text);
}

.faq__more-mark {
  
  inline-size: 24px;
  block-size: 24px;
}

.faq__answer {
  padding-block-start: var(--space-4);
  color: var(--color-text-muted);
}

.faq .section__intro {
  margin-inline: auto;
  text-align: center;
}

.section__intro {
  max-width: 42rem;
  margin-block-end: var(--space-8);
  min-width: 0;
}

.section__intro > * + * {
  margin-block-start: var(--space-4);
}

.section__title--lg {
  font-size: var(--font-size-4xl);
  letter-spacing: var(--letter-spacing-display);
}

.section__lede {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.section--centred .section__intro {
  margin-inline: auto;
  text-align: center;
}

.section--centred > .container > .prose {
  margin-inline: auto;
  text-align: center;
}

.section--centred .card {
  text-align: center;
}

.section--centred .tile {
  text-align: center;
}

.section--centred .quote {
  align-items: center;
  margin-inline: auto;
  padding-inline-start: 0;
  border-inline-start: none;
  text-align: center;
}

.section--centred .quote__source {
  align-items: center;
}

.section--centred .card__icon,
.section--centred .card__arrow {
  margin-inline: auto;
}

.section__intro + * {
  margin-block-start: 0;
}

.section__intro:has(+ .prose) {
  margin-block-end: var(--space-6);
}

.section > .container > .section__intro + .prose {
  margin-block-start: 0;
}

.section > .container > * + * {
  margin-block-start: var(--space-7);
}

.section > .container > :is(.auto-grid, .stack) + .prose {
  margin-block-start: var(--space-8);
}

.problem__story.is-live {
  
  block-size: 300svh;
}

.problem__stage {
  overflow: hidden;
}

.is-live > .problem__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  display: grid;
}

.is-live .problem__scene {
  display: grid;
  min-block-size: 0;
  padding-block:
    calc(var(--header-offset, calc(var(--header-height) + var(--header-inset))) + var(--space-6))
    var(--space-6);
}

.is-live .problem__scene > .container {
  display: grid;
  min-block-size: 0;
}

.is-live .problem__head,
.is-live .problem__layer {
  grid-area: 1 / 1;
}

.is-live .problem__head {
  align-self: center;
  justify-self: center;
  max-inline-size: 30%;
}

.problem__head {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.problem__title {
  max-width: 24ch;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
  min-width: 0;
}

.problem__question {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

@media (max-width: 47.99rem) {
  .problem__question {
    display: none;
  }

.problem__head {
    margin-block-end: var(--space-7);
  }
}

.problem__layer {
  position: relative;
  display: grid;
  gap: var(--space-8);
  min-width: 0;
  min-block-size: 0;
}

.is-live .problem__layer > * {
  grid-area: 1 / 1;
}

.problem__symptoms {
  display: grid;
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.symptom {
  display: flex;
  align-items: end;
  
  gap: var(--space-5);
  min-width: 0;
  
  --avatar: 2.6rem;
}

.symptom:nth-child(odd) {
  flex-direction: row-reverse;
}

.symptom__quote {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-block-start-color: var(--glass-edge-lit);
  border-block-end-color: var(--glass-edge-bottom);
  
  border-radius: var(--radius-lg);
  background-color: var(--glass-fill);
  background-image: var(--gradient-glass);

font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text);
  text-wrap: pretty;
  text-align: start;
  min-width: 0;

}

.symptom__quote::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inline-size: 0.68em;
  block-size: 0.68em;
  background-color: var(--glass-fill);
  background-image: var(--gradient-glass);
}

.symptom:nth-child(odd) .symptom__quote {
  border-end-start-radius: var(--space-1);
}

.symptom:nth-child(odd) .symptom__quote::after {
  inset-inline-start: calc(1px - 0.68em);
  border-inline-start: var(--card-edge-w) solid var(--glass-edge);
  border-block-end: var(--card-edge-w) solid var(--glass-edge);
  border-end-start-radius: 100%;
}

.symptom:nth-child(even) .symptom__quote {
  border-end-end-radius: var(--space-1);
}

.symptom:nth-child(even) .symptom__quote::after {
  inset-inline-end: calc(1px - 0.68em);
  border-inline-end: var(--card-edge-w) solid var(--glass-edge);
  border-block-end: var(--card-edge-w) solid var(--glass-edge);
  border-end-end-radius: 100%;
}

.symptom__quote.has-shape {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  border-radius: 0;
}

.symptom__quote.has-shape::after {
  content: none;
}

.symptom__shape {
  position: absolute;
  inset-block-start: 0;
  pointer-events: none;
  
  max-inline-size: none;
}

.symptom__shape-sink {
  fill: var(--color-deep);
  fill-opacity: var(--card-sink);
}

.symptom__shape-body {
  
  stroke: var(--glass-edge);
  stroke-width: var(--card-edge-w);
}

.symptom__stop { stop-color: var(--color-polar); }

.symptom__stop--top {
  stop-opacity: calc(var(--card-lift) + var(--card-ramp-top));
}

.symptom__stop--mid {
  
  stop-opacity: calc(var(--card-lift) + var(--card-ramp-mid));
}

.symptom__stop--bottom {
  stop-color: rgb(var(--card-glow-rgb));
  stop-opacity: calc(var(--card-lift) + var(--card-ramp-bottom) + var(--card-glow-a));
}

.symptom__shape-lit {
  fill: none;
  stroke: var(--glass-edge-lit);
  stroke-width: 1;
  stroke-linecap: round;
}

.symptom__text {
  position: relative;
}

.symptom__avatar {
  display: grid;
  place-items: center;
  
  margin-block-end: calc(var(--avatar) * -0.3);
  
  inline-size: var(--avatar);
  
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  
  overflow: hidden;
  
  background-image: var(--gradient-avatar-sphere);
  box-shadow:
    var(--shadow-avatar-glow),
    var(--shadow-avatar-frame);
}

.symptom__photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.symptom__mark {
  background-image: linear-gradient(var(--color-mark-fill), var(--color-mark-fill));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(var(--mark-fill, 1) * 100%) 100%;
  padding-inline: 0.12em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.is-live .symptom__mark {
  --mark-fill: 0;
}

@media (min-width: 1024px) {
  
  .is-live .problem__symptoms {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
    block-size: 100%;
    min-block-size: 0;
  }

.is-live .symptom:nth-child(1) { grid-area: 1 / 3 / 2 / 7;  justify-self: start;  align-self: start; }
  
  .is-live .symptom:nth-child(2) { grid-area: 1 / 7 / 2 / 11; justify-self: end;    align-self: start; margin-block-start: var(--space-6); }
  .is-live .symptom:nth-child(3) { grid-area: 3 / 1 / 4 / 5;  justify-self: start;  align-self: center; }
  .is-live .symptom:nth-child(4) { grid-area: 3 / 9 / 4 / 13; justify-self: end;    align-self: center; }
  
  .is-live .symptom:nth-child(5) {
    grid-area: 5 / 5 / 6 / 10;
    justify-self: start;
    align-self: start;
    margin-block-start: calc(-1 * var(--space-7));
    margin-inline-start: var(--space-5);
  }

.is-live .symptom {
    --avatar: 2rem;
  }
}

.symptom__quote {
  max-inline-size: 17rem;
}

.symptom:nth-child(1) .symptom__quote {
  max-inline-size: 19rem;
}

.symptom:nth-child(2) .symptom__quote {
  max-inline-size: 21rem;
}

.symptom:nth-child(5) .symptom__quote {
  max-inline-size: 23rem;
}

.problem__story:not(.is-live) .problem__layer {
  gap: var(--space-11);
}

.problem__verdict {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  text-align: center;
  align-content: center;
  min-width: 0;
  
  position: relative;
  isolation: isolate;
}

.problem__diagnosis {
  display: grid;
  gap: 0.08em;
  max-width: 30ch;

font-size: clamp(1.375rem, 0.8175rem + 2.286vw, 2.875rem);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
  min-width: 0;
}

.problem__diagnosis-line + .problem__diagnosis-line {
  color: var(--color-accent-cool);
}

.problem__evidence {
  display: grid;

--fact-figure: clamp(1.389rem, 0.8194rem + 1.8665vw, 2.5rem);
  --fact-track: clamp(12.75rem, 7.5225rem + 17.136vw, 22.95rem);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--fact-track), 100%), 1fr));
  
  position: relative;
  gap: var(--space-5) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  inline-size: 100%;
  
  max-width: 73rem;
  min-width: 0;
}

@media (min-width: 62.5rem) {
  .problem__evidence {
    --fact-figure: clamp(2rem, -0.8409rem + 4.5455vw, 3.25rem);
    
    --fact-track: calc(var(--fact-figure) * 7.5 + 40px);
    
    max-width: 86rem;
  }
}

.problem__fact {
  display: grid;
  justify-items: center;
  
  align-content: start;
  
  gap: var(--space-2);
  min-width: 0;
}

.problem__value {
  position: relative;
  display: block;
  min-width: 0;
  
  font-size: var(--fact-figure);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}

.problem__prefix {
  
  margin-inline-end: -0.06em;
  
  color: var(--color-accent-cool);
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.js .problem__verdict {
    --verdict-glow: 0;
  }
}

.problem__rule {
  position: relative;
  inline-size: 100%;
  max-inline-size: 11rem;
  block-size: 1px;
  background-image: var(--gradient-fact-rule);
  opacity: var(--verdict-glow, 1);
}

.problem__rule::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 5px;
  block-size: 5px;
  translate: -50% -50%;
  border-radius: 50%;
  
  background-color: var(--color-accent-cool);
  box-shadow: var(--shadow-node-cool);
  opacity: var(--verdict-glow, 1);
}

.problem__rule + .problem__label {
  margin-block-start: calc(var(--space-3) - var(--space-2));
}

.problem__figure {

font-variant-numeric: tabular-nums;
}

.problem__label {
  
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.problem__close {
  max-width: 42rem;
  
  font-size: var(--font-size-md);
  color: var(--color-text);
  text-wrap: pretty;
  min-width: 0;
}

.process__list {
  counter-reset: step;
  --node-size: 2.5rem;

  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
  max-width: 46rem;
  min-width: 0;
}

.process__step {
  counter-increment: step;
  display: grid;
  
  grid-template-columns: var(--node-size) minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-items: start;
  
  position: relative;
}

.process__node {
  grid-row: 1 / span 2;
  inline-size: var(--node-size);
  block-size: var(--node-size);
  display: grid;
  place-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.process__node::before {
  content: counter(step);
}

.process__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}

.process__body {
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  
  inset-block-start: calc(var(--node-size) + var(--space-2));
  block-size: calc(100% + var(--space-6) - var(--node-size) - var(--space-2) * 2);
  
  inset-inline-start: calc(var(--node-size) / 2 - 0.5px);
  inline-size: 1px;
  background-color: var(--color-border-strong);
}

@media (max-width: 63.99rem) {
  
  .is-trail .process__node {
    position: relative;
    
    transform: scale(calc(1 + 0.06 * var(--node, 0)));
  }

.is-trail .process__node::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-accent-glow);
    opacity: var(--node, 0);
  }

.is-trail .process__step:not(:last-child)::after {
    background-image: linear-gradient(
      to bottom,
      var(--color-accent) 0 calc(var(--seg, 0) * 100%),
      transparent calc(var(--seg, 0) * 100%)
    );
  }
}

@media (min-width: 1024px) {
  .process__list {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: none;
  }

  .process__step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;

grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: var(--space-4);
    text-align: center;
  }

  .process__node {
    grid-row: auto;
  }

.process__title,
  .process__body {
    max-width: 20rem;
  }

.process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--node-size) / 2);
    inset-inline-start: calc(50% + var(--node-size) / 2 + var(--space-3));
    inline-size: calc(100% + var(--space-5) - var(--node-size) - var(--space-3) * 2);
    block-size: 1px;
    background-color: var(--color-border-strong);
  }
}

.process__wires {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  
  display: none;
}

.is-live .process__wires {
  display: block;
}

.process__wire {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process__wire--base {
  stroke: var(--color-border);
  stroke-width: 1;
}

.process__wire--halo {
  stroke: var(--color-accent);
  stroke-width: 7;
  opacity: 0.12;
}

.process__wire--live {
  stroke: var(--color-accent);
  stroke-width: 1.6;
}

.process__mast {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
}

.process__mast--base {
  stroke: var(--color-border);
}

.process__mast--live {
  stroke: var(--color-accent);
  opacity: 0.75;
}

.process__area {
  fill: url(#process-area);
  stroke: none;
}

.process__reveal {
  mask-type: alpha;
}

.process__ring {
  fill: none;
  stroke-width: 1.4;
}

.process__ring--base {
  stroke: var(--color-border-strong);
}

.process__ring--live {
  stroke: var(--color-accent);
  opacity: var(--node, 0);
}

.process__dot {
  fill: var(--color-polar);
  opacity: var(--node, 0);
}

.process__pool {
  fill: url(#process-head-glow);
  opacity: calc(0.7 * var(--node, 0));
}

.process__head {
  fill: url(#process-head-glow);
  opacity: var(--head, 0);
}

.process__head-core {
  fill: var(--color-accent);
  opacity: var(--head, 0);
}

@media (min-width: 1024px) {
  
  .process__story.is-live {
    block-size: 250svh;
  }

.is-live > .process__stage {
    position: sticky;
    inset-block-start: 0;
    block-size: 100svh;
    display: grid;
    overflow: clip;
  }

  .is-live .process__scene {
    position: relative;
    display: grid;
    min-block-size: 0;
  }

.is-live .process__scene > .container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: var(--space-7);
    min-block-size: 0;
    padding-block:
      calc(var(--header-offset, calc(var(--header-height) + var(--header-inset))) + var(--space-6))
      34svh;
  }

.is-live .process__scene .section__intro {
    margin-inline: auto;
    text-align: center;
  }

  .is-live .process__list {
    align-items: stretch;
    gap: var(--space-6);
  }

.is-live .process__step {
    grid-template-rows: auto auto auto;
    align-content: end;
    row-gap: var(--space-3);
    transform: translateY(var(--drop, 0px));
  }

  .is-live .process__title {
    grid-row: 1;
  }

  .is-live .process__body {
    grid-row: 2;
  }

.is-live .process__node {
    grid-row: 3;
    position: relative;
    margin-block-start: var(--space-4);
    opacity: calc(0.45 + 0.55 * var(--node, 0));
    transform: scale(calc(1 + 0.08 * var(--node, 0)));
  }

.is-live .process__node::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-accent-glow);
    opacity: var(--node, 0);
  }

.is-live .process__step:not(:last-child)::after {
    content: none;
  }
}

.offer--journey {
  overflow: hidden;
}

.offer {
  --world-accent: var(--world-verde-profundo-glow);
  --world-accent-soft: rgb(from var(--world-verde-profundo-glow) r g b / 0.30);
  
  --shadow-route-glow: var(--shadow-route-glow-verde);
}

.offer__journey {
  position: relative;

--offer-node: 0.3rem;
  
  --offer-gap: 1.125rem;
  
  --offer-line: 0.7;
}

.offer__list {
  
  --offer-h: auto;

  position: relative;
  block-size: var(--offer-h);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.offer__item {
  position: relative;
  
  padding-inline-start: var(--space-6);
  min-width: 0;
}

.offer__node {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-start: 0;
  
  z-index: 2;
  inline-size: var(--offer-node);
  block-size: var(--offer-node);
  border-radius: 50%;
  
  background-color: var(--color-node-pending);
  transition: background-color var(--duration-base) var(--easing-premium),
    transform var(--duration-base) var(--easing-premium),
    box-shadow var(--duration-base) var(--easing-premium);
}

.offer__node.is-active {
  
  background-color: var(--world-accent, var(--color-route));
  transform: scale(1.6);
  box-shadow: var(--shadow-route-glow);
}

.offer__list .text-link {
  color: var(--color-emerald);
}

.offer__node::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  
  inline-size: calc(var(--offer-node) * 4.5);
  block-size: calc(var(--offer-node) * 4.5);
  border-radius: 50%;
  
  border: 1px solid var(--color-polar);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  pointer-events: none;
}

.offer__node.is-active::after {
  animation: offer-mark 0.9s var(--easing-premium);
}

@keyframes offer-mark {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.35); }
  35%  { opacity: 0.45; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.6); }
}

.offer__title {
  
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.offer__label {

background-image: linear-gradient(var(--world-accent-soft, var(--color-route-mark)), var(--world-accent-soft, var(--color-route-mark)));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(var(--mark-fill, 1) * 100%) 100%;
  padding-inline: 0.12em;
  border-radius: 3px;
  
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.is-live .offer__label {
  --mark-fill: 0;
}

.offer__body {
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  text-wrap: pretty;
  min-width: 0;
}

.offer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.offer__route {
  
  display: none;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.is-live .offer__route,
.is-static .offer__route {
  display: block;
}

.offer__rail {
  position: absolute;
  inset-block-start: calc(0.7rem + var(--offer-node) / 2);
  inset-block-end: 0;
  inset-inline-start: calc((var(--offer-node) - 1px) / 2);
  inline-size: 1px;
  background-color: var(--color-border);
}

.offer__rail-fill {
  display: block;
  inline-size: 100%;
  block-size: 0%;
  background-color: var(--world-accent, var(--color-route));
}

.is-static .offer__rail-fill {
  block-size: 100%;
}

@media (min-width: 1024px) {
  
  .offer__list {
    display: block;
    
    block-size: var(--offer-h);
  }

  .offer__item {
    position: absolute;
    
    inline-size: min(32%, 24rem);
    padding-inline-start: 0;
    inset-block-start: var(--offer-y);
  }

.offer__list > :nth-child(odd) {
    inset-inline-end: var(--offer-x);
  }

.offer__list > :nth-child(even) {
    inset-inline-start: var(--offer-x);
    text-align: end;
  }

.offer__list > :nth-child(odd) > .offer__node {
    inset-inline-start: auto;
    inset-inline-end: 100%;
    margin-inline-end: var(--offer-gap);
  }

  .offer__list > :nth-child(even) > .offer__node {
    inset-inline-start: 100%;
    margin-inline-start: var(--offer-gap);
  }

  .offer__rail {
    display: none;
  }

.offer__list:has(> :nth-child(7):last-child) { --offer-h: clamp(57rem, 59.19vw, 71.25rem); --offer-run-1: 20.78%; --offer-run-2: 27.8%; --offer-run-3: 38.95%; --offer-run-4: 58.22%; --offer-run-5: 67.05%; --offer-run-6: 77.91%; --offer-run-7: 95.94%; }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(1) { --offer-y: 5.15%; --offer-x: 19.84%; }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(2) { --offer-y: 23.68%; --offer-x: 0%; }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(3) { --offer-y: 30.7%; --offer-x: 0%; }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(4) { --offer-y: 43.86%; --offer-x: 31.03%; }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(5) { --offer-y: 61.18%; --offer-x: 0%; }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(6) { --offer-y: 72.04%; --offer-x: 16.28%; }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(7) { --offer-y: 82.89%; --offer-x: 0%; }

.offer__list:has(> :nth-child(6):last-child) { --offer-h: clamp(52rem, 54vw, 65rem); --offer-run-1: 27.85%; --offer-run-2: 26.27%; --offer-run-3: 42.69%; --offer-run-4: 63.82%; --offer-run-5: 73.5%; --offer-run-6: 91.35%; }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(1) { --offer-y: 5.63%; --offer-x: 19.84%; }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(2) { --offer-y: 25.94%; --offer-x: 0%; }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(3) { --offer-y: 33.65%; --offer-x: 0%; }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(4) { --offer-y: 48.13%; --offer-x: 31.03%; }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(5) { --offer-y: 67.07%; --offer-x: 0%; }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(6) { --offer-y: 78.97%; --offer-x: 16.28%; }

.offer__list:has(> :nth-child(6):last-child) > :nth-child(5) { inset-inline-end: auto; inset-inline-start: var(--offer-x); }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(5) > .offer__node { inset-inline-start: 100%; inset-inline-end: auto; margin-inline-end: 0; margin-inline-start: var(--offer-gap); }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(6) { inset-inline-start: auto; inset-inline-end: var(--offer-x); }
  .offer__list:has(> :nth-child(6):last-child) > :nth-child(6) > .offer__node { inset-inline-start: auto; inset-inline-end: 100%; margin-inline-start: 0; margin-inline-end: var(--offer-gap); }

.offer__list:has(> :nth-child(7):last-child) > :nth-child(5) { inset-inline-end: auto; inset-inline-start: var(--offer-x); }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(5) > .offer__node { inset-inline-start: 100%; inset-inline-end: auto; margin-inline-end: 0; margin-inline-start: var(--offer-gap); }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(6) { inset-inline-start: auto; inset-inline-end: var(--offer-x); }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(6) > .offer__node { inset-inline-start: auto; inset-inline-end: 100%; margin-inline-start: 0; margin-inline-end: var(--offer-gap); }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(7) { inset-inline-end: auto; inset-inline-start: var(--offer-x); }
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(7) > .offer__node { inset-inline-start: 100%; inset-inline-end: auto; margin-inline-end: 0; margin-inline-start: var(--offer-gap); }

.offer__body {
    max-width: 21rem;
  }

.offer__list > :nth-child(even) .offer__body {
    margin-inline-start: auto;
  }

.offer__list > .offer__item--hug,
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(5),
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(7) {
    
    display: grid;
    grid-template-columns: fit-content(100%);
    justify-content: end;
    align-content: start;
  }

.offer__list:has(> :nth-child(6):last-child) > :nth-child(6),
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(6) {
    text-align: start;
  }

  .offer__list:has(> :nth-child(6):last-child) > :nth-child(6) .offer__body,
  .offer__list:has(> :nth-child(7):last-child) > :nth-child(6) .offer__body {
    margin-inline-start: 0;
  }
}

.offer__route-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--offer-line);
  vector-effect: non-scaling-stroke;
}

.offer__route-path--base {
  stroke: var(--color-border);
}

.offer__route-path--live {
  stroke: var(--world-accent, var(--color-route));
}

.offer__route-path--head {
  stroke: var(--color-polar);
  stroke: url(#offer-head-ramp);
}

.offer__head-glow {
  fill: url(#offer-head-glow);
  opacity: 0;
  pointer-events: none;
}

.about__inner {
  
  --about-portrait-w: min(100%, 20rem);

  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 62rem) {
  .about__inner {

--about-portrait-w: clamp(17rem, 34vw, 28rem);

    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: var(--space-6);
    
    align-items: start;
  }
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.about__text > .about__name + .about__role {
  margin-block-start: calc(var(--space-5) * -1 + var(--space-3));
}

.about__text > * {
  max-inline-size: 42rem;
}

@media (min-width: 62rem) {
  .about__text {

align-self: start;
  }
}

.about__role {
  margin: 0;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text-muted);
  hyphens: none;
}

.about__cta {
  align-self: start;
}

.about__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.about__inner .about__stage {
  margin-block-start: 0;
}

@media (min-width: 62rem) {
  .about__stage {
    
    justify-content: center;

margin-block-end: 0;
  }
}

.about__field {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(100%, var(--about-portrait-w));
  aspect-ratio: 1;
  pointer-events: none;
}

.about__field::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--gradient-about-light);
}

.about__ring {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: calc(30% + var(--ring) * 17%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  opacity: calc(1 - (var(--ring) - 1) * 0.17);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 92%);
}

.about__portrait {
  margin: 0;
  
  min-width: 0;
  inline-size: 100%;
  max-inline-size: var(--about-portrait-w);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

.about__portrait img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  
  object-fit: cover;
  object-position: center top;
}

.trust__line,
.tech__line {
  margin-block-end: var(--space-5);
}

.section + .section.trust:not([class*="surface--"]) {
  padding-block-start: var(--section-padding-y);
}

.section + .section.problem:not([class*="surface--"]) {
  padding-block-start: calc(var(--section-padding-y) * 0.5);
}

.card--link {
  text-decoration: none;
}

.card--link .card__arrow {
  margin-block-start: auto;
  color: var(--color-accent);
}

.packages__grid {
  
  --auto-grid-min: 18rem;
  --grid-gap: var(--space-6);
  
}

.package {
  display: flex;
  flex-direction: column;
  
  min-width: 0;
  block-size: 100%;

  padding: var(--space-6);

background-color: var(--glass-fill);
  background-image: var(--gradient-glass-bloom), var(--gradient-glass);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-block-start-color: var(--glass-edge-lit);
  border-block-end-color: var(--glass-edge-bottom);
  border-radius: var(--radius-xl);

position: relative;

container-type: inline-size;
  container-name: package;

  transition: transform var(--duration-base) var(--easing-standard),
              border-color var(--duration-base) var(--easing-standard);

box-shadow: var(--shadow-card-halo);
}

.package-wrap:hover .package {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

.package__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.package__index {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text-muted);
  
}

.package__icon {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--color-accent);
}

.package__title {
  margin-block-start: var(--space-5);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  
  hyphens: none;
  text-wrap: balance;
}

.package__points {
  margin-block-start: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.package__points > li {
  display: grid;
  
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;

  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.package__mark {
  inline-size: 1rem;
  block-size: 1rem;
  margin-block-start: 0.15em;
  color: var(--color-accent);
}

.package__stack {
  margin-block-start: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

@container package (min-width: 17rem) {
  .package__stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.package__stack .tool-chip {
  text-align: center;
}

.package__fit {
  margin-block-start: auto;
  padding-block-start: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.package--featured {
  background-color: var(--glass-fill-strong);
  background-image: var(--gradient-glass-bloom-accent), var(--gradient-glass);
  border-color: var(--color-accent-subtle);
  border-block-start-color: var(--color-accent);
  box-shadow: var(--shadow-accent-halo);
}

.package-wrap:hover .package--featured {
  
  border-block-start-color: var(--color-accent);
}

@supports (mask-composite: exclude) {

.package--featured {
    border-color: transparent;
  }

  .package__ring {
    
    --shine-ring: var(--world-accent, var(--color-accent));
    --shine-base: var(--color-accent-subtle);

    position: absolute;
    
    inset: -1px;
    border-radius: inherit;
    
    z-index: -1;
    pointer-events: none;
    
    overflow: hidden;

padding: 1px;
    mask-image:
      linear-gradient(var(--color-polar) 0 0),
      linear-gradient(var(--color-polar) 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;
  }

  .package__ring::before {
    
    --shine-sweep: 22deg;
    --shine-glint: var(--color-polar);

    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    
    inline-size: 210%;
    aspect-ratio: 1;
    
    translate: -50% -50%;

    background: conic-gradient(
      from calc(var(--shine-sweep) * -2),
      var(--shine-base),
      var(--shine-ring) var(--shine-sweep),
      var(--shine-glint) calc(var(--shine-sweep) * 2),
      var(--shine-ring) calc(var(--shine-sweep) * 3),
      var(--shine-base) calc(var(--shine-sweep) * 4)
    );

    animation: package-ring-travel 14s linear infinite;
    
    transition:
      --shine-sweep var(--duration-slower) var(--easing-premium),
      --shine-glint var(--duration-slower) var(--easing-premium);
  }

.package-wrap:hover .package--featured {
    border-color: transparent;
  }

.package-wrap:hover .package__ring::before {
    --shine-sweep: 58deg;
    --shine-glint: var(--shine-ring);
  }
}

@keyframes package-ring-travel {
  to { rotate: 360deg; }
}

.package__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  margin-inline: auto;
  margin-block-start: calc(-1 * var(--space-4));
  inline-size: max-content;
  max-inline-size: calc(100% - 2 * var(--space-5));

  padding: var(--space-1) var(--space-3);

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  
  color: var(--color-deep);
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

@media (min-width: 62rem) {
  .package-wrap--featured {
    margin-block: calc(-1 * var(--space-5));
  }
}

@media (max-width: 40.42rem) {
  .package-wrap--featured { order: -1; }
}

.guarantee {
  margin-inline: auto;
  max-inline-size: 64rem;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  padding-block: var(--space-5);
  border-block: 1px solid var(--color-border);
}

.guarantee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;

  font-size: var(--font-size-sm);
  color: var(--color-text);
  hyphens: none;
  text-align: center;
}

.guarantee__icon {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--color-accent);
}

@media (min-width: 48rem) {
  .guarantee {
    flex-direction: row;
    justify-content: center;
    gap: 0;
  }

  .guarantee__item {
    padding-inline: var(--space-6);
  }

  .guarantee__item + .guarantee__item {
    border-inline-start: 1px solid var(--color-border);
  }
}

.ki-check {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.ki-check__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;

--check-report-w: 34rem;
}

.ki-check__stage > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.ki-check__field {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  z-index: 0;
  pointer-events: none;
}

.ki-check__glow {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: min(52rem, 150vw);
  block-size: min(34rem, 110vw);
  translate: -50% -50%;
  background-image: var(--gradient-check-glow);
}

.ki-check__rings {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 0;

--check-rx: min(30rem, 44vw);
  --check-ry: min(12.5rem, 26svh);

--check-ring-base: 0.78;
  --check-ring-step: 0.2;
}

.ki-check__rings > span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  --ring: calc(var(--check-ring-base) + var(--i) * var(--check-ring-step));
  inline-size: calc(2 * var(--ring) * var(--check-rx));
  block-size: calc(2 * var(--ring) * var(--check-ry));
  
  translate: -50% -50%;
  border: 1px solid var(--color-orbit-line);
  border-radius: 50%;
  opacity: var(--ring-weight);
}

.ki-check__rings > span:nth-child(1) { --i: 0; --ring-weight: 0.44; }
.ki-check__rings > span:nth-child(2) { --i: 1; --ring-weight: 0.36; }
.ki-check__rings > span:nth-child(3) { --i: 2; --ring-weight: 0.28; }
.ki-check__rings > span:nth-child(4) { --i: 3; --ring-weight: 0.21; }
.ki-check__rings > span:nth-child(5) { --i: 4; --ring-weight: 0.14; }
.ki-check__rings > span:nth-child(6) { --i: 5; --ring-weight: 0.09; }
.ki-check__rings > span:nth-child(7) { --i: 6; --ring-weight: 0.05; }

.ki-check__report-wrap {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.ki-check__report {
  inline-size: 100%;
  max-inline-size: var(--check-report-w);
  min-width: 0;
  padding: var(--space-5);
  text-align: start;

  background-color: var(--glass-fill-strong);
  background-image: var(--gradient-glass-bloom), var(--gradient-glass);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-block-start-color: var(--glass-edge-lit);
  border-block-end-color: var(--glass-edge-bottom);
  border-radius: var(--radius-xl);

  box-shadow:
    inset 0 1px 0 var(--frost-lip),
    inset 0 -1px 0 var(--frost-lip-under),
    var(--shadow-lg),
    
    var(--shadow-card-halo);

position: relative;
  overflow: hidden;

animation: check-report-float 9s var(--easing-standard) infinite;
}

.ki-check__report-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;

  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.ki-check__report-title {
  min-width: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text);
  
  hyphens: none;
}

.ki-check__report-index {
  flex: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text);
}

.ki-check__rows {
  margin-block-start: var(--space-2);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ki-check__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;

  padding-block: var(--space-4);
  min-width: 0;
}

.ki-check__row + .ki-check__row {
  border-block-start: 1px solid var(--color-border);
}

.ki-check__row:last-child {
  padding-block-end: 0;
}

.ki-check__icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--color-accent);
}

.ki-check__name {
  min-width: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
  
  hyphens: none;
}

.ki-check__mark {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0.1875rem;
  color: var(--color-accent);
  background-color: var(--color-accent-subtle);
  border-radius: var(--radius-pill);
}

.ki-check__beam {
  display: none;
  position: absolute;
  inset-block-start: 0;
  block-size: 30%;
  
  inline-size: 30rem;
  pointer-events: none;
  background-image: var(--gradient-beam-across);
}

.ki-check__stage.is-live .ki-check__beam {
  display: block;
}

.ki-check__beam--in {
  inset-inline-end: 100%;
  mask-image: var(--gradient-beam-in);
  -webkit-mask-image: var(--gradient-beam-in);
}

.ki-check__beam--out {
  inset-inline-start: 100%;
  mask-image: var(--gradient-beam-out);
  -webkit-mask-image: var(--gradient-beam-out);
}

.ki-check__spray {
  position: absolute;
  inset-block-start: -2.75rem;
  
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: calc(var(--check-report-w) * 0.86);
  block-size: calc(100% + 2.75rem + 2rem);
  z-index: 3;
  pointer-events: none;
  opacity: 0.18;
}

.ki-check__scan {
  display: none;
  position: absolute;
  
  inset-inline: 10%;
  inset-block-start: 0;
  block-size: 30%;
  pointer-events: none;

background-image: var(--gradient-check-scan);

mask-image: var(--gradient-scan-across);
  -webkit-mask-image: var(--gradient-scan-across);
}

.ki-check__stage.is-live .ki-check__scan {
  display: block;
}

.ki-check__cta {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.ki-check > .container > .ki-check__cta {
  margin-block-start: var(--space-6);
}

.ki-check__cta .button {
  padding: var(--space-4) var(--space-7);
  font-size: var(--font-size-md);
}

.ki-check__note {
  margin-inline: auto;
  display: flex;
  align-items: start;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;

max-inline-size: 40rem;

  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
  text-align: center;
  text-wrap: pretty;
}

.ki-check > .container > .ki-check__note {
  margin-block-start: var(--space-5);
}

.ki-check__note strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.ki-check__shield {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  
  margin-block-start: 0.28em;
  color: var(--color-accent);
}

@keyframes check-report-float {
  0%, 100% { translate: 0 0;      scale: 1; }
  50%      { translate: 0 -3px;   scale: 1.004; }
}

@keyframes check-glow-breathe {
  0%, 100% { opacity: 0.82; scale: 1; }
  50%      { opacity: 1;    scale: 1.05; }
}

@keyframes check-ring-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.022; }
}

.ki-check__glow {
  animation: check-glow-breathe 12s var(--easing-standard) infinite;
}

.ki-check__rings > span {
  animation: check-ring-breathe 14s var(--easing-standard) infinite;
  animation-delay: calc((var(--i) - 6) * 0.34s);
}

@media (max-width: 63.99rem) {
  .ki-check__stage {
    min-block-size: clamp(17rem, 42vw, 22rem);
  }

.ki-check__rings {
    --check-rx: min(26rem, 54vw);
    --check-ry: min(11.5rem, 26svh);
  }

  .ki-check__glow {
    inline-size: min(40rem, 160vw);
    block-size: min(26rem, 120vw);
  }
}

@media (max-width: 47.99rem) {
  .ki-check__report {
    padding: var(--space-4);
  }

  .ki-check__row {
    gap: var(--space-3);
  }

.ki-check__rings {
    display: none;
  }

.ki-check__cta .button {
    padding-inline: var(--space-5);
  }

  .ki-check__note {
    text-align: start;
  }
}

.marquee {
  
  overflow: clip;
  min-width: 0;

-webkit-mask-image: linear-gradient(to right,
    var(--mask-clear) 0%, var(--mask-dim) 8%, var(--mask-solid) 30%,
    var(--mask-solid) 70%, var(--mask-dim) 92%, var(--mask-clear) 100%);
  mask-image: linear-gradient(to right,
    var(--mask-clear) 0%, var(--mask-dim) 8%, var(--mask-solid) 30%,
    var(--mask-solid) 70%, var(--mask-dim) 92%, var(--mask-clear) 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  
  animation: marquee-scroll var(--marquee-duration, 190s) linear infinite;
}

.marquee__label {
  margin-block-end: var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.marquee--bleed {
  --marquee-duration: 285s;
  inline-size: 100%;
}

.marquee--clients {
  margin-block-start: var(--space-3);
  margin-block-end: 0;
}

.ledger-section .marquee__label {
  
  margin-block-start: var(--space-9);
  margin-block-end: var(--space-2);
}

.marquee__track .marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2.25rem, 3.5vw, 4rem);
  padding-inline-end: clamp(2.25rem, 3.5vw, 4rem);
}

.marquee__logo {
  block-size: var(--logo-h, 2rem);
  inline-size: auto;
  max-inline-size: 11rem;
  
  object-fit: contain;
  
  opacity: 0.94;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.marquee__item:hover .marquee__logo {
  opacity: 1;
}

.marquee__logo--compact {
  --logo-h: 2.5rem;
}

.marquee__item {
  display: flex;
  align-items: center;
  min-width: 0;
}

.marquee__link {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  
  padding: var(--space-2);
  margin: calc(var(--space-2) * -1);
}

.marquee__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-muted);
  
  white-space: nowrap;
}

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

.trust__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.trust__strip > * {
  min-width: 0;
}

.trust__logo {
  block-size: auto;
  inline-size: auto;
  max-block-size: 2.75rem;
  max-inline-size: 10rem;
  opacity: 0.72;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.trust__logo:hover {
  opacity: 1;
}

.trust--tier1 .trust__logo {
  block-size: 2.75rem;
}

.results .section__intro {
  margin-block-end: var(--space-5);
}

.results__lead {
  font-size: var(--font-size-md);
  color: var(--color-text);
  text-wrap: pretty;
}

.results > .container > .results__reframe {
  margin-block-start: var(--space-8);
  
  font-size: var(--font-size-sm);

max-inline-size: 58ch;
  margin-inline: auto;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .proof__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 75rem) {
  .proof-wrap {
    padding-inline: var(--space-7);
  }
}

@media (min-width: 48rem) {
  .proof__grid {
    column-gap: 0;
  }

  .proof-wrap {
    padding-inline: var(--space-6);
  }

  .proof-wrap + .proof-wrap {
    border-inline-start: 1px solid var(--color-border);
  }
}

.proof-wrap {
  min-width: 0;
  display: flex;
}

.proof {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  min-inline-size: 0;

padding-block: var(--space-4);

  text-align: center;
}

.proof__figure,
.proof__label,
.proof__client {
  min-width: 0;
}

.proof__figure {
  display: flex;
  
  align-items: baseline;
  
  justify-content: center;
  
  gap: var(--space-2);

font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.proof__plus {
  font-size: var(--font-size-suffix);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  
  color: var(--color-accent-lilac);
}

.proof__value {
  min-width: 0;
}

.proof__label {
  margin-block-start: var(--space-3);
  font-size: var(--font-size-md);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  text-wrap: pretty;
}

.proof__client {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  hyphens: none;
}

.proof__client-name {
  
  color: var(--color-text);

  background-image: linear-gradient(var(--color-mark-fill), var(--color-mark-fill));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(var(--mark-fill, 1) * 100%) 100%;
  padding-inline: 0.12em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.proof__grid--route .proof__plus {
  color: var(--color-route);
}

.proof__grid--route .proof__client-name {
  background-image: linear-gradient(var(--color-route-mark), var(--color-route-mark));
}

.results .proof__client-name {
  background-image: linear-gradient(var(--color-proof-mark), var(--color-proof-mark));
}

.proof__grid.is-live .proof__client-name {
  --mark-fill: 0;
}

.proof__note {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  opacity: 0.75;
}

.results__stake {
  margin-block-start: var(--space-8);
  margin-inline: auto;
  
  max-inline-size: 62rem;
  text-align: center;
}

.results__stake-line {
  
  font-size: var(--font-size-xl);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  text-wrap: balance;
}

.results__stake-mark {
  background-image: linear-gradient(var(--color-proof-mark), var(--color-proof-mark));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(var(--mark-fill, 1) * 100%) 100%;
  padding-inline: 0.12em;
  border-radius: 3px;
  
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.results__stake.is-live {
  --mark-fill: 0;
}

.results__stake-note {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.results__stake .button {
  margin-block-start: var(--space-6);
}

.results__reporting {
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.results > .container > .results__stake {
  margin-block-start: var(--space-8);
}

.results > .container > .results__reporting {
  margin-block-start: var(--space-6);
}

.results > .container > .proof__grid {
  margin-block-start: var(--space-9);
}

.results-bar__tiles {
  --auto-grid-min: 20rem;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  min-width: 0;

  background-color: var(--glass-fill);
  background-image: var(--gradient-glass-bloom), var(--gradient-glass);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-block-start-color: var(--glass-edge-lit);
  border-block-end-color: var(--glass-edge-bottom);
  border-radius: var(--radius-xl);

box-shadow: var(--shadow-card-halo);
}

.tile__figure {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-accent);
  
  hyphens: none;
  text-wrap: balance;
}

.tile__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.tile[data-unconfirmed] .tile__figure {
  
}

.form[hidden] {
  display: none;
}

.form {
  display: flex;
  flex-direction: column;
  
  gap: var(--space-5);
  min-width: 0;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.form .form__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form__control {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.form .form__input {
  inline-size: 100%;
  min-block-size: 48px;
  
  padding-block: var(--space-3);
  padding-inline: var(--space-4) calc(var(--space-4) + 16px + var(--space-3));
  min-width: 0;

  background-color: var(--color-bg-subtle);
  color: var(--color-text);
  
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);

  transition:
    border-color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard);
}

.form .form__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form .form__input:hover {
  border-color: var(--color-text-muted);
}

.form .form__input:focus-visible {
  border-color: var(--color-accent);
}

[data-check-form] .form__input:focus-visible {
  background-color: var(--color-bg-pill);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.form__control-mark {
  position: absolute;
  inset-inline-end: var(--space-4);
  color: var(--color-accent);
  opacity: 0;
  scale: 0.6;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--easing-premium),
    scale var(--duration-base) var(--easing-premium);
}

.form__control:has(.form__input:valid:not(:placeholder-shown)) .form__control-mark {
  opacity: 1;
  scale: 1;
}

.form__field--radio {
  display: flex;
  flex-direction: column;
  
  gap: var(--space-2);
}

.form__submit {
  inline-size: 100%;
  margin-block-start: var(--space-2);
}

[data-check-form] .form__submit {
  
  inline-size: auto;
  max-inline-size: 100%;
  align-self: center;
}

.form__submit-arrow {
  flex-shrink: 0;
  transition: translate var(--duration-fast) var(--easing-standard);
}

.form__submit:hover .form__submit-arrow {
  translate: 3px 0;
}

[data-check-form] .form__promise {
  text-align: center;
}

.form__promise {
  display: block;

  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.form__error {
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

.form__success {
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

.form .form__input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form .form__input[aria-invalid="true"]:focus-visible {
  border-color: var(--color-error);
}

.form__turnstile:empty {
  
  display: none;
}

.form[data-unconfirmed] .form__submit .button__label::after {
  content: " ⚠";
}

.form--contact {
  
  gap: var(--space-5);
}

.form__required {
  color: var(--color-accent);
}

.form__hint {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.form--contact .form__input {
  min-block-size: 44px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
}

.form--contact .form__input--area {
  min-block-size: 0;
  resize: vertical;
}

.form--contact .form__field--radio {
  gap: var(--space-3);
}

.form--contact .form__submit {
  inline-size: auto;
  align-self: flex-start;
  margin-block-start: 0;
}

@media (max-width: 47.99rem) {
  .form--contact .form__submit {
    inline-size: 100%;
    align-self: stretch;
  }
}

.form--contact .form__promise {
  display: block;
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  max-width: 62ch;

  padding-inline-start: var(--space-5);
  
  border-inline-start: 2px solid var(--color-accent);
}

.quote .quote__text {
  font-size: var(--font-size-md);
  text-wrap: pretty;
}

.quote__source {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  min-width: 0;
}

.quote__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.quote__role {
  color: var(--color-text-muted);
}

.testimonials__rail {
  position: relative;
  
}

.testimonials__rail .testimonials__track {
  
  --rail-inset: calc(
    max(0px, (100% - var(--container-max-width)) / 2) + var(--container-padding)
  );

  display: flex;
  gap: var(--space-5);
  padding-inline-start: var(--rail-inset);
  
  padding-inline-end: 0;

  overflow-x: auto;
  
  overflow-y: hidden;
  
  padding-block-end: var(--space-7);
  
  scrollbar-width: none;
  
  overscroll-behavior-x: contain;
  
  scroll-snap-type: x proximity;
  
  scroll-padding-inline-start: var(--rail-inset);
  
  border-radius: var(--radius-md);
}

.testimonials__track::-webkit-scrollbar {
  display: none;
}

.testimonials__track > li {
  
  flex: 0 0 clamp(17rem, calc(100% - 4.5rem), 23rem);
  min-width: 0;
  display: grid;
  scroll-snap-align: start;
}

.testimonials__arrow {
  position: absolute;
  
  inset-block-start: calc(50% - var(--space-5));
  translate: 0 -50%;
  z-index: 2;

  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);

background-color: var(--color-bg-elevated);
  border: var(--card-edge-w) solid var(--glass-edge-lit);
  
  box-shadow: var(--shadow-avatar-glow);
  
  color: var(--color-text);

  transition:
    color var(--duration-slow) var(--easing-premium),
    opacity var(--duration-slow) var(--easing-premium),
    background-color var(--duration-slow) var(--easing-premium),
    border-color var(--duration-slow) var(--easing-premium);
}

.testimonials__arrow--prev { inset-inline-start: var(--container-padding); }
.testimonials__arrow--next { inset-inline-end: var(--container-padding); }

.testimonials__arrow:hover,
.testimonials__arrow:focus-visible {
  color: var(--world-accent-lift, var(--color-accent));
  border-color: var(--color-border-strong);
}

.testimonials__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

.testimonials__arrow svg {
  inline-size: 1rem;
  block-size: 1rem;
}

@media (min-width: 22.5rem) and (max-width: 47.99rem) {
  .testimonials__arrow {
    display: none;
  }
}

.testimonial {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  
  padding: var(--space-6) var(--space-5) var(--space-5);

  background-color: var(--glass-fill);
  
  background-image: var(--gradient-glass-bloom), var(--gradient-glass);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-block-start-color: var(--glass-edge-lit);
  border-block-end-color: var(--glass-edge-bottom);
  border-radius: var(--radius-xl);

  transition:
    background-color var(--duration-slow) var(--easing-premium),
    border-color var(--duration-slow) var(--easing-premium);
}

.testimonial:hover {
  background-color: var(--glass-fill-strong);
  border-color: var(--glass-edge-lit);
}

.testimonial__quote {
  font-size: var(--font-size-base);
  text-wrap: pretty;
}

.testimonial__quote p {
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 5;
  hyphenate-limit-chars: 14 6 5;
}

.testimonial__source {
  display: flex;
  flex-direction: column;
  
  gap: var(--space-5);
  min-width: 0;
}

.testimonial__avatar {
  display: grid;
  place-items: center;
  align-self: start;
  
  inline-size: clamp(3.5rem, 2.6rem + 2.4vw, 4.5rem);
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background-image: var(--gradient-avatar-sphere);
  box-shadow:
    var(--shadow-avatar-glow),
    var(--shadow-avatar-frame);
}

.testimonial__photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.testimonial__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.testimonial__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
  text-wrap: balance;
}

.testimonial__role {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

@supports (mask-composite: exclude) {

  .testimonial__ring {
    
    --shine-ring: var(--world-accent, var(--color-accent));
    --shine-base: transparent;

    position: absolute;
    
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    
    overflow: hidden;

padding: 1px;
    mask-image:
      linear-gradient(var(--color-polar) 0 0),
      linear-gradient(var(--color-polar) 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity var(--duration-slow) var(--easing-premium);
  }

  .testimonial__ring::before {
    
    --shine-sweep: 26deg;
    --shine-glint: var(--color-polar);

    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    
    inline-size: 330%;
    aspect-ratio: 1;
    
    translate: -50% -50%;

    background: conic-gradient(
      from calc(var(--shine-sweep) * -2),
      var(--shine-base),
      var(--shine-ring) var(--shine-sweep),
      var(--shine-glint) calc(var(--shine-sweep) * 2),
      var(--shine-ring) calc(var(--shine-sweep) * 3),
      var(--shine-base) calc(var(--shine-sweep) * 4)
    );

animation: package-ring-travel 8s linear infinite paused;
  }

.testimonial:hover .testimonial__ring,
  .testimonial:focus-within .testimonial__ring {
    opacity: 1;
  }

  .testimonial:hover .testimonial__ring::before,
  .testimonial:focus-within .testimonial__ring::before {
    animation-play-state: running;
  }
}

.diagnostic {
  
  --section-padding-y: clamp(3.5rem, 7vw, 6rem);

position: relative;
}

.diagnostic__head {
  
  max-inline-size: 40rem;
  margin-inline: auto;
  text-align: center;
}

.diagnostic__head .eyebrow {
  margin-block-end: var(--space-3);
}

.diagnostic__title {
  
  margin-block-end: var(--space-3);
  
  text-wrap: balance;
}

.diagnostic__lead {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  max-inline-size: 28rem;
  margin-inline: auto;
  text-wrap: pretty;
}

.diagnostic__head {
  margin-block-end: var(--space-6);
}

.diagnostic__body {
  display: grid;
  gap: var(--space-7);
  min-width: 0;
}

.diagnostic__body {
  max-inline-size: 54rem;
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .diagnostic__body {
    gap: var(--space-8);
  }

}

.diagnostic__assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-6);

  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.diagnostic__tick {
  display: inline-block;
  inline-size: 0.95em;
  block-size: 0.95em;
  
  vertical-align: -0.14em;
  margin-inline-end: var(--space-2);
  color: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .diagnostic__value.is-armed .diagnostic__tick {
    opacity: 0;
    
    transform: scale(0.55);
    transition:
      opacity var(--duration-base) var(--easing-premium) var(--tick-delay, 0s),
      transform var(--duration-base) var(--easing-premium) var(--tick-delay, 0s);
  }

.diagnostic__value.is-armed.is-visible .diagnostic__tick {
    opacity: 1;
    transform: none;
  }

.diagnostic__assure > span:nth-child(1) { --tick-delay: 0.42s; }
  .diagnostic__assure > span:nth-child(2) { --tick-delay: 0.56s; }
  .diagnostic__assure > span:nth-child(3) { --tick-delay: 0.70s; }
}

.diagnostic__shell {
  position: relative;
  min-width: 0;

max-inline-size: 28rem;
  margin-inline: auto;
  inline-size: 100%;
}

.diagnostic__panel {
  position: relative;
  z-index: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.check-run {
  position: relative;
  
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: var(--space-5);

flex: 1;
  justify-content: center;
}

.check-run__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.check-run__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text);
}

.check-run__index {
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text);
}

.check-run__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  min-width: 0;
}

.check-run__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;

  opacity: 0.34;
  transition: opacity var(--duration-slow) var(--easing-premium);
}

.check-run__row[data-state="done"] {
  opacity: 1;
}

.check-run__icon {
  color: var(--color-text);
}

.check-run__name {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.check-run__mark {
  color: var(--color-accent);
  opacity: 0;
  scale: 0.5;
  transition:
    opacity var(--duration-base) var(--easing-premium),
    scale var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.check-run__row[data-state="done"] .check-run__mark {
  opacity: 1;
  scale: 1;
}

.check-run__scan {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 1px;
  pointer-events: none;

  background-color: var(--world-accent, var(--color-accent));

  mask-image: var(--gradient-scan-across);
  -webkit-mask-image: var(--gradient-scan-across);
}

.check-run__verdict {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
}

.check-run__verdict-mark {
  flex-shrink: 0;
  color: var(--color-accent);
}

.check-run__body {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-wrap: pretty;
}

.check-run__address {
  padding: var(--space-3) var(--space-4);

  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  word-break: break-all;

  background-color: var(--color-bg-subtle);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-radius: var(--radius-md);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 100svh;
  
  padding-block: 0;
}

.header + .immersive > main > .section.split:first-of-type {
  padding-block-start: 0;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  }
}

.split__side {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
}

.split__side--form {
  background-color: var(--color-bg);
}

@media (min-width: 1024px) {
  .split__side--form {
    background-color: transparent;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
  }

  .split__side--form::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    background-color: var(--glass-edge-lit);
    
    transform-origin: top;
    transform: scaleY(var(--seam-draw));
    pointer-events: none;
  }

.split__side--form::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 6rem;
    translate: -50% 0;
    transform: translateY(calc((var(--seam-draw) - 1) * 100%));

    background-image: radial-gradient(
      ellipse 3rem 6.5rem at 50% 100%,
      var(--color-accent) 0%,
      transparent 70%
    );
    mask-image: linear-gradient(to top, transparent 0, var(--color-polar) 1.5rem);
    -webkit-mask-image: linear-gradient(to top, transparent 0, var(--color-polar) 1.5rem);
    
    opacity: calc(var(--seam-glow) * 0.5);
    pointer-events: none;
  }
}

.split__inner {
  display: flex;
  flex-direction: column;
  min-width: 0;

  padding-inline: clamp(var(--space-5), 4.5vw, var(--space-8));
  padding-block:
    calc(var(--header-height) + var(--header-inset) + var(--space-7))
    var(--space-7);
}

@media (min-width: 1024px) {
  .split__inner {
    
    max-width: 42rem;
  }

.split__side--intro .split__inner {
    flex: 1;
    max-width: none;
  }

.split__side--form .split__inner {
    max-width: 46rem;
    margin-inline: auto;
    padding-inline: var(--space-6);
  }
}

.split__form-block {
  margin-block: auto;
}

.split__eyebrow {
  margin-block-end: var(--space-4);
}

.split__title {
  max-width: 12ch;
  margin-block-end: var(--space-5);
}

.split__lead {
  max-width: 38ch;
}

.split__inner .channels {
  display: grid;
  
  gap: var(--space-5);
  margin-block-start: auto;
  padding-block-start: var(--space-8);
}

.channel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "index label arrow"
    "icon  value arrow";
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  min-width: 0;

padding: var(--space-6);
  text-decoration: none;

  background-color: var(--glass-fill);
  background-image: var(--gradient-glass);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-block-start-color: var(--glass-edge-lit);
  border-block-end-color: var(--glass-edge-bottom);
  border-radius: var(--radius-lg);

  transition:
    transform var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard);
}

.channel:hover {
  transform: translateY(-2px);
  background-color: var(--glass-fill-strong);
  border-color: var(--glass-edge-lit);
}

.channel__index {
  grid-area: index;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-accent);
}

.channel__icon {
  grid-area: icon;
  
  justify-self: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--easing-standard);
}

.channel:hover .channel__icon {
  color: var(--color-accent);
}

.channel__label {
  grid-area: label;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.channel__value {
  grid-area: value;
  font-weight: var(--font-weight-medium);
  
  overflow-wrap: anywhere;
}

.channel__arrow {
  grid-area: arrow;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--color-accent);
  opacity: 0.7;
  filter: drop-shadow(0 0 5px var(--color-accent));
  transition:
    transform var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard),
    filter var(--duration-fast) var(--easing-standard);
}

.channel:hover .channel__arrow {
  transform: translateX(3px);
  opacity: 1;
  filter: drop-shadow(0 0 9px var(--color-accent));
}

.split__form-title {
  font-size: var(--font-size-xl);
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}

.split__side--form .form .form__input {
  background-color: var(--color-bg-subtle);
}

.split__side--form .form .form__input {
  padding-block: var(--space-2);
}

@media (min-width: 560px) {
  .split__side--form .form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

.split__side--form .form > .form__field:has(.form__input--area),
  .split__side--form .form > .form__field--radio,
  .split__side--form .form > .form__field[data-when-delivery],
  .split__side--form .form > .form__turnstile,
  .split__side--form .form > .form__submit,
  .split__side--form .form > .form__promise {
    grid-column: 1 / -1;
  }

.split__side--form .form > .form__submit {
    justify-self: start;
  }
}

@media (max-height: 940px) {
  .split__inner {
    padding-block:
      calc(var(--header-height) + var(--header-inset) + var(--space-6))
      var(--space-6);
  }

  .split__form-title {
    margin-block-end: var(--space-5);
    padding-block-end: var(--space-4);
  }

  .split__side--form .form {
    row-gap: var(--space-4);
  }

.split__side--form .form__input--area {
    block-size: 4.5rem;
  }

  .channel {
    padding: var(--space-4) var(--space-5);
  }

  .split__inner .channels {
    padding-block-start: var(--space-7);
  }
}

@media (max-width: 1023px) {
  .split {
    min-block-size: 0;
  }

  .split__side--form {
    min-block-size: 100svh;
  }

.split__side--form .split__inner {
    padding-block: var(--space-7);
  }

  .split__title,
  .split__lead {
    max-width: 34ch;
  }
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);

  padding: var(--space-1);
  background-color: var(--color-bg-subtle);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-radius: var(--radius-md);
}

.segmented__option {
  display: flex;
  min-width: 0;
  cursor: pointer;
}

.segmented__input {
  
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.segmented__face {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 44px;
  padding-inline: var(--space-4);

  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-align: center;

  border-radius: calc(var(--radius-md) - 2px);
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

.segmented__option:hover .segmented__face {
  color: var(--color-text);
}

.segmented__option:has(:checked) .segmented__face {
  background-color: var(--color-accent);
  color: var(--color-deep);
}

.segmented__option:has(:focus-visible) .segmented__face {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.form--js .form__field[data-when-delivery]:not([data-required="true"]) {
  display: none;
}

.form--js .form__field[data-when-delivery][data-required="true"] {
  animation: field-arrive var(--duration-base) var(--easing-premium) both;
}

@keyframes field-arrive {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.section.system {
  padding-block: 0;
}

.system__story.is-live {
  
  block-size: 250svh;
}

.system__stage {
  display: grid;

overflow: hidden;
}

.is-live > .system__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
}

.system__scene {
  display: grid;
  
  grid-template-rows: auto auto 1fr;
  row-gap: var(--space-6);
  padding-block:
    calc(var(--header-offset, calc(var(--header-height) + var(--header-inset))) + var(--space-6))
    var(--space-6);
  min-block-size: 0;
}

.system__head { grid-row: 1; }

.system,
.system__story,
.offer,
.process,
.chapter--og,
.chapter--hs,

.service-problem,

.about,

.final-cta:not(.final-cta--violeta) {
  
  --color-accent:        var(--color-accent-sky);
  --color-accent-subtle: var(--color-accent-azul-subtle);
  --color-mark-fill:     var(--color-mark-fill-azul);
  --shadow-node-soft:    var(--shadow-node-soft-azul);
  --shadow-node-live:    var(--shadow-node-live-azul);
  
  --shadow-accent-glow:  var(--shadow-accent-glow-azul);
}

.results,
.ledger-section,
.validation,

.final-cta--violeta {
  --color-accent:        var(--color-accent-lilac);
  --color-accent-subtle: var(--color-accent-lilac-subtle);
  --color-mark-fill:     var(--color-proof-mark);
  
  --shadow-avatar-glow:  var(--shadow-avatar-glow-lilac);
}

.chapter--og {
  --color-accent:        var(--color-accent-lilac);
  --color-accent-subtle: var(--color-accent-lilac-subtle);
}

.system .system__intro { grid-row: 2; grid-column: 1; }
.system__field { grid-row: 3; }

.system__story.is-live .system__intro > p {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.system .system__lede,
.system .system__intro {
  text-align: center;
  margin-inline: auto;
}

.system .system__lede {
  max-width: 46rem;
  
  margin-block-end: 0;
}

.system__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.system__title-lead {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
}

.system__title-rest {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-regular);
  
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-heading);
}

.system .system__intro {
  max-width: 52rem;
  
  margin-block-start: 0;
}

.system__field {
  position: relative;
  display: grid;
  place-items: center;
  padding-inline: var(--container-padding);
  
  padding-block-end: var(--space-8);
  min-block-size: 0;
}

.system__frame {
  
  --frame-build: 1;

  position: relative;
  inline-size: min(100%, 60rem);
  padding: var(--space-5);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.system__frame > * {
  position: relative;
}

.system__centre {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;

  display: grid;
  place-items: center;

max-inline-size: min(24rem, calc(2 * var(--orb-rx) - 15rem));
}

.system__centre > * {
  grid-area: 1 / 1;
}

.system__state {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.system__word {
  white-space: nowrap;
}

.system__ch {
  display: inline;
}

.system__story.is-live .system__state {
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;

  grid-area: 1 / 1;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
  text-align: center;
  text-wrap: balance;
  hyphens: none;
}

.system__core {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  text-align: center;
  
  position: relative;
}

.system__frame-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  hyphens: none;
}

.system__payoff {
  margin-block-start: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-accent);
  hyphens: none;
}

.system__orbit {
  
  --orb-rx: min(28.75rem, calc(50vw - 9rem));
  
  --orb-ry: min(9.6875rem, 20svh);

--orb-ring-step: calc((1 - 0.56) / 3);
  --orb-ring-base: 0.12;

  position: relative;
  inline-size: 100%;
  
  block-size: calc(2 * (0.866 * var(--orb-ry)) + 3.25rem);
}

.system__rings {
  
  --ring-hairline: 0.72;

position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  pointer-events: none;
}

.system__rings > span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  
  --ring: calc(var(--orb-ring-base) + var(--i) * var(--orb-ring-step));
  inline-size: calc(2 * var(--ring) * var(--orb-rx));
  block-size: calc(2 * var(--ring) * var(--orb-ry));
  
  translate: -50% -50%;
  
  --ring-depth: 1;
  
  opacity: calc(
    var(--frame-build, 1) * var(--ring-weight) * var(--ring-hairline, 1) *
    var(--ring-depth, 1)
  );
}

.system__rings > span:nth-child(1)  { --i: 0;  --ring-weight: 0.62; }
.system__rings > span:nth-child(2)  { --i: 1;  --ring-weight: 0.72; }
.system__rings > span:nth-child(3)  { --i: 2;  --ring-weight: 0.82; }
.system__rings > span:nth-child(4)  { --i: 3;  --ring-weight: 0.90; }  
.system__rings > span:nth-child(5)  { --i: 4;  --ring-weight: 0.96; }  
.system__rings > span:nth-child(6)  { --i: 5;  --ring-weight: 1.00; }  
.system__rings > span:nth-child(7)  { --i: 6;  --ring-weight: 0.98; }  
.system__rings > span:nth-child(8)  { --i: 7;  --ring-weight: 0.86; }
.system__rings > span:nth-child(9)  { --i: 8;  --ring-weight: 0.68; }  
.system__rings > span:nth-child(10) { --i: 9;  --ring-weight: 0.50; }  
.system__rings > span:nth-child(11) { --i: 10; --ring-weight: 0.34; }

.system__rings > span > i::after {
  content: '';
  position: absolute;
  
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--color-orbit-active);
  opacity: var(--ring-active, 0);
  pointer-events: none;
}

@keyframes system-orbit-drift {
  0%, 100% { --orbit-shift: -6; }
  50%      { --orbit-shift: 6; }
}

.is-pulsed .system__masts {
  animation: system-orbit-drift 44s var(--easing-standard) infinite;
}

@keyframes system-mast-breathe {
  0%, 100% { translate: calc(var(--node-x) - 50%) calc(var(--node-y) - 100%); }
  50%      { translate: calc(var(--node-x) * 1.045 - 50%) calc(var(--node-y) * 1.045 - 100%); }
}

@keyframes system-ring-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.045; }
}

.system__rings > span > i {
  position: absolute;
  inset: 0;
  
  border: 1px solid var(--color-orbit-line);
  border-block-start-color: var(--color-orbit-far);
  border-block-end-color: var(--color-orbit-near);
  border-radius: 50%;
  
  animation: system-ring-breathe 8s var(--easing-standard) infinite;
  animation-delay: calc((var(--i) - 10) * 0.22s);
}

.system__masts {
  
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.mast {
  
  --ring: calc(var(--orb-ring-base) + var(--mast-ring) * var(--orb-ring-step));
  
  --a: calc((var(--mast-angle) + var(--orbit-shift, 0) * (0.7 + var(--mast-ring) * 0.06)) * 1deg);
  --node-x: calc(var(--ring) * var(--orb-rx) * cos(var(--a)) * var(--mast-zoom, 1));
  --node-y: calc(var(--ring) * var(--orb-ry) * sin(var(--a)) * var(--mast-zoom, 1));
  
  --depth: calc((sin(var(--a)) + 1) / 2);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;

--mast-height: calc((4.25rem + var(--depth) * 4.5rem) * var(--mast-len, 1));
  
  --tone-label: calc(0.82 + var(--depth) * 0.18);
  --tone-line:  calc(0.38 + var(--depth) * 0.46);
  --head-size:  calc((0.92 + var(--depth) * 0.14) * var(--head-fit));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  block-size: var(--mast-height);
  
  translate: calc(var(--node-x) - 50%) calc(var(--node-y) - 100%);
  
  animation: system-mast-breathe 8s var(--easing-standard) infinite;
  animation-delay: calc((var(--mast-ring) - 10) * 0.22s);
  
}

.mast__head {
  display: flex;
  align-items: center;
  
  gap: 0.4375rem;
  margin-block-end: 0.125rem;
  
  white-space: nowrap;
  
  --head-fit: 1;
  scale: var(--head-size);

opacity: calc(var(--mast-head, 1) * var(--tone-label));
  
  translate: 0 calc((1 - var(--mast-head, 1)) * 0.5rem);
}

.mast__icon {
  flex-shrink: 0;
  
  color: var(--color-accent-sky);
}

.mast__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text);
  
  hyphens: none;
}

.mast--key {
  --tone-label: calc(0.95 + var(--depth) * 0.05);
  --tone-line:  calc(0.60 + var(--depth) * 0.34);
  --head-size:  calc((1 + var(--depth) * 0.12) * var(--head-fit));
}

.mast--key .mast__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.mast__node::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--color-accent);
  opacity: var(--mast-live, 1);
}

.mast--key .mast__node::before {
  box-shadow: var(--shadow-node-live);
}

.is-pulsed .mast--key .mast__node::before {
  animation: system-node-pulse 3.8s var(--easing-standard) infinite;
  
  animation-delay: calc(var(--mast-ring) * -0.47s);
}

@keyframes system-node-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.45; }
}

.mast__head {
  pointer-events: auto;
}

.mast:has(.mast__head:hover) {
  --tone-label: 1;
  --tone-line: 0.92;
}

.mast:has(.mast__head:hover) .mast__node {
  scale: calc(var(--mast-dot, 1) * 1.3);
}

.mast__head,
.mast__line {
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.mast__line {
  inline-size: 1px;
  
  flex: 1 1 auto;
  min-block-size: 0;

background-image: var(--gradient-mast-line);
  
  opacity: var(--tone-line);
  
  transform-origin: bottom;
  scale: 1 var(--mast-draw, 1);
}

.system__story.is-live .mast {
  --mast-dot: 0;
  --mast-ping: 0;
  --mast-draw: 0;
  --mast-head: 0;
  --mast-live: 0;
}

.system__story.is-live 
.mast__node {
  flex-shrink: 0;
  inline-size: 0.3125rem;
  block-size: 0.3125rem;
  border-radius: 50%;
  background-color: var(--color-mast-node);
  
  margin-block-end: -0.15625rem;
  
  opacity: var(--mast-dot, 1);
  scale: var(--mast-dot, 1);
  position: relative;
}

.mast__node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-accent-sky);
  scale: calc(3.4 - var(--mast-ping, 1) * 2.4);
  opacity: calc(min(var(--mast-ping, 1) * 6, 1) * (1 - var(--mast-ping, 1)));
  pointer-events: none;
}

@media (max-width: 74.99rem) { .mast__head { --head-fit: 0.92; } }
@media (max-width: 67.99rem) { .mast__head { --head-fit: 0.84; } }

@media (max-width: 63.99rem), (max-height: 49.99rem) {
  .system__masts { display: none; }
}

.system__modules {
  position: absolute;
  inset: 0;
  margin: 0;
  list-style: none;
  padding: 0;
}

.system__modules > .module {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  min-width: 0;
  translate: calc(-50% + var(--orb-x, 0px)) calc(-50% + var(--orb-y, 0px));
}

.system__modules > .module:nth-child(1) { --orb-x: calc(-0.5 * var(--orb-rx)); --orb-y: calc(-0.866 * var(--orb-ry)); }
.system__modules > .module:nth-child(2) { --orb-x: calc(0.5 * var(--orb-rx));  --orb-y: calc(-0.866 * var(--orb-ry)); }
.system__modules > .module:nth-child(3) { --orb-x: var(--orb-rx);              --orb-y: 0px; }
.system__modules > .module:nth-child(4) { --orb-x: calc(0.5 * var(--orb-rx));  --orb-y: calc(0.866 * var(--orb-ry)); }
.system__modules > .module:nth-child(5) { --orb-x: calc(-0.5 * var(--orb-rx)); --orb-y: calc(0.866 * var(--orb-ry)); }
.system__modules > .module:nth-child(6) { --orb-x: calc(-1 * var(--orb-rx));   --orb-y: 0px; }

.module__pill {
  
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  
  min-block-size: 48px;
  padding: var(--space-3) var(--space-4);

background-color: var(--frost-fill);
  background-image: var(--gradient-frost-haze);
  backdrop-filter: blur(var(--frost-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(1.35);

  border: 1px solid var(--frost-edge);
  border-block-start-color: var(--frost-edge-lit);
  border-radius: var(--radius-pill);

box-shadow:
    inset 0 1px 0 var(--frost-lip),
    inset 0 -1px 0 var(--frost-lip-under);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .module__pill {
    background-color: var(--frost-fill-dense);
    border-color: var(--frost-edge-lit);
  }
}

.module__icon {
  flex-shrink: 0;
  color: var(--color-accent-sky);
}

.module__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  
  min-width: 0;
  hyphens: none;
  overflow-wrap: anywhere;
}

@keyframes module-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

.module__pill {
  animation: module-float 6.5s var(--easing-standard) infinite;
  animation-delay: calc(var(--module-slot) * -0.95s);
}

.module__pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-accent-subtle);
  opacity: 0;
  pointer-events: none;
}

.is-pulsed .module__pill::after {
  animation: system-pulse var(--duration-slow) var(--easing-standard) 1 both;
  animation-delay: calc(var(--module-slot) * 70ms);
}

@keyframes system-pulse {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 61.99rem) {
  .system__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) and (max-height: 52rem) {
  .system__title-lead { font-size: var(--font-size-3xl); }
  .system__title-rest { font-size: var(--font-size-xl); }
  .system__scene {
    row-gap: var(--space-3);
    padding-block:
      calc(var(--header-offset, calc(var(--header-height) + var(--header-inset))) + var(--space-4))
      var(--space-4);
  }
  .system__frame { gap: var(--space-3); padding: var(--space-4); }
}

@media (max-width: 47.99rem) {
  
  .system__story.is-live { block-size: 210svh; }

.is-live .system__scene {
    grid-template-rows: auto 1fr;
  }
  
  .is-live .system__intro,
  .is-live .system__field {
    grid-row: 2;
    grid-column: 1;
  }
  .is-live .system__intro {
    align-self: start;
  }

  .system__title-rest { font-size: var(--font-size-xl); }
  .system__scene {
    row-gap: var(--space-3);
    padding-block:
      calc(var(--header-offset, calc(var(--header-height) + var(--header-inset))) + var(--space-4))
      var(--space-4);
  }
  .system__field { padding-block-end: var(--space-4); }
  .system__frame { gap: var(--space-2); padding: var(--space-3); }
  
  .module__pill { padding: var(--space-2) var(--space-3); }

  .system__modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

.system__orbit {
    position: static;
    block-size: auto;
  }

.system__rings { display: none; }
  
  .system__masts { display: none; }
  
  .system__centre {
    position: static;
    translate: none;
    max-inline-size: none;
    margin-block-end: var(--space-3);
  }

.system__core { padding: 0; }

.system__modules {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--space-3);
    
    justify-items: stretch;
    align-items: start;

--spine-gutter: 22px;
    --spine-dot: 7px;
    position: relative;
  }

.system__frame .system__modules {
    padding-inline-start: var(--spine-gutter);
  }

.system__modules::before,
  .system__modules::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--spine-gutter) / 2 - 1px);
    inset-block: 24px;
    inline-size: 2px;
    border-radius: 1px;
    pointer-events: none;
  }

.system__modules::before {
    background-color: var(--color-border-faint);
    opacity: var(--spine-fade, 1);
  }

.system__modules::after {
    background-color: var(--color-accent);
    transform: scaleY(clamp(0, var(--spine-draw, 1), 1));
    transform-origin: top center;
    box-shadow: 0 0 8px 1px var(--color-accent-subtle);
    opacity: var(--spine-fade, 1);
  }

.system__modules > .module {
    position: static;
    translate: none;
    --orb-x: 0px;
    --orb-y: 0px;
  }

.system__modules > .module::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--spine-gutter) / 2 - var(--spine-dot) / 2);
    inset-block-start: calc(24px - var(--spine-dot) / 2);
    inline-size: var(--spine-dot);
    block-size: var(--spine-dot);
    border-radius: 50%;
    background-color: var(--color-accent);
    pointer-events: none;
    
    opacity: calc(
      clamp(0, (var(--spine-draw, 1) - (var(--module-slot) - 1) * 0.18) / 0.1, 1)
      * var(--spine-fade, 1)
    );
  }

.system__modules > .module {
    position: relative;
    inset: auto;
  }

.system__story.is-live .system__frame {
    --spine-draw: 0;
  }
}

.hero > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.hero > .container > * {
  margin-block: 0;
}

.hero__badge {
  max-width: 62ch;
  font-size: var(--font-size-sm);
}

.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--color-accent); }

.hero.hero--split > .container {
  align-items: stretch;
  text-align: start;
}

.hero.hero--split .hero__grid {
  inline-size: 100%;
  display: grid;

grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
  gap: var(--space-8);
}

.hero.hero--split .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  
  max-inline-size: 38rem;
  min-width: 0;

container-type: inline-size;
}

.hero.hero--split .hero__copy > * {
  margin-block: 0;
}

.hero.hero--split .hero__badge { margin-block-end: calc(var(--space-3) - var(--space-4)); }
.hero.hero--split .hero__subline { margin-block-end: calc(var(--space-6) - var(--space-4)); }
.hero.hero--split .hero__actions { margin-block-end: calc(var(--space-5) - var(--space-4)); }

.hero.hero--split .hero__badge {
  max-width: 54ch;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.hero.hero--split .hero__badge a { color: var(--color-accent); }

.hero.hero--split .hero__title {
  max-width: 22ch;
  font-size: min(var(--font-size-3xl), 8.2cqi);
}

.hero.hero--split .hero__subline {
  max-width: 46ch;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.hero.hero--split .hero__actions .button {
  min-block-size: 52px;
  padding-inline: var(--space-6);
  font-size: var(--font-size-md);
}

.hero.hero--split .hero__trust {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.is-arrival.is-entering .header__logo,
.is-arrival.is-entering .nav__item,
.is-arrival.is-entering .nav-toggle,
.is-arrival.is-entering .header__cta {
  opacity: 0;
}

.is-entering .hero__badge,
.is-entering .hero__title,
.is-entering .hero__subline,
.is-entering .hero__actions,
.is-entering .hero__trust-item,
.is-entering .split__title,
.is-entering .split__lead,
.is-entering .ref-hero__title,
.is-entering .ref-hero__lead,
.is-entering .case-study__meta,
.is-entering .case-study__title,
.is-entering .case-study__key,
.is-entering .split__eyebrow,
.is-entering .split__form-title {
  
  opacity: var(--enter-floor);
}

.is-entering .ring {
  opacity: 0;
}

.is-entering .channel,
.is-entering .showcase__pane,
.is-entering .split__side--form .form__field,
.is-entering .split__side--form .form__submit,
.is-entering .split__side--form .form__promise {
  opacity: 0;
}

.is-entering .split__side--form {
  --seam-draw: 0;
}

.ring {

--dial: max(32rem, min(clamp(28rem, 45vw, 42rem), 74svh));
  --field: calc(var(--dial) * 1.7);

--pulse-period: 9s;

--orbit-step: calc(var(--field) * 0.062);
  --orbit-1: calc(var(--field) * 0.080);
  --orbit-2: calc(var(--orbit-1) + var(--orbit-step));
  --orbit-3: calc(var(--orbit-1) + 2 * var(--orbit-step));
  --orbit-4: calc(var(--orbit-1) + 3 * var(--orbit-step));
  --orbit-5: calc(var(--orbit-1) + 4 * var(--orbit-step));
  --orbit-6: calc(var(--orbit-1) + 5 * var(--orbit-step));
  --orbit-7: calc(var(--orbit-1) + 6 * var(--orbit-step));
  --orbit-8: calc(var(--orbit-1) + 7 * var(--orbit-step));
  --orbit-9: calc(var(--orbit-1) + 8 * var(--orbit-step));
  --orbit-10: calc(var(--orbit-1) + 9 * var(--orbit-step));
  
  --orbit-11: calc(var(--orbit-1) + 10 * var(--orbit-step));
  --orbit-12: calc(var(--orbit-1) + 11 * var(--orbit-step));
  --orbit-13: calc(var(--orbit-1) + 12 * var(--orbit-step));
  --orbit-14: calc(var(--orbit-1) + 13 * var(--orbit-step));
  --orbit-15: calc(var(--orbit-1) + 14 * var(--orbit-step));
  --orbit-16: calc(var(--orbit-1) + 15 * var(--orbit-step));

--ring-core: calc(var(--dial) * 0.28);

--pill-reach: max(64px, calc(var(--dial) * 0.10));
  --pill-rise: max(40px, calc(var(--dial) * 0.07));

  position: relative;
  
  min-inline-size: 0;
  inline-size: calc(var(--dial) + 2 * var(--pill-reach));
  block-size: calc(var(--dial) + 2 * var(--pill-rise));
  
  justify-self: end;

translate: 3% 0;

animation: system-spin 40s var(--easing-journey) infinite,
             system-breathe 8s var(--easing-standard) infinite;
}

@keyframes system-breathe {
  0%, 100% { --breath-scale: 1;    --breath: 1; }
  50%      { --breath-scale: 1.03; --breath: 1.28; }
}

@keyframes system-spin {
  0%, 100% { --spin:   0deg; }
  25%      { --spin:  15deg; }
  75%      { --spin: -15deg; }
}

.ring--arming .ring__node,
.ring--arming .ring__dock {
  animation-play-state: paused;
}

.ring--arming .ring__core,
.ring--arming .ring__cell,
.ring--arming .ring__anchor,
.ring--arming .ring__anchor-halo,
.ring--arming .ring__pill::before {
  animation: none;
}

.ring__orbits {
  
  pointer-events: none;
}

.ring__orbit {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1;
  opacity: calc(var(--disc-weight, 1) * var(--ring-lift, 1) * var(--breath, 1));
}

.ring__cell:nth-child(1 ) { --i: 15; --disc-weight: 0.0220; }  
.ring__cell:nth-child(2 ) { --i: 14; --disc-weight: 0.0258; }  
.ring__cell:nth-child(3 ) { --i: 13; --disc-weight: 0.0303; }  
.ring__cell:nth-child(4 ) { --i: 12; --disc-weight: 0.0355; }  
.ring__cell:nth-child(5 ) { --i: 11; --disc-weight: 0.0417; }  
.ring__cell:nth-child(6 ) { --i: 10; --disc-weight: 0.0489; }  
.ring__cell:nth-child(7 ) { --i:  9; --disc-weight: 0.0574; }  
.ring__cell:nth-child(8 ) { --i:  8; --disc-weight: 0.0673; }  
.ring__cell:nth-child(9 ) { --i:  7; --disc-weight: 0.0790; }  
.ring__cell:nth-child(10) { --i:  6; --disc-weight: 0.0927; }  
.ring__cell:nth-child(11) { --i:  5; --disc-weight: 0.1087; }  
.ring__cell:nth-child(12) { --i:  4; --disc-weight: 0.1276; }  
.ring__cell:nth-child(13) { --i:  3; --disc-weight: 0.1298; }  
.ring__cell:nth-child(14) { --i:  2; --disc-weight: 0.1342; }  
.ring__cell:nth-child(15) { --i:  1; --disc-weight: 0.1364; }  
.ring__cell:nth-child(16) { --i:  0; --disc-weight: 0.1870; }  

.ring__docks {
  
  pointer-events: none;
}

.ring__dock {
  
  --dock-gain: 1;
  
}

.ring__dock[data-svc="1"] { --dock-delay: 0.72s; }  
.ring__dock[data-svc="2"] { --dock-delay: 0.48s; }  
.ring__dock[data-svc="3"] { --dock-delay: 0.48s; }  
.ring__dock[data-svc="4"] { --dock-delay: 0.72s; }  
.ring__dock[data-svc="5"] { --dock-delay: 0.48s; }  
.ring__dock[data-svc="6"] { --dock-delay: 0.48s; }  

.ring__anchor {
  fill: var(--color-accent);
  --dock-rest: calc(0.92 * var(--dock-gain, 1));
  opacity: var(--dock-rest);
  animation: dock-ping var(--pulse-period) linear infinite;
  animation-delay: var(--dock-delay, 0s);
}

.ring__anchor-halo {
  fill: var(--color-accent);
  --dock-rest: 0;
  --dock-peak: 0.5;
  opacity: 0;
  animation: dock-ping var(--pulse-period) linear infinite;
  animation-delay: var(--dock-delay, 0s);
}

@keyframes dock-ping {
  0%, 100% { opacity: var(--dock-rest, 0); }
  4%       { opacity: var(--dock-peak, 1); }
  16%      { opacity: var(--dock-rest, 0); }
}

.ring__cell {
  
  transform-box: view-box;
  transform-origin: 200px 200px;
  rotate: var(--spin);
  
  opacity: var(--enter-fade, 1);

scale: calc(var(--enter-scale, 1) * var(--breath-scale, 1));
  animation: orbit-pulse var(--pulse-period) linear infinite;
  animation-delay: var(--pulse-delay, 0s);
}

.ring__cell:nth-child(1 ) { --pulse-delay: 3.60s; }  
.ring__cell:nth-child(2 ) { --pulse-delay: 3.36s; }  
.ring__cell:nth-child(3 ) { --pulse-delay: 3.12s; }  
.ring__cell:nth-child(4 ) { --pulse-delay: 2.88s; }  
.ring__cell:nth-child(5 ) { --pulse-delay: 2.64s; }  
.ring__cell:nth-child(6 ) { --pulse-delay: 2.40s; }  
.ring__cell:nth-child(7 ) { --pulse-delay: 2.16s; }  
.ring__cell:nth-child(8 ) { --pulse-delay: 1.92s; }  
.ring__cell:nth-child(9 ) { --pulse-delay: 1.68s; }  
.ring__cell:nth-child(10) { --pulse-delay: 1.44s; }  
.ring__cell:nth-child(11) { --pulse-delay: 1.20s; }  
.ring__cell:nth-child(12) { --pulse-delay: 0.96s; }  
.ring__cell:nth-child(13) { --pulse-delay: 0.72s; }  
.ring__cell:nth-child(14) { --pulse-delay: 0.48s; }  
.ring__cell:nth-child(15) { --pulse-delay: 0.24s; }  
.ring__cell:nth-child(16) { --pulse-delay: 0s; }  

@keyframes orbit-pulse {
  0%, 100% { --ring-lift: 1; }
  4%       { --ring-lift: 1.55; }
  16%      { --ring-lift: 1; }
}

@keyframes core-emit {
  0%, 100% { scale: 1; }
  3%       { scale: 1.02; }
  16%      { scale: 1; }
}

.ring__dial {
  
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: var(--dial);
  block-size: var(--dial);
  
  overflow: visible;
}

.ring__nodes {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ring__node {
  --r: 0px;
  --nx: 0;
  --ny: 0;
  
  --dock: 36px;

  position: absolute;
  inset: 0;
  pointer-events: none;
  rotate: var(--spin);
}

.ring__node:nth-child(1) { --r: var(--orbit-4); --nx: -0.7071; --ny:  0.7071; --dock: 44px; }  
.ring__node:nth-child(2) { --r: var(--orbit-3); --nx:  0.5736; --ny:  0.8192; --dock: 40px; }  
.ring__node:nth-child(3) { --r: var(--orbit-3); --nx:  0.9397; --ny: -0.3420; --dock: 57px; }  
.ring__node:nth-child(4) { --r: var(--orbit-4); --nx:  0.7071; --ny: -0.7071; --dock: 44px; }  
.ring__node:nth-child(5) { --r: var(--orbit-3); --nx: -0.5736; --ny: -0.8192; --dock: 40px; }  
.ring__node:nth-child(6) { --r: var(--orbit-3); --nx: -0.9397; --ny:  0.3420; --dock: 49px; }  

.ring__pill {
  display: flex;
  align-items: center;
  
  --pill-scale: 1.12;

  gap: calc(var(--space-2) * var(--pill-scale));
  min-block-size: calc(40px * var(--pill-scale));
  padding-block: calc(var(--space-2) * var(--pill-scale));
  padding-inline: calc(var(--space-3) * var(--pill-scale));

  background-color: var(--frost-fill);
  background-image: var(--gradient-frost-haze);
  backdrop-filter: blur(var(--frost-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(1.35);

  border: 1px solid var(--frost-edge);
  border-block-start-color: var(--frost-edge-lit);
  border-radius: var(--radius-pill);

  font-size: calc(var(--font-size-sm) * var(--pill-scale));
  
  white-space: nowrap;
  hyphens: none;
}

.ring__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.ring__icon { flex-shrink: 0; color: var(--color-accent); }

.ring__label > small {
  display: block;
  font-size: 0.78em;
  color: var(--color-text-muted);
}

.ring__core {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;

  inline-size: var(--ring-core);
  aspect-ratio: 1 / 1;
  border-radius: 50%;

display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3);
  text-align: center;
  hyphens: none;

animation: core-emit var(--pulse-period) var(--easing-standard) infinite;
}

.ring__core-title {

font-size: max(var(--font-size-md), calc(var(--ring-core) * 0.14));
  font-weight: var(--font-weight-bold);
  
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.05;
  text-wrap: balance;
}

.ring__core-sub {
  max-inline-size: 15ch;
  margin: 0;
  
  font-size: var(--font-size-sm);
  
  color: var(--color-text);
  line-height: 1.35;
  
  hyphens: none;
}

.ring__pill {
  
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  
  translate:
    calc((var(--r) * var(--breath-scale, 1) * var(--enter-scale, 1) + var(--dock) + var(--enter-out, 0px)) * var(--nx) - 50%)
    calc((var(--r) * var(--breath-scale, 1) * var(--enter-scale, 1) + var(--dock) + var(--enter-out, 0px)) * var(--ny) - 50%);
  
  scale: var(--enter-pop, 1);
  opacity: var(--enter-fade, 1);
  
  rotate: calc(-1 * var(--spin));
  pointer-events: auto;
}

.ring__pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--color-accent-subtle);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  --dock-peak: 1;
  animation: dock-ping var(--pulse-period) linear infinite;
  animation-delay: var(--dock-delay, 0s);
}

.ring__pill::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--color-accent);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.ring__pill:hover::after,
.ring__pill:focus-visible::after {
  opacity: 0.55;
}

.ring:has(.ring__node:nth-child(1) .ring__pill:is(:hover, :focus-visible)) .ring__dock[data-svc="1"],
.ring:has(.ring__node:nth-child(2) .ring__pill:is(:hover, :focus-visible)) .ring__dock[data-svc="2"],
.ring:has(.ring__node:nth-child(3) .ring__pill:is(:hover, :focus-visible)) .ring__dock[data-svc="3"],
.ring:has(.ring__node:nth-child(4) .ring__pill:is(:hover, :focus-visible)) .ring__dock[data-svc="4"],
.ring:has(.ring__node:nth-child(5) .ring__pill:is(:hover, :focus-visible)) .ring__dock[data-svc="5"],
.ring:has(.ring__node:nth-child(6) .ring__pill:is(:hover, :focus-visible)) .ring__dock[data-svc="6"] {
  --dock-gain: 1.25;
}

.ring__node:nth-child(1) { --pf: 3; --dock-delay: 0.72s; }  
.ring__node:nth-child(2) { --pf: 2; --dock-delay: 0.48s; }  
.ring__node:nth-child(3) { --pf: 2; --dock-delay: 0.48s; }  
.ring__node:nth-child(4) { --pf: 3; --dock-delay: 0.72s; }  
.ring__node:nth-child(5) { --pf: 2; --dock-delay: 0.48s; }  
.ring__node:nth-child(6) { --pf: 2; --dock-delay: 0.48s; }  

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.hero .hero__check { flex-shrink: 0; color: var(--color-accent); margin-block-start: 0; }

@media (max-width: 79.99rem) {
  
  .hero.hero--split .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

.ring {
    --dial: max(30rem, min(clamp(20rem, 52vw, 32rem), 46svh));
    justify-self: center;
  }
}

@media (max-width: 47.99rem) {

.hero.hero--split .ring      { order: 1; }
  .hero.hero--split .hero__copy { order: 2; }

.ring {
    --dial: clamp(13.35rem, min(55vw, 42svh), 19rem);
    --pill-reach: 0px;
    
    --ring-core: calc(var(--dial) * 0.38);
  }

  .ring__core-title { font-size: var(--font-size-sm); }

.ring { --m-pill: 0.856; }
  .ring__pill { --pill-scale: var(--m-pill); }

  .ring__icon {
    inline-size: calc(20px * var(--m-pill));
    block-size: calc(20px * var(--m-pill));
  }

.ring__label-tail {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

.ring__node:nth-child(1) { --dock: calc(27.58 * var(--m-pill) * 1px + 9.41px); }  
  .ring__node:nth-child(2) { --dock: calc(23.80 * var(--m-pill) * 1px + 9.22px); }  
  .ring__node:nth-child(3) { --dock: calc(40.85 * var(--m-pill) * 1px + 9.06px); }  
  .ring__node:nth-child(4) { --dock: calc(27.58 * var(--m-pill) * 1px + 9.41px); }  

.ring__node:nth-child(5) .ring__label {
    white-space: normal;
    inline-size: min-content;
  }

.ring__node:nth-child(5) { --dock: calc(37.90 * var(--m-pill) * 1px + 9.22px); }
  .ring__node:nth-child(6) { --dock: calc(33.73 * var(--m-pill) * 1px + 9.06px); }  

.ring__core-sub {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hero.hero--split .hero__trust { gap: var(--space-2); }
}

@media (max-width: 22.49rem) {
  
  .ring { --dial: min(clamp(15.5rem, 63vw, 19rem), 42svh); }

  .ring__nodes {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-height: 880px) {
  .hero.hero--split .hero__copy { gap: var(--space-4); }
  .hero.hero--split .hero__grid { gap: var(--space-7); }
}

@media (max-height: 800px) {
  .hero.hero--split .hero__copy { gap: var(--space-3); }
  .hero.hero--split .hero__trust { gap: var(--space-2); }
}

@media (max-width: 47.99rem) and (max-height: 880px) {
  .hero.hero--split .hero__grid { gap: var(--space-4); }
}

.case-study {
  --color-accent: var(--world-accent-lift, var(--color-emerald));
  --color-accent-subtle:
    rgb(from var(--world-accent-lift, var(--color-emerald)) r g b / 0.14);
}

.case-study__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  min-width: 0;
}

.case-study__client {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-accent);
}

.case-study__category {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  min-width: 0;
}

.case-study__title {
  max-width: 34ch;
  margin-block-end: var(--space-5);
  hyphens: manual;
}

.case-study__key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-end: var(--space-7);
  min-width: 0;
}

.case-study__key-figure {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-accent);
  hyphens: none;
}

.case-study__key-label {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  min-width: 0;
}

.case-study__visual {
  margin-block-end: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
}

.case-study__body {
  max-width: 68ch;
}

.case-study__body > * + * {
  margin-block-start: var(--space-8);
}

.case-study__section-title {
  margin-block-end: var(--space-4);
  font-size: var(--font-size-xl);
}

.case-study__quote {
  margin-block-start: var(--space-8);
}

.case-study__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  min-width: 0;
}

.case-study__services .button {
  min-block-size: 3rem;
}

.case-study__services > * {
  min-width: 0;
}

.case-study__meta,
.case-study__key,
.case-study__services {
  
  justify-content: center;
}

.case-study__title {
  
  margin-inline: auto;
  text-align: center;
}

.case-study__body {
  margin-inline: auto;
}

.case-study__section-title {
  text-align: center;
}

.case-study__quote {
  margin-inline: auto;
}

.header + .immersive > main > .ref-hero:first-of-type {
  
  padding-block-start: calc(var(--header-height) + var(--header-inset) + var(--space-8));
}

.ref-hero {
  
  --curve-h: 58svh;

--curve-lift: calc(14svh - 24px);

  position: relative;
  justify-content: flex-start;
  
  overflow: hidden;
}

.ref-hero__inner {
  
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ref-hero__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.ref-hero__text {
  max-width: 68ch;
  min-width: 0;
}

@media (min-width: 64rem) {
  .ref-hero__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
    gap: var(--space-7);
    
    align-items: end;
  }}

.ref-hero__title {
  max-width: 22ch;
  margin-block-end: var(--space-4);
  font-size: var(--font-size-3xl);
  letter-spacing: var(--letter-spacing-heading);
}

.ref-hero__lead {
  max-width: 58ch;
  margin-block-end: 0;
  font-size: var(--font-size-base);
}

.curve {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--curve-lift);
  block-size: var(--curve-h);
  min-width: 0;
}

.curve__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

#curve-area stop {
  stop-color: var(--color-accent);
}

#curve-head-glow stop {
  stop-color: var(--color-white);
}

#curve-reveal {
  mask-type: alpha;
}

#curve-edge stop {
  stop-color: var(--color-accent);
}

#curve-foot {
  mask-type: alpha;
}

#curve-foot-ramp stop {
  stop-color: var(--color-accent);
}

.curve__area {
  fill: url(#curve-area);
  stroke: none;
}

.curve__halo,
.curve__live {
  fill: none;
  
}

.curve__halo {
  stroke: var(--color-accent);
  stroke-width: 22;
  stroke-linecap: round;
  opacity: 0.10;
}

.curve__live {
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
}

.curve__head-glow,
.curve__head-core {
  opacity: var(--head-lit, 0);
  pointer-events: none;
}

.curve__head-glow {
  rx: calc(34px * var(--curve-aniso, 1));
  ry: 34px;
}

.curve__head-core {
  fill: var(--color-white);
  rx: calc(6px * var(--curve-aniso, 1));
  ry: 6px;
}

.curve__node {
  position: absolute;
  
  translate: -50% -50%;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.curve__node[data-curve-node="0"] { inset-inline-start: 25.0%; inset-block-start: 60.0%; }
.curve__node[data-curve-node="1"] { inset-inline-start: 58.3%; inset-block-start: 79.0%; }
.curve__node[data-curve-node="2"] { inset-inline-start: 84.2%; inset-block-start: 30.0%; }

.curve__node {
  inline-size: 12px;
  block-size: 12px;
  background-color: var(--color-accent);
  box-shadow: var(--glow-node);
  opacity: var(--node-lit, 1);
  transition: opacity var(--duration-base) var(--easing-standard);
}

.curve__points {
  margin: 0;
  min-width: 0;
}

.curve-point {
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  
  .js .curve-point {
    opacity: 0;
    transform: translateY(14px);
  }

.js .curve__node {
    --node-lit: 0;
  }
}

.curve-point__figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-heading);
  
  white-space: nowrap;
  color: var(--color-text);
  
  font-variant-numeric: tabular-nums;
}

.curve-point__plus {
  font-size: var(--font-size-suffix);
  color: var(--color-accent);
}

.curve-point__label {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.curve-point__client {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (min-width: 64rem) {

.immersive main > .ref-hero > .curve__points {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--curve-lift);
    inline-size: auto;
    max-inline-size: none;
    block-size: var(--curve-h);
    padding-inline: 0;
    margin-inline: 0;
    pointer-events: none;
  }

.curve-point {
    position: absolute;
    inline-size: 23rem;
    margin-inline-start: -11.5rem;
    text-align: center;
  }

.curve-point--above {
    inset-inline-start: var(--x);
    inset-block-end: calc(100% - var(--y));
    margin-block-end: var(--point-gap, var(--space-5));
  }

.curve-point[data-curve-point="0"] { --point-gap: var(--space-5); }
  
  .curve-point[data-curve-point="1"] { --point-gap: clamp(61px, 179.7px - 8.245vw, 95px); }
  
  .curve-point[data-curve-point="2"] { --point-gap: 116px; }

  .curve-point--below {
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    margin-block-start: var(--space-5);
  }

.curve-point[data-curve-point="0"] { --x: 25.0%; --y: 60.0%; }
  
  .curve-point[data-curve-point="1"] { --x: 54.5%; --y: 80.0%; }
  .curve-point[data-curve-point="2"] { --x: 84.2%; --y: 30.0%; }
}

@media (max-width: 63.999rem) {
  .curve__points {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-block-start: var(--space-7);
  }

.curve__points.container {
    padding-inline: var(--container-padding);
  }

.curve__points.container > .curve-point {
    margin-block-start: 0;
  }

.ref-hero > .curve {
    position: relative;
    inset-block-end: auto;
    --curve-h: min(42svh, 92vw);
    order: 0;
  }

}

@media (min-width: 48rem) and (max-width: 63.999rem) {
  
  .curve__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-content: start;
  }

@supports (grid-template-rows: subgrid) {
    .curve__points {
      grid-template-rows: auto auto auto;
    }

    .curve-point {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }

    .curve-point__label,
    .curve-point__client {
      margin-block-start: 0;
    }
  }

.curve-point__label {
    font-size: var(--font-size-base);
  }

  .curve-point__client {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caption);
  }
}

@media (max-width: 47.99rem) {
  
  .ref-hero > .ref-hero__inner { order: 0; }
  .ref-hero > .curve__points   { order: 1; }

.ref-hero > .curve { display: none; }

.ref-hero__kicker {
    display: block;
    margin-block-end: var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caption);
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .ref-hero__colon { display: none; }

  .ref-hero__headline { display: block; }

.ref-hero__title {
    max-width: none;
    font-size: var(--font-size-4xl);
  }

.ref-hero > .curve__points {
    --rail-gutter: 34px;
    --rail-dot: 7px;
    position: relative;
    display: flex;
    flex-direction: column;
    
    gap: var(--space-8);
    
    margin-block-start: var(--space-7);
  }

.is-railed .curve-point {
    padding-inline-start: var(--rail-gutter);
  }

.ref-hero > .curve__points.is-railed::before,
  .ref-hero > .curve__points.is-railed::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--container-padding) + var(--rail-gutter) / 2 - 1px);
    inset-block-start: var(--rail-head, 0.75em);
    block-size: calc(100% - var(--rail-head, 0.75em) - var(--rail-tail, 0px));
    inline-size: 2px;
    border-radius: 1px;
    pointer-events: none;
  }

.ref-hero > .curve__points.is-railed::before {
    background-color: var(--color-border-faint);
  }

.ref-hero > .curve__points.is-railed::after {
    background-color: var(--color-accent);
    
    opacity: 0.45;
    transform: scaleY(clamp(0, var(--curve-draw, 1), 1));
    transform-origin: top center;
  }

  .curve-point {
    
    --dot-at: 0.75em;
    
    position: relative;
    inset: auto;
    max-inline-size: none;
    text-align: start;
  }

.is-railed .curve-point::before {
    content: "";
    position: absolute;
    inset-block-start: var(--dot-at);
    inset-inline-start: calc(var(--rail-gutter) / 2 - var(--rail-dot) / 2);
    inline-size: var(--rail-dot);
    block-size: var(--rail-dot);
    margin-block-start: calc(var(--rail-dot) / -2);
    border-radius: 50%;
    background-color: var(--color-accent);
    box-shadow:
      0 0 0 4px var(--color-bg),
      0 0 6px 1px var(--color-accent-subtle);
    opacity: clamp(0, (var(--curve-draw, 1) - var(--point-at, 0)) / 0.04 + 1, 1);
    pointer-events: none;
  }

.curve-point__figure {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    
    gap: 0.08em;
    font-size: var(--font-size-3xl);
    line-height: 1;
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text);
  }

  .curve-point__label {
    display: block;
    margin-block-start: var(--space-3);
    font-size: var(--font-size-md);
    color: var(--color-text);
  }

.curve-point__client {
    display: block;
    margin-block-start: var(--space-2);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-caption);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
}

@media (min-width: 64rem) {
  .proof-axis__points {
    
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }

.proof-axis__points > :nth-child(2) {
    margin-block-start: var(--space-5);
  }

  .proof-axis__points > :nth-child(3) {
    margin-block-start: calc(var(--space-5) * 2);
  }

  .ref-hero__title {
    max-width: 20ch;
  }
}

.chapter {
  
  --case-measure: 78rem;

  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chapter__inner {
  inline-size: 100%;
  max-inline-size: var(--case-measure);
  margin-inline: auto;
  min-width: 0;
}

.chapter__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.chapter__eyebrow {
  display: flex;
  align-items: baseline;
  
  justify-content: center;
  gap: var(--space-3);
  min-width: 0;
}

.chapter .chapter__number {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.chapter .chapter__number::after {
  content: " —";
  color: var(--color-text-muted);
}

.chapter__client {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  min-width: 0;
}

.chapter__title {
  max-width: 30ch;
  margin-block-start: var(--space-5);
  font-size: var(--font-size-3xl);
  text-wrap: balance;
}

.chapter .chapter__title a {
  
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.chapter .chapter__title a:hover {
  color: var(--color-accent);
}

.chapter__motif {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.artifact {
  position: relative;
  display: block;
  inline-size: 100%;
  
  margin-block-start: var(--space-8);
  text-decoration: none;
  min-width: 0;
}

.artifact__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  
  box-shadow: var(--shadow-lg);
  
  transform: scale(var(--artifact-scale, 1));
  transition:
    transform var(--duration-slower) var(--easing-premium),
    border-color var(--duration-base) var(--easing-standard);
}

.chapter .artifact {
  
  margin-inline: auto;
}

.artifact__media {
  display: block;
  
  transform: scale(var(--artifact-zoom, 1));
  transition: transform var(--duration-slower) var(--easing-premium);
}

.artifact__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.artifact__veil {
  background-color: var(--color-deep);
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.artifact:is(:hover, :focus-visible) {
  --artifact-zoom: 1.025;
}

.artifact:is(:hover, :focus-visible) .artifact__frame {
  border-color: var(--color-border-strong);
}

.artifact:is(:hover, :focus-visible) .artifact__veil {
  opacity: 0.14;
}

.has-artifact-cursor .artifact {
  cursor: none;
}

.artifact-cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}

.artifact-cursor__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-base);
  white-space: nowrap;
  color: var(--color-text);
  
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  transition:
    transform var(--duration-base) var(--easing-premium),
    opacity var(--duration-fast) var(--easing-standard);
}

.artifact-cursor.is-live .artifact-cursor__inner {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.artifact-cursor__arrow {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

.strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  min-width: 0;
}

.strip__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.strip__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.strip__icon {
  display: block;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-block-start: var(--space-4);
  color: var(--color-text-muted);
}

.strip .strip__body {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text);
  text-wrap: pretty;
}

.strip__outcome {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  
  text-wrap: balance;
}

.strip__outcome-note {
  display: block;
  color: var(--color-text-muted);
}

.strip__systems {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  min-width: 0;
}

.strip__systems > * {
  min-width: 0;
}

.strip .strip__system-link {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  max-inline-size: 100%;
  
  min-block-size: 3rem;
  padding-block: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--space-2));
  background-size: 0 1px;
  transition:
    color var(--duration-fast) var(--easing-standard),
    background-size var(--duration-base) var(--easing-standard);
}

.strip .strip__system-link:hover {
  color: var(--color-accent);
  background-size: 100% 1px;
}

.strip .strip__system-arrow {
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  margin-inline-start: var(--space-2);
  color: var(--color-accent);
}

.strip {
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--color-border);
}

@media (min-width: 64rem) {
  
  .strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-start: 1px solid var(--color-border);
  margin: 0;
  min-width: 0;
}

@media (min-width: 48rem) {
  .ledger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ledger__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-6);
  min-width: 0;
  text-align: center;
}

.ledger__stat + .ledger__stat {
  position: relative;
}

.ledger__stat + .ledger__stat::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--color-border);
  transform: scaleX(var(--rule-draw, 1));
  transform-origin: left center;
  transition: transform var(--duration-slower) var(--easing-journey);
  
  transition-delay: var(--rule-delay, 0s);
}

@media (min-width: 48rem) {
  
  .ledger .ledger__stat {
    padding-inline: var(--space-6);
  }

.ledger .ledger__stat + .ledger__stat::before {
    inset-block: 0;
    inline-size: 1px;
    block-size: auto;
    transform: scaleY(var(--rule-draw, 1));
    transform-origin: center top;
  }
}

.ledger__figure {
  display: flex;
  align-items: baseline;
  
  justify-content: center;
  gap: var(--space-2);
  
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.ledger__plus {
  font-size: var(--font-size-suffix);
  color: var(--color-accent);
}

.ledger__mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.ledger__value {
  display: inline-block;
  transform: translateY(var(--digit-rise, 0));
  transition: transform var(--duration-slower) var(--easing-premium);
}

.ledger__label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-wrap: pretty;
}

.ledger__client {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ledger__meaning {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.ledger__aside {
  margin-block-start: var(--space-6);
  text-align: center;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.ledger__aside-client {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.voice {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 46ch;
  margin: 0;
  min-width: 0;
}

.voice__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-accent);
}

.voice .voice__quote {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.voice__key {
  color: var(--color-text);

  background-image: linear-gradient(var(--color-proof-mark), var(--color-proof-mark));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(var(--mark-fill, 1) * 100%) 100%;
  padding-inline: 0.12em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.voice__quote p.is-live {
  --mark-fill: 0;
}

.voice__source {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.voice__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.voice__role {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (min-width: 64rem) {
  
  .voice {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 46ch);
    gap: var(--space-7);
    max-width: none;
    align-items: start;
  }

  .voice__label { grid-column: 1; grid-row: 1; }
  .voice .voice__quote { grid-column: 2; grid-row: 1; }
  .voice__source { grid-column: 2; grid-row: 2; }
}

.voice.voice--centred {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.validation .voice__label {
  
  color: var(--color-proof-mark);
}

.voice.voice--centred .voice__label {
  font-size: var(--font-size-4xl);
  line-height: 1;
  letter-spacing: normal;
  
  margin-block-end: calc(var(--font-size-4xl) * -0.34);
}

.voice.voice--centred .voice__quote {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-base);

max-inline-size: 52ch;
  margin-inline: auto;
}

@media (max-width: 47.99rem) {
  .voice.voice--centred .voice__quote {
    font-size: var(--font-size-lg);
  }
}

.validation .voice .voice__quote {
  color: var(--color-text);
}

.voice__portrait {
  display: grid;
  place-items: center;
  inline-size: clamp(3.5rem, 2.6rem + 2.4vw, 4.5rem);
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background-image: var(--gradient-avatar-sphere);
  box-shadow:
    var(--shadow-avatar-glow),
    var(--shadow-avatar-frame);
}

.voice__photo {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.voice.voice--centred .voice__source {
  align-items: center;
}

.voice.voice--centred .voice__portrait {
  margin-block-end: var(--space-3);
}

@media (min-width: 64rem) {
  
  .voice.voice--centred {
    display: flex;
    grid-template-columns: none;
    max-width: none;
  }
}

.chapter-nav {
  position: fixed;
  
  view-transition-name: page-chapters;
  inset-block-end: var(--space-6);
  inset-inline-start: var(--space-6);
  z-index: var(--z-sticky);

  display: flex;
  align-items: center;
  gap: var(--space-3);

  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--easing-standard);
}

.chapter-nav.is-live {
  opacity: 1;
}

.chapter-nav__current {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.chapter-nav__rail {
  position: relative;
  inline-size: 3rem;
  block-size: 1px;
  background-color: var(--color-border-strong);
}

.chapter-nav__fill {
  position: absolute;
  inset: 0;
  background-color: var(--color-accent);
  transform: scaleX(var(--chapter-progress, 0));
  transform-origin: left center;
}

@media (max-width: 47.999rem) {
  .chapter-nav {
    display: none;
  }
}

.flow {
  margin: 0;
  padding-block: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);

--flow-gap: var(--space-5);
}

.flow__track {
  list-style: none;
  margin: 0;
  padding: 0;
  inline-size: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow-gap);
}

.flow__step {
  position: relative;
  
  min-inline-size: 0;
}

.flow__node {
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);

  background-color: var(--glass-fill);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-radius: var(--radius-md);

opacity: calc(0.22 + 0.78 * var(--flow-node, 1));
  transform: translate3d(0, calc((1 - var(--flow-node, 1)) * 10px), 0);
}

.flow__icon {
  flex: none;
  color: var(--color-accent);
}

.flow__name {
  min-inline-size: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  
  hyphens: none;
}

.flow--funnel .flow__step:not(:last-child)::after,
.flow--funnel .flow__step:not(:last-child)::before,
.flow--service .flow__step:not(:last-child)::after,
.flow--service .flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.flow--funnel .flow__step:not(:last-child)::after,
.flow--service .flow__step:not(:last-child)::after {
  inset-inline-start: calc(50% - 1px);
  inset-block-start: 100%;
  inline-size: 2px;
  block-size: var(--flow-gap);
  background-color: var(--color-accent);
  transform: scaleY(var(--flow-line, 1));
  transform-origin: top center;
}

.flow--service .flow__step:not(:last-child)::before {
  inset-inline-start: calc(50% - 5px);
  inset-block-start: calc(100% + var(--flow-gap) - 7px);
  inline-size: 9px;
  block-size: 9px;
  border-inline-end: 2px solid var(--color-accent);
  border-block-end: 2px solid var(--color-accent);
  transform: rotate(45deg);
  
  opacity: clamp(0, calc((var(--flow-line, 1) - 0.7) / 0.3), 1);
}

.flow--funnel .flow__step:not(:last-child)::before {
  inset-inline-start: calc(50% - 4.5px);
  inset-block-start: calc(100% + var(--flow-gap) - 4.5px);
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 10px 3px var(--color-accent-subtle);
  opacity: clamp(0, calc((var(--flow-line, 1) - 0.72) / 0.18), 1);
}

.flow__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.flow__chip {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  white-space: nowrap;
}

.flow__pill {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);

  background-color: var(--color-bg-subtle);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-radius: var(--radius-pill);
}

.flow__pill-icon {
  flex: none;
  color: var(--color-accent);
}

.flow__pill-text {
  min-inline-size: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  hyphens: none;
}

@media (min-width: 64rem) {
  .flow:not(.flow--motif):not(.flow--strip) {
    --flow-gap: var(--space-7);
    
    max-inline-size: 70rem;
    margin-inline: auto;
  }

  .flow:not(.flow--motif):not(.flow--strip) .flow__track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .flow:not(.flow--motif):not(.flow--strip) .flow__node {
    
    min-block-size: 10rem;
  }

.flow:not(.flow--motif):not(.flow--strip) .flow__node {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    text-align: center;
  }

.flow--service:not(.flow--motif) .flow__step:not(:last-child)::after {
    inset-inline-start: 100%;
    inset-block-start: calc(50% - 1px);
    inline-size: var(--flow-gap);
    block-size: 2px;
    transform: scaleX(var(--flow-line, 1));
    transform-origin: left center;
  }

  .flow--service:not(.flow--motif) .flow__step:not(:last-child)::before {
    inset-inline-start: calc(100% + var(--flow-gap) - 7px);
    inset-block-start: calc(50% - 5px);
    border-inline-end: 2px solid var(--color-accent);
    border-block-end: none;
    border-block-start: 2px solid var(--color-accent);
    transform: rotate(45deg);
  }
}

.flow.is-live .flow__step:not([data-channels]),
.flow.is-live .flow__step[data-channels~="node"] {
  --flow-node: 0;
}

.flow.is-live .flow__step:not([data-channels]),
.flow.is-live .flow__step[data-channels~="line"] {
  --flow-line: 0;
}

.flow.is-live .flow__chip,
.flow.is-live .flow__pill {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.flow--service.is-live .flow__node {
  opacity: var(--flow-node, 1);
}

.case-study__visual--flow {
  overflow: visible;
  border-radius: 0;
}

.artifact__media,
.case-study__visual--flow {
  container: flowbox / inline-size;
}

.flow-fit {
  display: block;
  container: caseflow / inline-size;
}

@container caseflow (min-width: 64rem) {
  .flow--converge:not(.flow--motif),
  .flow--hub:not(.flow--motif) {
    max-inline-size: 70rem;
    margin-inline: auto;
  }
}

.flow--funnel:not(.flow--motif):not(.flow--strip) .flow__node {
  flex-direction: column;
  
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-4);
  
  padding: var(--space-5) var(--space-4);
  
  text-align: center;
  
  container-type: inline-size;
}

.flow--funnel:not(.flow--motif) .flow__name {
  font-size: min(var(--font-size-lg), 15.5cqi);
  line-height: var(--line-height-tight);
}

.flow__mock {
  display: block;
  inline-size: 100%;
  
  max-inline-size: 22rem;
  
  margin-block-start: auto;
  margin-inline: auto;
}

.flow__mock-svg {
  display: block;
  inline-size: 100%;
  
  block-size: auto;
}

.flow__mock-frame {
  fill: var(--color-bg-subtle);
  stroke: var(--color-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.flow__mock-rule {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.flow__mock-block  { fill: var(--color-text); opacity: 0.07; }
.flow__mock-track  { fill: var(--color-text); opacity: 0.12; }
.flow__mock-avatar { fill: var(--color-text); opacity: 0.12; }
.flow__mock-slot   { fill: var(--color-text); opacity: 0.09; }
.flow__mock-line   { fill: var(--color-text); opacity: 0.16; }
.flow__mock-mark   { fill: var(--color-text); opacity: 0.34; }

.flow__mock-chip {
  fill: var(--sys-fill);
  stroke: var(--sys-edge);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.flow__mock-accent,
.flow__mock-accent-dot,
.flow__mock-dot {
  fill: var(--color-accent);
}

.flow__mock-disc {
  fill: var(--color-accent-subtle);
  stroke: var(--color-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.flow__mock-check-disc { fill: var(--color-accent-subtle); }

.flow__mock-check {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.flow__mock-live { fill: var(--color-success); }

.flow__link { display: none; }

@container caseflow (min-width: 64rem) {

.flow--funnel:not(.flow--motif):not(.flow--strip) .flow__track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .flow--funnel:not(.flow--motif):not(.flow--strip) .flow__node {
    min-block-size: 10rem;
  }

.flow--funnel:not(.flow--motif):not(.flow--strip) {
    --flow-gap: var(--space-8);
    max-inline-size: 78rem;
  }

.flow--funnel:not(.flow--motif) .flow__step:not(:last-child)::after,
  .flow--funnel:not(.flow--motif) .flow__step:not(:last-child)::before {
    content: none;
  }

  .flow--funnel:not(.flow--motif) .flow__link {
    display: block;
    position: absolute;
    inset-inline-start: 100%;
    inset-block-start: 50%;
    inline-size: var(--flow-gap);
    block-size: auto;
    translate: 0 -50%;
    pointer-events: none;

--link-reveal: calc(clamp(0, var(--flow-line, 1), 1) * 108%);
    mask-image: linear-gradient(to right,
      var(--mask-solid) 0,
      var(--mask-solid) var(--link-reveal),
      var(--mask-clear) calc(var(--link-reveal) + 8%));
    -webkit-mask-image: linear-gradient(to right,
      var(--mask-solid) 0,
      var(--mask-solid) var(--link-reveal),
      var(--mask-clear) calc(var(--link-reveal) + 8%));

filter: drop-shadow(0 0 2.5px var(--color-accent));
  }

  .flow--funnel:not(.flow--motif) .flow__link-line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.55;
  }

  .flow--funnel:not(.flow--motif) .flow__link-dot {
    fill: var(--color-accent);
  }

  .flow--funnel:not(.flow--motif) .flow__link-halo {
    fill: var(--color-accent);
    opacity: 0.22;
  }

.flow--funnel:not(.flow--motif) .flow__link-pulse {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 9px 400px;
    animation: flow-link-pulse 3.1s linear infinite;
    animation-delay: calc(var(--i, 0) * -0.42s);
    opacity: clamp(0, calc((var(--flow-line, 1) - 0.88) / 0.12), 1);
  }

@keyframes flow-link-pulse {
    from { stroke-dashoffset: 409px; }
    to   { stroke-dashoffset: 0; }
  }
}

@media (max-width: 47.99rem) {
  .flow--funnel:not(.flow--motif):not(.flow--strip) .flow__node {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    
    text-align: start;
  }

  .flow--funnel:not(.flow--motif) .flow__mock {
    
    flex: none;
    inline-size: 104px;
    max-inline-size: none;
    
    margin: 0;
  }

.flow--funnel:not(.flow--motif) .flow__name {
    text-align: start;
    flex: 1;
    min-inline-size: 0;
  }
}

.flow--converge {
  
  --converge-fan: 6rem;
  
  --converge-link: 4rem;
}

.converge {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.converge__label {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  hyphens: none;
}

.converge__systems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.converge__system {
  
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  
  background-color: var(--sys-fill);
  border: var(--sys-edge-w) solid var(--sys-edge);
  border-radius: var(--sys-radius);
  
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  hyphens: none;

opacity: calc(0.22 + 0.78 * clamp(0, (var(--flow-node, 1) - var(--i, 0) * 0.06) / 0.58, 1));
}

.converge__fan {
  position: relative;
  inline-size: 2px;
  block-size: var(--space-6);
  background-color: var(--color-accent);
  transform: scaleY(var(--flow-line, 1));
  transform-origin: top center;
}

.converge__rays {
  display: none;
}

.converge__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  inline-size: 9px;
  block-size: 9px;
  margin: 0 0 -4.5px -4.5px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 10px 3px var(--color-accent-subtle);
  opacity: clamp(0, calc((var(--flow-line, 1) - 0.72) / 0.18), 1);
}

.converge__link {
  position: relative;
  inline-size: 2px;
  block-size: var(--space-6);
  background-color: var(--color-accent);
  transform: scaleY(var(--flow-line, 1));
  transform-origin: top center;
}

.converge__report,
.converge__outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  
  padding: var(--space-5);
  text-align: center;
  border-radius: var(--radius-md);
  min-inline-size: 0;

  opacity: calc(0.22 + 0.78 * var(--flow-node, 1));
  transform: translate3d(0, calc((1 - var(--flow-node, 1)) * 10px), 0);
}

.converge__report {
  background-color: var(--glass-fill);
  border: var(--card-edge-w) solid var(--glass-edge);
}

.converge__outcome {
  background-color: var(--color-accent-subtle);
  border: 1px solid var(--color-accent);
}

.converge__report-icon,
.converge__outcome-icon {
  flex: none;
  color: var(--color-accent);
}

.converge__report-title,
.converge__outcome-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  hyphens: none;
}

@container caseflow (min-width: 64rem) {
  .flow:not(.flow--motif) .converge {
    display: grid;

grid-template-columns:
      minmax(0, 1fr)
      var(--converge-fan)
      minmax(0, 2.5fr)
      var(--converge-link)
      minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    align-items: center;
  }

  .flow:not(.flow--motif) .converge__label {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-block-end: var(--space-3);
  }

.flow:not(.flow--motif) .converge__systems {
    min-block-size: calc(7 * 3.4rem);
  }

  .flow:not(.flow--motif) .converge__systems {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 0;
    justify-items: stretch;
    align-self: stretch;
  }

  .flow:not(.flow--motif) .converge__system {
    align-self: center;
    
    text-align: start;
    
    min-inline-size: 0;
    white-space: normal;
  }

  .flow:not(.flow--motif) .converge__fan {
    grid-column: 2;
    grid-row: 2;
    
    align-self: stretch;
    inline-size: auto;
    block-size: auto;
    background-color: transparent;
    transform: none;
  }

  .flow:not(.flow--motif) .converge__rays {
    display: block;
    inline-size: 100%;
    block-size: 100%;

--fan-reveal: calc(clamp(0, var(--flow-line, 1), 1) * 108%);
    mask-image: linear-gradient(to right,
      var(--mask-solid) 0,
      var(--mask-solid) var(--fan-reveal),
      var(--mask-clear) calc(var(--fan-reveal) + 8%));
    -webkit-mask-image: linear-gradient(to right,
      var(--mask-solid) 0,
      var(--mask-solid) var(--fan-reveal),
      var(--mask-clear) calc(var(--fan-reveal) + 8%));
  }

.flow:not(.flow--motif) .converge__ray {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.55;
    
  }

.flow:not(.flow--motif) .converge__rays {
    filter: drop-shadow(0 0 2.5px var(--color-accent));
  }

  .flow:not(.flow--motif) .converge__pulses {
    filter: drop-shadow(0 0 3px var(--color-accent));
    opacity: clamp(0, calc((var(--flow-line, 1) - 0.88) / 0.12), 1);
  }

  .flow:not(.flow--motif) .converge__pulse {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    
    stroke-dasharray: 8px 700px;
    animation: converge-pulse 3.1s linear infinite;
    animation-delay: calc(var(--i, 0) * -0.42s);
  }

@keyframes converge-pulse {
    from { stroke-dashoffset: 708px; }
    to   { stroke-dashoffset: 0; }
  }

  .flow:not(.flow--motif) .converge__report {
    grid-column: 3;
    grid-row: 2;
    
    align-items: stretch;
    text-align: start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-5);
  }

  .flow:not(.flow--motif) .converge__link {
    grid-column: 4;
    grid-row: 2;
    justify-self: center;
    inline-size: 100%;
    block-size: 2px;
    transform: scaleX(var(--flow-line, 1));
    transform-origin: left center;
  }

.flow:not(.flow--motif) .converge__link::after {
    inset-inline-start: 100%;
    inset-inline-end: auto;
    inset-block-start: 50%;
    inset-block-end: auto;
    margin: -4.5px 0 0 -4.5px;
  }

.flow:not(.flow--motif) .converge__link::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 26%;
    block-size: 100%;
    border-radius: 1px;
    background-color: var(--color-accent);
    filter: drop-shadow(0 0 3px var(--color-accent));
    opacity: clamp(0, calc((var(--flow-line, 1) - 0.88) / 0.12), 1);
    animation: converge-link-run 3.1s linear infinite;
  }

  @keyframes converge-link-run {
    from { transform: translateX(-100%); }
    to   { transform: translateX(385%); }
  }

.flow:not(.flow--motif) .converge__outcome {
    grid-column: 5;
    grid-row: 2;
    container-type: inline-size;
  }

  .flow:not(.flow--motif) .converge__outcome-title {
    font-size: min(var(--font-size-lg), 11.8cqi);
    max-inline-size: 100%;
  }
}

.flow--motif {
  padding-block: 0;
  gap: var(--space-5);
  --flow-gap: var(--space-4);
}

.flow--motif .flow__node {
  padding: var(--space-3) var(--space-4);
}

.flow--motif .flow__name {
  font-size: var(--font-size-base);
}

.flow--motif .converge {
  gap: var(--space-4);
}

.flow--motif .converge__systems {
  gap: var(--space-1);
}

.flow--motif .converge__system {
  padding: var(--space-1) var(--space-3);
}

.flow--motif .converge__fan {
  block-size: var(--space-5);
}

.flow--motif .converge__report {
  padding: var(--space-4) var(--space-5);
}

.flow--motif .converge__report-title {
  font-size: var(--font-size-md);
}

.hub {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.hub__label {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-accent);
  
  hyphens: none;
}

.hub__stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  inline-size: 100%;
  min-width: 0;
}

.hub__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  
  background-color: var(--sys-fill);
  border: var(--sys-edge-w) solid var(--sys-edge);
  border-radius: var(--sys-radius);
  min-width: 0;
  opacity: calc(0.22 + 0.78 * clamp(0, (var(--flow-node, 1) - var(--i, 0) * 0.12) / 0.64, 1));
}

.hub__icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

.hub__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  
  white-space: nowrap;
  hyphens: none;
  min-width: 0;
}

.hub__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  
  background-color: var(--glass-fill);
  border: var(--card-edge-w) solid var(--color-accent-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
  min-width: 0;
  opacity: calc(0.22 + 0.78 * clamp(0, var(--flow-node, 1) / 0.7, 1));
}

.hub__core-mock {
  display: block;
  inline-size: 100%;
  
  max-inline-size: 18rem;
  margin-inline: auto;
}

.hub__core-mock-svg {
  display: block;
  inline-size: 100%;
  
  block-size: auto;
}

.hub__core-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  text-wrap: balance;
  hyphens: none;
}

.hub__core-note {
  margin: 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  inline-size: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.hub__fan {
  position: relative;
  inline-size: 2px;
  block-size: var(--space-6);
  background-color: var(--color-accent);
  transform: scaleY(var(--flow-line, 1));
  transform-origin: top center;
}

.hub__rays {
  display: none;
}

.hub__fan::after {
  content: "";
  position: absolute;
  inset-inline-start: -3.5px;
  inset-block-end: -4.5px;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 10px 3px var(--color-accent-subtle);
  transform: scaleY(calc(1 / max(var(--flow-line, 1), 0.08)));
  opacity: clamp(0, calc((var(--flow-line, 1) - 0.72) / 0.14), 1);
}

.hub__stats {
  display: flex;
  flex-wrap: wrap;
  
  justify-content: center;
  gap: var(--space-4) var(--space-7);
  inline-size: 100%;
  margin-block-start: var(--space-5);
  padding: var(--space-5);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-radius: var(--radius-lg);
  min-width: 0;
  opacity: calc(0.22 + 0.78 * clamp(0, var(--flow-node, 1) / 0.7, 1));
}

.hub__stat {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  min-width: 0;
}

.hub__stat-mark {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
}

.hub__stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hub__stat-figure {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hub__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  hyphens: none;
}

@container caseflow (min-width: 64rem) {
  
  .hub {
    display: grid;
    grid-template-columns:
      minmax(0, 1.15fr) minmax(56px, 0.5fr) minmax(0, 1.2fr) minmax(56px, 0.5fr) minmax(0, 1.15fr);
    
    grid-template-rows: auto auto;
    align-items: center;
    gap: var(--space-4);
  }

  .hub__label {
    align-self: end;
    justify-self: center;
    grid-row: 1;
  }

  .hub__label--in  { grid-column: 1; }
  .hub__label--sys { grid-column: 3; }
  .hub__label--out { grid-column: 5; }

.hub__stack {
    align-self: stretch;
    justify-content: space-around;
    gap: 0;
  }

  .hub__stack--in  { grid-area: 2 / 1; }
  .hub__stack--out { grid-area: 2 / 5; }
  .hub__core       { grid-area: 2 / 3; }

.hub__fan {
    align-self: stretch;
    inline-size: auto;
    block-size: auto;
    background-color: transparent;
    transform: none;
  }

  .hub__fan--in  { grid-area: 2 / 2; }
  .hub__fan--out { grid-area: 2 / 4; }

  .hub__fan::after {
    display: none;
  }

.hub__fan {
    margin-inline: calc(var(--space-4) * -1);
  }

  .hub__rays {
    display: block;
    inline-size: 100%;
    block-size: 100%;

--hub-reveal: calc(clamp(0, var(--flow-line, 1), 1) * 108%);
    mask-image: linear-gradient(to right,
      var(--mask-solid) 0,
      var(--mask-solid) var(--hub-reveal),
      var(--mask-clear) calc(var(--hub-reveal) + 8%));
    -webkit-mask-image: linear-gradient(to right,
      var(--mask-solid) 0,
      var(--mask-solid) var(--hub-reveal),
      var(--mask-clear) calc(var(--hub-reveal) + 8%));
  }

.hub__ray {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.55;
  }

.hub__pulses {
    filter: drop-shadow(0 0 3px var(--color-accent));
    opacity: clamp(0, calc((var(--flow-line, 1) - 0.88) / 0.12), 1);
  }

  .hub__pulse {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 8px 700px;
    animation: hub-pulse 3.1s linear infinite;
    animation-delay: calc(var(--i, 0) * -0.62s);
  }

@keyframes hub-pulse {
    from { stroke-dashoffset: 708px; }
    to   { stroke-dashoffset: 0; }
  }

.hub__stack--out .hub__item {
    position: relative;
  }

.hub__core {
    position: relative;
  }

  .hub__core::before {
    content: "";
    position: absolute;
    inset-inline-start: -4.5px;
    inset-block-start: 50%;
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background-color: var(--color-accent);
    box-shadow: 0 0 10px 3px var(--color-accent-subtle);
    transform: translateY(-50%);
    opacity: clamp(0, calc((var(--flow-line, 1) - 0.80) / 0.14), 1);
  }

.hub__stack--out .hub__item::before {
    content: "";
    position: absolute;
    inset-inline-start: -4.5px;
    inset-block-start: 50%;
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background-color: var(--color-accent);
    
    box-shadow: 0 0 10px 3px var(--color-accent-subtle);
    transform: translateY(-50%);
    
    opacity: clamp(0, calc((var(--flow-line, 1) - var(--i, 0) * 0.05 - 0.72) / 0.14), 1);
  }

  .hub__stats {
    grid-area: 3 / 1 / 4 / 6;
    margin-block-start: var(--space-6);
  }

  .hub__stat + .hub__stat {
    padding-inline-start: var(--space-7);
    border-inline-start: 1px solid var(--color-border);
  }
}

.flow--service {
  
  padding-block: 0;
  gap: var(--space-5);
  inline-size: 100%;

  --flow-gap: var(--space-4);
  
  --flow-cols: 4;
  --flow-return-drop: 5.5rem;
}

.flow--service .flow__node {
  opacity: calc(0.35 + 0.65 * var(--flow-node, 1));
}

.flow__return {
  position: relative;
  
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow__return-seg,
.flow__return-head {
  position: absolute;
  pointer-events: none;
  display: none;
}

.flow__return-seg {
  background-color: var(--color-accent);
}

.flow__return-seg--out {
  inset-inline-end: -1px;
  inset-block-start: 0;
  inline-size: 2px;
  block-size: 100%;
  transform: scaleY(clamp(0, calc(var(--flow-line, 1) / 0.28), 1));
  transform-origin: top center;
}

.flow__return-seg--run {
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  transform: scaleX(clamp(0, calc((var(--flow-line, 1) - 0.28) / 0.44), 1));
  transform-origin: right center;
}

.flow__return-seg--in {
  inset-inline-start: -1px;
  inset-block-start: 0;
  inline-size: 2px;
  block-size: 100%;
  transform: scaleY(clamp(0, calc((var(--flow-line, 1) - 0.72) / 0.28), 1));
  transform-origin: bottom center;
}

.flow__return-head {
  inset-inline-start: -5px;
  inset-block-start: 2px;
  inline-size: 9px;
  block-size: 9px;
  border-inline-start: 2px solid var(--color-accent);
  border-block-start: 2px solid var(--color-accent);
  transform: rotate(45deg);
  opacity: clamp(0, calc((var(--flow-line, 1) - 0.9) / 0.1), 1);
}

@media (min-width: 64rem) {
  
  .flow--service:not(.flow--motif):not(.flow--strip) {
    
    max-inline-size: 74rem;
  }

  .flow--service:not(.flow--motif):not(.flow--strip) .flow__track {
    grid-template-columns: repeat(var(--flow-cols), minmax(0, 1fr));
    
    align-items: stretch;
  }

.flow--service:not(.flow--motif):not(.flow--strip) .flow__node {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    
    min-block-size: 0;
    padding: var(--space-2) var(--space-3);
    text-align: start;

    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

.flow--service:not(.flow--motif):not(.flow--strip) .flow__node {
    container-type: inline-size;
  }

  .flow--service:not(.flow--motif):not(.flow--strip) .flow__name {
    
    font-size: min(var(--font-size-md), 8.8cqi);
  }

.flow--loop .flow__return-seg,
  .flow--loop .flow__return-head {
    display: block;
  }

  .flow--loop .flow__return {
    block-size: var(--flow-return-drop);
    margin-inline: calc((100% - (var(--flow-cols) - 1) * var(--flow-gap)) / (var(--flow-cols) * 2));
  }
}

@media (min-width: 64rem) {
  .flow--service:not(.flow--motif):not(.flow--strip) {
    --flow-gap: clamp(var(--space-5), 13.636vw - 115.6px, var(--space-7));
  }
}

.cases__grid .card {
  block-size: 100%;
}

.section--centred .case-teaser {
  text-align: start;
  min-block-size: 15rem;
}

.case-teaser__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-inline-size: 0;
  margin-block-end: var(--space-4);
}

.case-teaser__plate {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--glass-fill);
}

.case-teaser__icon {
  display: block;
  color: var(--color-accent);
}

.case-teaser .card__title {
  min-inline-size: 0;
}

.case-teaser__index {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.case-teaser__role {
  flex: 1 1 auto;
  margin-block-start: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
  min-inline-size: 0;
}

.case-teaser__impact {
  margin-block: auto 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  min-inline-size: 0;
}

.case-teaser__impact-figure {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  
  text-wrap: balance;
  hyphens: none;
}

.cases__close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.cases__close-line {
  
  max-width: 30rem;
  font-size: var(--font-size-md);
  color: var(--color-text);
  text-align: center;
  text-wrap: pretty;
}

.case-teaser__impact-label {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.artifact:has(.flow) .flow {
  
  padding-inline: var(--space-6);

padding-block-end: var(--space-6);
}

.flow--strip {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  gap: 0;

--flow-gap: var(--space-5);
}

.flow--strip .flow__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--flow-gap);
  block-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow--strip .flow__step {
  position: relative;
  min-inline-size: 0;
}

.flow--strip .flow__node {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  text-align: center;

  background-color: var(--glass-fill);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-radius: var(--radius-sm);
}

.flow--strip .flow__icon {
  flex: none;
  color: var(--color-accent);
}

.flow--strip .flow__name {
  min-inline-size: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  color: var(--color-text);
  
  hyphens: none;
}

.flow--strip .flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: calc(50% - 1px);
  inline-size: var(--flow-gap);
  block-size: 2px;
  background-color: var(--color-accent);
  transform: scaleX(var(--flow-line, 1));
  transform-origin: left center;
  pointer-events: none;
}

.flow--strip .flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(100% + var(--flow-gap) - 6px);
  inset-block-start: calc(50% - 4px);
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 2px solid var(--color-accent);
  border-block-start: 2px solid var(--color-accent);
  transform: rotate(45deg);
  pointer-events: none;
}

.service-list__shots:has(.flow) {
  display: block;
}

.hero--intake > .container {
  align-items: center;
  text-align: center;
}

.hero--intake .hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
}

.hero--intake .hero__copy {
  
  inline-size: 100%;
  container-type: inline-size;

max-inline-size: 58rem;
  margin-inline: auto;
  min-width: 0;
}

.hero--intake .hero__title {
  text-align: center;

max-width: none;
  margin-inline: auto;
  margin-block: 0;
  text-wrap: initial;
}

.hero--intake .hero__subline {
  text-align: center;
  color: var(--color-text-muted);
  margin-block-start: var(--space-5);
  margin-inline: auto;
  
  max-width: 56ch;
}

.intake {
  position: relative;
  margin: 0;
  inline-size: 100%;

aspect-ratio: 900 / 480;
  min-inline-size: 0;

max-inline-size: min(52rem, calc((100svh - 23rem) * 1.875));
  margin-inline: auto;

  --lane-weight: 0.10;

--intake-chip-w: 24%;
  --intake-card-w: 12rem;

animation:
    intake-breathe 7s var(--easing-standard) infinite,
    intake-twinkle 3.6s linear infinite;
}

@keyframes intake-breathe {
  0%, 100% { --throat-breath: 1; }
  50%      { --throat-breath: 1.34; }
}

@keyframes intake-twinkle {
  0%, 12%  { --core-twinkle: 1; }
  15%      { --core-twinkle: 0.62; }
  18%, 46% { --core-twinkle: 1; }
  49%      { --core-twinkle: 0.74; }
  51%      { --core-twinkle: 0.95; }
  54%      { --core-twinkle: 0.58; }
  58%      { --core-twinkle: 1; }
  100%     { --core-twinkle: 1; }
}

.intake__field {
  
  color: var(--color-accent);

  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.intake__lane {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--intake-draw, 1));
  
  opacity: calc(0.5 * var(--intake-draw, 1));
}

.intake__runner {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  
  stroke-dasharray: 0.035 0.965;
  opacity: calc(0.5 * var(--intake-draw, 1));
  animation: intake-run 4.2s linear infinite;
}

@keyframes intake-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.intake__runners {
  filter: drop-shadow(0 0 4px var(--color-accent));
}

.intake__runner:nth-child(1) { animation-delay: 0s; }
.intake__runner:nth-child(2) { animation-delay: -1.05s; }
.intake__runner:nth-child(3) { animation-delay: -2.1s; }
.intake__runner:nth-child(4) { animation-delay: -3.15s; }

.intake__bloom {
  fill: url(#intake-bloom);

opacity: calc(0.92 * var(--intake-throat, 1) * var(--throat-breath, 1)
                * (0.72 + 0.28 * var(--core-twinkle, 1)));
}

.intake__core {
  fill: var(--color-accent);
  
  opacity: calc(var(--intake-throat, 1) * var(--core-twinkle, 1));
}

.intake__channel {
  position: absolute;
  inset-block-start: 50%;

inset-inline-start: 60%;
  inset-inline-end: var(--intake-card-w);
  
  block-size: 1.25px;
  translate: 0 -50%;

background-image: linear-gradient(to right,
    var(--color-accent) 0%,
    var(--color-accent) 62%,
    var(--color-accent-subtle) 100%);
  opacity: var(--intake-out, 1);
  transform: scaleX(var(--intake-out, 1));
  transform-origin: left center;
}

.intake__chip {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--chip-y);
  translate: 0 -50%;
  margin: 0;

  inline-size: var(--intake-chip-w);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);

  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;

  opacity: var(--intake-card, 1);
  transform: translate3d(calc((1 - var(--intake-card, 1)) * -12px), 0, 0);
}

.intake__chip-icon { flex: none; color: var(--color-accent); }

.intake__chip-name {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intake__card {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  translate: 0 -50%;
  margin: 0;

inline-size: var(--intake-card-w);

  display: flex;
  align-items: center;
  gap: var(--space-2);
  
  padding: var(--space-3) var(--space-4);

  background-color: var(--glass-fill);
  border: 1px solid var(--color-accent-subtle);
  border-radius: var(--radius-md);
  white-space: nowrap;

box-shadow:
    0 0 0 1px var(--color-accent-subtle),
    0 18px 60px -24px var(--color-accent);

  opacity: var(--intake-card, 1);
  
  transform: translate3d(calc((1 - var(--intake-card, 1)) * -16px), 0, 0);
}

.intake__card-icon { flex: none; color: var(--color-accent); }

.intake__card-name {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  
  font-weight: 700;
  
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 47.99rem) {
  .intake {
    position: static;
    aspect-ratio: auto;
    display: grid;
    gap: var(--space-3);
    
    animation: none;
  }

  .intake__field,
  .intake__channel {
    display: none;
  }

  .intake__chip,
  .intake__card {
    position: static;
    inset: auto;
    
    translate: none;
    inline-size: 100%;
  }

  .intake__card {
    margin-block-start: var(--space-4);
  }
}

@media (max-width: 74.99rem) {
  .hero--intake .hero__title { 
    max-width: none; }   
  .hero--intake .hero__copy { max-inline-size: none; }
}

.mast__node::before {
  box-shadow: var(--shadow-node-soft);
}

.mast--key .mast__node::before {
  box-shadow: var(--shadow-node-live);
}

.hero--cycle > .container {
  position: relative;
}

.hero--cycle .hero__intro {
  text-align: center;
  
  max-inline-size: min(100%, 44rem);
  margin-inline: auto;
}

.hero--cycle .hero__title {
  text-align: center;
  margin-block: 0;
  
}

.flow--cycle {
  margin-block-start: var(--space-8);
}

.flow--service:not(.flow--motif) .flow__icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.flow--service:not(.flow--motif) .flow__no {
  flex: none;
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.flow--service:not(.flow--motif) .flow__name {
  min-block-size: 0;
  min-inline-size: 0;
  text-wrap: pretty;
  hyphens: none;
}

.flow__no {
  display: block;
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.orbit {
  position: relative;
  margin: 0;
  inline-size: 100%;
  display: grid;
  place-items: center;

min-block-size: min(74svh, 44rem);
}

.orbit__field {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  
  color: var(--color-accent);
}

.orbit__copy {
  position: relative;
  z-index: 1;
  text-align: center;

max-inline-size: min(44rem, calc(100% - 30rem));
  min-width: 0;
}

.hero--orbit .hero__title {
  text-align: center;
  margin-block: 0;
  
}

.hero--orbit .hero__subline {
  text-align: center;
  color: var(--color-text-muted);
  margin-block-start: var(--space-5);
  margin-inline: auto;
  max-width: 44ch;
}

.orbit__link {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--orbit-draw, 1));
  
  opacity: calc(0.16 * var(--orbit-draw, 1));
}

.orbit__pulse {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 0.045 0.955;
  opacity: 0;
  animation: orbit-run 16s linear infinite;
}

@keyframes orbit-run {
  0%        { stroke-dashoffset: 1;    opacity: 0; }
  1.5%      {                          opacity: calc(0.55 * var(--orbit-node, 1)); }
  23%       {                          opacity: calc(0.55 * var(--orbit-node, 1)); }
  25%, 100% { stroke-dashoffset: 0;    opacity: 0; }
}

.orbit__pulse:nth-child(1) { animation-delay: 0s; }
.orbit__pulse:nth-child(2) { animation-delay: -12s; }
.orbit__pulse:nth-child(3) { animation-delay: -8s; }
.orbit__pulse:nth-child(4) { animation-delay: -4s; }

.orbit__node {
  animation: orbit-lit 16s var(--easing-standard) infinite;
}

@keyframes orbit-lit {
  0%             { --node-lift: 2.3; }
  9%, 88%        { --node-lift: 1; }
  100%           { --node-lift: 2.3; }
}

.orbit__node:nth-child(1) { animation-delay: 0s; }
.orbit__node:nth-child(2) { animation-delay: -12s; }
.orbit__node:nth-child(3) { animation-delay: -8s; }
.orbit__node:nth-child(4) { animation-delay: -4s; }

.orbit__dot {
  fill: var(--color-accent);
  
  opacity: calc(0.34 * var(--node-lift, 1) * var(--orbit-node, 1));
}

.orbit__halo {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: calc(0.10 * var(--node-lift, 1) * var(--orbit-node, 1));
}

.orbit__label {
  position: absolute;
  inset-inline-start: var(--ox);
  inset-block-start: var(--oy);
  translate: -50% 0;
  margin: 1.15rem 0 0;

  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: var(--orbit-label, 1);
  
  transform: translate3d(0, calc((1 - var(--orbit-label, 1)) * 8px), 0);
}

@media (max-width: 74.99rem) {
  
  .orbit {
    min-block-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
  }

  .orbit__field { display: none; }

  .orbit__copy {
    flex: 0 0 100%;
    order: -1;
    max-inline-size: 44rem;
    margin-block-end: var(--space-7);
  }

.orbit {
    flex-direction: column;
    align-items: center;
    row-gap: var(--space-2);
  }

  .orbit__label {
    position: static;
    inset: auto;
    translate: none;
    margin: 0;
    white-space: nowrap;
  }
}

.hero--board > .container {
  align-items: center;
  text-align: center;
}

.hero--board {
  
  justify-content: center;
}

.hero--board .hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  gap: var(--space-3);
  inline-size: 100%;
}

.hero--board .hero__copy {
  
  inline-size: 100%;
  container-type: inline-size;
  max-inline-size: 44rem;
  margin-inline: auto;
  min-width: 0;
}

.hero--board .hero__title {
  text-align: center;
  
  margin-block: 0;
}

.hero--board .hero__title-line,
.hero--intake .hero__title-line { display: block; }

.hero--board .hero__subline {
  text-align: center;
  color: var(--color-text-muted);
  margin-block-start: var(--space-5);
  margin-inline: auto;
  max-width: 56ch;
}

.board {
  position: relative;
  margin: 0;
  inline-size: 100%;

max-inline-size: 62rem;
  margin-inline: auto;
  
  aspect-ratio: 1000 / 460;
  min-inline-size: 0;

--board-panel-w: 54%;
  
  --board-row-w: 30%;
}

.board__field {
  
  color: var(--color-accent);

  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.board__wire {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  
  stroke-dasharray: 1;
  
  stroke-dashoffset: calc(1 - var(--board-feed, 1));
  opacity: var(--board-feed, 1);
}

.board__trunk {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--board-feed, 1));
  opacity: var(--board-feed, 1);
}

.board__arc {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--board-arc, 1));
  opacity: var(--board-arc, 1);
}

.board__arrow {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: var(--board-arc, 1);
}

.board__cycle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.board__cycle--glow {
  stroke-width: 7;
  --current-lit: 0.26;
}

@keyframes board-current-wire {
  0%           { stroke-dashoffset: 1; opacity: 0; }
  0.8%         {                       opacity: calc(var(--current-lit, 0.95) * var(--board-cycle, 1)); }
  9.0%         {                       opacity: calc(var(--current-lit, 0.95) * var(--board-cycle, 1)); }
  9.828%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes board-current-trunk {
  0%           { stroke-dashoffset: 1; opacity: 0; }
  0.8%         {                       opacity: calc(var(--current-lit, 0.95) * var(--board-cycle, 1)); }
  8.2%         {                       opacity: calc(var(--current-lit, 0.95) * var(--board-cycle, 1)); }
  9.042%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes board-current-out {
  0%            { stroke-dashoffset: 1; opacity: 0; }
  1.2%          {                       opacity: calc(var(--current-lit, 0.95) * var(--board-cycle, 1)); }
  33.0%         {                       opacity: calc(var(--current-lit, 0.95) * var(--board-cycle, 1)); }
  34.183%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes board-current-back {
  0%            { stroke-dashoffset: 1; opacity: 0; }
  1.2%          {                       opacity: calc(var(--current-lit, 0.95) * var(--board-cycle, 1)); }
  35.9%         {                       opacity: calc(var(--current-lit, 0.95) * var(--board-cycle, 1)); }
  37.119%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.board__cycle--wire  { stroke-dasharray: 0.2250 0.7750; animation-name: board-current-wire; animation-delay:  0s; }
.board__cycle--trunk { stroke-dasharray: 0.2446 0.7554; animation-name: board-current-trunk; animation-delay: -5.410s; }
.board__cycle--bus   { stroke-dasharray: 0.2250 0.7750; animation-name: board-current-wire; animation-delay: -4.868s; }
.board__cycle--out   { stroke-dasharray: 0.0647 0.9353; animation-name: board-current-out;  animation-delay: -4.278s; }
.board__cycle--back  { stroke-dasharray: 0.0596 0.9404; animation-name: board-current-back; animation-delay: -2.227s; }

.board__row {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--ry);
  translate: 0 -50%;
  margin: 0;

  inline-size: var(--board-row-w);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);

  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;

  opacity: var(--board-row, 1);
  transform: translate3d(calc((1 - var(--board-row, 1)) * -12px), 0, 0);
}

.board__row-icon { flex: none; color: var(--color-accent); }

.board__row-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board__bus {
  position: absolute;
  
  inset-inline-start: 38%;
  inset-inline-end: var(--board-panel-w);

inset-block-start: 60%;
  
  block-size: 1px;
  translate: 0 -50%;

  background-color: var(--color-border-strong);
  opacity: var(--board-bus, 1);
  transform: scaleX(var(--board-bus, 1));
  transform-origin: left center;
}

.board__panel {
  position: absolute;
  inset-inline-end: 0;
  
  inset-block-start: 32.35%;
  
  inset-block-end: 12.35%;
  
  inline-size: var(--board-panel-w);

  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);

  background-color: var(--glass-fill);
  border: 1px solid var(--color-border);
  
  border-block-start-color: var(--glass-edge-lit);
  border-radius: var(--radius-lg);

  box-shadow:
    0 0 0 1px var(--color-accent-subtle),
    0 22px 70px -30px var(--color-accent);

  opacity: var(--board-panel, 1);
  transform: translate3d(calc((1 - var(--board-panel, 1)) * -16px), 0, 0);
}

.board__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.board__panel-icon { flex: none; color: var(--color-accent); }

.board__panel-name {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 600;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board__bars {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  
  gap: var(--space-4);
  
  min-block-size: 0;
  min-inline-size: 0;

--board-bar-scale: 1;
}

.board__bar {
  flex: 1 1 0;
  min-inline-size: 0;
  
  block-size: calc(var(--bh) * var(--board-bar-scale));
  background-color: var(--color-accent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  opacity: var(--bw);

transform-origin: bottom center;
  scale: 1 var(--board-bar, 1);
}

.board__baseline {
  flex: none;
  block-size: 1px;
  background-color: var(--color-border-strong);
}

.board__loop {
  position: absolute;
  inset-inline-start: var(--px);
  inset-block-start: var(--py);
  translate: -50% -50%;
  margin: 0;

  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);

background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-subtle);
  border-radius: var(--radius-pill);
  white-space: nowrap;

  opacity: var(--board-pill, 1);
  transform: translate3d(0, calc((1 - var(--board-pill, 1)) * -8px), 0);
}

.board__loop-icon { flex: none; color: var(--color-accent); }

.board__loop-text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  min-inline-size: 0;
}

@media (prefers-reduced-motion: no-preference) {
  
  .is-entering .board__row   { --board-row: 0; }
  .is-entering .board__panel { --board-panel: 0; }

.is-entering .board__wire  { --board-feed: 0; }
  .is-entering .board__trunk { --board-feed: 0; }
  .is-entering .board__bus   { --board-bus: 0; }
  .is-entering .board__bar   { --board-bar: 0; }
  .is-entering .board__arc   { --board-arc: 0; }
  .is-entering .board__arrow { --board-arc: 0; }
  .is-entering .board__cycle { --board-cycle: 0; }
  .is-entering .board__loop  { --board-pill: 0; }
}

@media (max-width: 47.99rem) {
  .board {
    position: static;
    aspect-ratio: auto;
    max-inline-size: none;
    display: grid;
    
    --board-gap: var(--space-5);
    gap: var(--board-gap);
  }

  .board__field,
  .board__bus {
    display: none;
  }

  .board__row,
  .board__panel,
  .board__loop {
    position: static;
    inset: auto;
    
    translate: none;
    inline-size: 100%;
  }

  .board__panel {
    
    min-block-size: 11rem;
  }

  .board__loop {
    
    inline-size: auto;
    
    justify-self: center;
  }

.board {
    position: relative;
  }

.board__row,
  .board__panel,
  .board__loop {
    position: relative;
    inset: auto;
  }

.board__row::after,
  .board__panel::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(50% - 1px);
    inset-block-start: 100%;
    inline-size: 2px;
    block-size: var(--board-gap);
    background-color: var(--color-accent);
    pointer-events: none;
  }

  .board__row::after   { opacity: calc(0.55 * var(--board-row, 1)); }
  .board__panel::after { opacity: calc(0.55 * var(--board-panel, 1)); }

.board__panel::before,
  .board__loop::before {
    content: "";
    position: absolute;
    
    inset-inline-start: calc(50% - 4.5px);
    inset-block-start: -7px;
    inline-size: 9px;
    block-size: 9px;
    border-inline-end: 2px solid var(--color-accent);
    border-block-end: 2px solid var(--color-accent);
    transform: rotate(45deg);
    pointer-events: none;
  }

  .board__panel::before { opacity: var(--board-panel, 1); }
  .board__loop::before  { opacity: var(--board-pill, 1); }
}

@media (max-width: 74.99rem) {
  .hero--board .hero__title { max-width: 24ch; margin-inline: auto; }
  .hero--board .hero__copy { max-inline-size: none; }
}

.frame {
  margin: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-elevated);
  
  box-shadow: var(--shadow-lg);
}

.frame__media {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--glass-fill-strong);
  border-block-end: 1px solid var(--glass-edge);
}

.frame__dots {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

.frame__dots i {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  
  background-color: var(--color-border-strong);
}

.card-tilt {
  inline-size: 100%;
  max-inline-size: 30rem;
  
  margin-block: 0;
  margin-inline: auto;
  
  perspective: 90rem;
}

.card-tilt__frame {
  position: relative;
  display: block;
  
  border-radius: 4.1% / 7.05%;
  overflow: hidden;
  
  box-shadow: var(--shadow-lg);
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    scale(var(--tilt-pop, 1));
  transition: transform var(--duration-base) var(--easing-premium);
}

.card-tilt__media {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.card-tilt__shine {
  position: absolute;
  
  inset: -20%;
  background-image: var(--gradient-card-shine);
  opacity: var(--tilt-shine, 0);
  transform: translate(var(--sheen-x, 0), var(--sheen-y, 0));
  transition:
    opacity var(--duration-base) var(--easing-standard),
    transform var(--duration-base) var(--easing-premium);
  pointer-events: none;
}

.card-tilt:focus-within .card-tilt__frame {
  transform: scale(1.03);
}

.frame--tablet {
  
  inline-size: 100%;
  max-inline-size: 34rem;
  
}

.frame--tablet {
  border-color: var(--color-mac-chrome-edge);
  background-color: var(--color-mac-chrome);
}

.frame--tablet .frame__bar {
  
  background-color: var(--color-mac-chrome);
  background-image: var(--gradient-mac-chrome);
  border-block-end-color: var(--color-mac-chrome-edge);
}

.frame--tablet .frame__url {
  
  color: var(--color-text-muted);
}

.frame--tablet .frame__dots i {
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
}

.frame--tablet .frame__dots i:nth-child(1) { background-color: var(--color-mac-close); }
.frame--tablet .frame__dots i:nth-child(2) { background-color: var(--color-mac-min); }
.frame--tablet .frame__dots i:nth-child(3) { background-color: var(--color-mac-zoom); }

.frame--window .frame__dots i {
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
}

.frame--window .frame__dots i:nth-child(1) { background-color: var(--color-mac-close); }
.frame--window .frame__dots i:nth-child(2) { background-color: var(--color-mac-min); }
.frame--window .frame__dots i:nth-child(3) { background-color: var(--color-mac-zoom); }

.frame__url {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text-muted);
  
  hyphens: none;
}

@media (max-width: 47.99rem) {
  .frame__bar {
    gap: var(--space-3);
    padding-inline: var(--space-3);
  }
}

.frame--phone {
  position: relative;
  inline-size: 100%;
  max-inline-size: 15rem;
  
  border-radius: 8.5%;
  padding: 0.4375rem;
  border: 0;
  overflow: visible;
  background-color: var(--color-mac-bezel);
  box-shadow:
    inset 0 0 0 1px var(--color-mac-bezel-lip),
    var(--shadow-lg);
}

.frame--phone .frame__media {
  border-radius: 6.5%;
}

.frame__notch {
  position: absolute;
  inset-block-start: 5.5%;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 1;
  inline-size: 26%;
  block-size: 2.6%;
  border-radius: var(--radius-pill);
  background-color: var(--color-mac-bezel);
}

.frame--phone::before,
.frame--phone::after {
  content: "";
  position: absolute;
  inline-size: 1.5px;
  border-radius: 1px;
  background-color: var(--color-mac-bezel-lip);
  pointer-events: none;
}

.frame--phone::before {
  inset-inline-start: -1.5px;
  inset-block-start: 17%;
  block-size: 26%;
  
  background-image: linear-gradient(
    180deg,
    var(--color-mac-bezel-lip) 0 42%,
    transparent 42% 52%,
    var(--color-mac-bezel-lip) 52% 100%
  );
}

.frame--phone::after {
  inset-inline-end: -1.5px;
  inset-block-start: 22%;
  block-size: 16%;
}

.case-study__visual--phone {
  display: flex;
  justify-content: center;
}

.case-study__visual--devices {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-6);
  overflow: visible;
  border-radius: 0;
}

.case-study__visual--devices > * {
  flex: 0 1 auto;
  min-width: 0;
}

.about > .container + .container {
  margin-block-start: var(--space-10);
}

.section.about > .container > * + * {
  margin-block-start: var(--space-9);
}

.approach__head {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .approach__head {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    
    gap: 0 var(--space-8);
    align-items: start;
  }

  .approach__title { grid-column: 1; grid-row: 1; }
  .approach__statement,
  .approach__line { grid-column: 2; }
}

.approach__statement {
  margin: 0;
  max-width: 34ch;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
  text-wrap: pretty;
}

.approach__line {
  margin: var(--space-5) 0 0;
  max-width: 52ch;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  
  --track-node: 9px;
  --track-row: 9px;
}

.track::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--track-row) / 2);
  inset-inline: 0;
  block-size: 1px;
  background-color: var(--color-border-strong);
}

.track__step {
  position: relative;
  
  padding-block-start: calc(var(--track-row) + var(--space-6));
  min-width: 0;
}

.track__node {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--track-node);
  block-size: var(--track-node);
  border-radius: 50%;
  background-color: var(--color-accent);
  
  box-shadow: 0 0 0 4px var(--color-bg);
}

.track__index {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-accent);
}

.track__name {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-md);
  color: var(--color-text);
  hyphens: none;
}

.track__note {
  margin: 0;
  max-width: 26ch;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

.about__name {
  margin: 0;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
  hyphens: none;
}

.hero--descent .hero__title {
  max-width: 24ch;
  margin-inline: auto;
}

.hero--descent .hero__subline {
  color: var(--color-text-muted);
  margin-inline: auto;
  max-width: 62ch;
}

.descent {
  position: relative;
  margin: var(--space-8) 0 0;
  inline-size: 100%;
  
  aspect-ratio: 1400 / 380;
  min-inline-size: 0;
}

.descent__field {
  
  mask-image: linear-gradient(to right, transparent 0, #000 11%);

  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  
  color: var(--color-accent);
}

.descent__body {
  stroke: none;
  fill: url(#descent-fill);
  opacity: var(--descent-fill, 1);
}

.descent__divider {
  stroke: var(--color-text);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: calc(0.11 * var(--descent-trace, 1));
}

.descent__trace {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--descent-trace, 1));
  
  opacity: calc(0.14 * var(--descent-trace, 1));
}

.descent__spine {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--descent-trace, 1));
  opacity: calc(0.1 * var(--descent-trace, 1));
}

.descent__split {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--descent-mark, 1));
  opacity: calc(0.42 * var(--descent-mark, 1));
}

.descent__tick {
  stroke: var(--color-border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: calc(0.7 * var(--descent-mark, 1));
}

.descent {
  --descent-aniso: 1;
}

.descent__point {
  fill: var(--color-accent);
  opacity: var(--descent-end, 1);
  rx: calc(5px * var(--descent-aniso));
  ry: 5px;
}

.descent__halo {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  rx: calc(14px * var(--descent-aniso));
  ry: 14px;
  opacity: calc(0.34 * var(--descent-end, 1));
}

.descent__runner {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.03 0.97;
  opacity: 0;
  animation: descent-run 7s cubic-bezier(0.5, 0, 0.6, 1) infinite;
}

@keyframes descent-run {
  0%        { stroke-dashoffset: 1; opacity: 0; }
  4%        {                       opacity: calc(0.85 * var(--descent-end, 1)); }
  56%       {                       opacity: calc(0.85 * var(--descent-end, 1)); }
  60%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.descent__stage,
.descent__test,
.descent__end {
  position: absolute;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: var(--descent-mark, 1);
  transform: translate3d(0, calc((1 - var(--descent-mark, 1)) * 8px), 0);
}

.descent__stage {
  
  inset-block-start: 84.7%;
  inset-inline-start: var(--sx);
  translate: -50% 0;
}

.descent__test {
  
  inset-block-start: 13%;
  inset-inline-start: 46%;
  translate: -50% 0;
  color: var(--color-accent);
}

.descent__end {
  inset-block-start: 42.1%;
  inset-inline-start: 94%;
  translate: -50% -50%;
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 61.99rem) {
  
  .descent {
    aspect-ratio: 1400 / 520;
    --descent-aniso: calc(520 / 380);
  }
  .descent__test { display: none; }
  .descent__split { display: none; }
  .descent__stage { font-size: var(--font-size-xs); }
}

.hero--strata > .container {
  align-items: stretch;
  text-align: start;
}

.hero--strata .hero__grid {
  display: grid;
  
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  gap: var(--space-8);
  align-items: center;
  inline-size: 100%;
}

.hero--strata .hero__copy {
  
  container-type: inline-size;
  max-inline-size: 36rem;
  min-width: 0;
}

.hero--strata .hero__title {
  text-align: start;
  max-width: 20ch;
  
  margin-block: 0;
}

.hero--strata .hero__subline {
  text-align: start;
  color: var(--color-text-muted);
  margin-block-start: var(--space-5);
  max-width: 42ch;
}

.strata {
  position: relative;
  margin: 0;
  margin-inline: auto;
  inline-size: min(100%, 30rem, 54svh);
  aspect-ratio: 440 / 620;
  min-inline-size: 0;

--strata-top: 13.5484%;
}

.strata__shaft {
  position: absolute;
  
  inset-inline-start: 80%;
  inline-size: 9.0909%;
  inset-block-start: var(--strata-top);
  inset-block-end: 0;

background-image: linear-gradient(to right,
    transparent 0%,
    var(--color-accent) 50%,
    transparent 100%);
  
  mask-image: linear-gradient(to top, transparent 0%, rgb(0 0 0 / 0.22) 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgb(0 0 0 / 0.22) 62%, transparent 100%);

  opacity: var(--strata-shaft, 1);
}

.strata__field {
  
  color: var(--color-accent);

  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.strata__beam {
  fill: none;
  
  stroke: url(#strata-beam-glow);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--strata-beam, 1));
  opacity: calc(0.72 * var(--strata-beam, 1));
}

.strata__rule {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--strata-rule, 1));
  opacity: var(--strata-rule, 1);
}

.strata__band {
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--sy);
  translate: 0 -50%;
  margin: 0;

  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);

padding-inline-end: 22%;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;

  opacity: var(--strata-band, 1);
  
  transform: translate3d(0, calc((1 - var(--strata-band, 1)) * 14px), 0);
}

.strata__band--base   { background-color: var(--color-bg-subtle); }
.strata__band--middle { background-color: var(--glass-fill); }

.strata__band--lit {
  background-color: var(--glass-fill-strong);
  
  border-block-start-color: var(--glass-edge-lit);
  border-radius: var(--radius-md);
  padding-block: var(--space-3);

  box-shadow:
    0 0 0 1px var(--color-accent-subtle),
    0 18px 60px -28px var(--color-accent);
}

.strata__band-icon { flex: none; color: var(--color-accent); }

.strata__band-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata__band--lit .strata__band-name {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.strata__mark {
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--strata-top);
  translate: 0 -100%;
  margin: 0;

  display: flex;
  align-items: center;
  gap: var(--space-2);
  
  padding-inline: calc(var(--space-3) + 1px);
  padding-block-end: var(--space-2);
  white-space: nowrap;

  opacity: var(--strata-mark, 1);
  transform: translate3d(0, calc((1 - var(--strata-mark, 1)) * 8px), 0);
}

.strata__mark-icon { flex: none; color: var(--color-accent); }

.strata__mark-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-inline-size: 0;
}

@media (prefers-reduced-motion: no-preference) {
  
  .is-entering .strata__band { --strata-band: 0; }
  .is-entering .strata__mark { --strata-mark: 0; }

.is-entering .strata__shaft { --strata-shaft: 0; }
  .is-entering .strata__beam  { --strata-beam: 0; }
  .is-entering .strata__rule  { --strata-rule: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .strata.is-arming .strata__band { --strata-band: 0.30; }
  .strata.is-arming .strata__mark { --strata-mark: 0.30; }
  .strata.is-arming .strata__shaft { --strata-shaft: 0; }
  .strata.is-arming .strata__beam  { --strata-beam: 0; }
  .strata.is-arming .strata__rule  { --strata-rule: 0; }
}

@media (max-width: 74.99rem) {
  .hero--strata .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }
  .hero--strata .hero__title { max-width: 24ch; }   
  .hero--strata .hero__copy { max-inline-size: none; }

.strata { inline-size: min(100%, 30rem, max(18rem, 32svh)); }

.strata__band--lit .strata__band-name { font-size: var(--font-size-base); }
}

.hero--showcase .hero__title {
  
  max-width: 26ch;
}

.hero--showcase .hero__subline {
  color: var(--color-text-muted);
  max-width: 58ch;
}

.showcase {
  
  position: relative;
  margin: var(--space-6) auto 0;
  padding: 0;
  list-style: none;

inline-size: 100%;
  min-inline-size: 0;
}

@media (min-width: 48rem) {
  
  .showcase {
    --showcase-lift: 26.375rem;
    inline-size: min(100%, 52rem, calc((100svh - var(--showcase-lift) - 2.375rem) * 1.6));
  }
}

.showcase__pane {
  min-inline-size: 0;
}

.showcase__pane--lead {
  inline-size: 100%;
}

.showcase__pane--mid,
.showcase__pane--minor {
  position: absolute;
  z-index: 1;
}

.showcase__pane--mid {
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 44%;
}

.showcase__pane--minor {
  inset-inline-end: 0;
  inset-block-end: 9%;
  inline-size: 28%;
}

.showcase__pane > .frame {
  margin: 0;
}

.showcase__pane > .frame > .image-slot {
  border: 0;
  border-radius: 0;
}

.report {
  position: relative;
  margin: 0;
  
  padding-block-start: var(--space-6);
  padding-inline-end: 0;
}

.report__stage {
  position: relative;
}

.report__main {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  
  background-image: var(--gradient-report-pane);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-inline-size: 0;
}

.report__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--glass-edge);
}

.report__lights {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

.report__lights i {
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
  border-radius: 50%;
}

.report__lights i:nth-child(1) { background-color: var(--color-mac-close); }
.report__lights i:nth-child(2) { background-color: var(--color-mac-min); }
.report__lights i:nth-child(3) { background-color: var(--color-mac-zoom); }

.report__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  hyphens: none;
}

.report__date {
  margin-inline-start: auto;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  hyphens: none;
}

.report__inner {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.report__metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.report__metric {
  min-inline-size: 0;
}

.report__metric + .report__metric {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--glass-edge);
}

.report__metric-label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  hyphens: none;
}

.report__metric-value {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
  hyphens: none;
}

.report__metric-delta {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  hyphens: none;
}

.report__metric-delta--up {
  color: var(--color-accent);
}

.report__metric-since {
  color: var(--color-text-muted);
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .report__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) 0;
  }

  .report__metric {
    padding-inline: var(--space-4);
    border-inline-start: 1px solid var(--glass-edge);
  }

  .report__metric + .report__metric {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }

.report__metric:nth-child(3n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

.report__lower {
  display: grid;
  gap: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--glass-edge);
}

.report__panel {
  min-inline-size: 0;
}

.report__panel-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  hyphens: none;
}

.report__panel-count {
  margin-inline-start: var(--space-2);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.report__notes,
.report__sources {
  list-style: none;
  margin: 0;
  padding: 0;
}

.report__note,
.report__source {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  min-inline-size: 0;
}

.report__note + .report__note,
.report__source + .report__source {
  border-block-start: 1px solid var(--glass-edge);
}

.report__note-kind {
  flex: none;
  inline-size: 6.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  hyphens: none;
}

.report__note-icon {
  flex: none;
  color: var(--color-accent);
}

.report__note-text {
  min-inline-size: 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
  hyphens: none;
}

.report__source {
  align-items: center;
}

.report__source-mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  
  background-color: var(--glass-fill);
}

.report__source-name {
  min-inline-size: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text);
  hyphens: none;
}

.report__source-state {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.report__source-state::before {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  animation: report-pulse 3.2s var(--easing-standard) infinite;
  animation-delay: calc(var(--i, 0) * -0.4s);
}

@keyframes report-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.28; }
}

.report__source:nth-child(1) { --i: 0; }
.report__source:nth-child(2) { --i: 1; }
.report__source:nth-child(3) { --i: 2; }
.report__source:nth-child(4) { --i: 3; }
.report__source:nth-child(5) { --i: 4; }
.report__source:nth-child(6) { --i: 5; }
.report__source:nth-child(7) { --i: 6; }
.report__source:nth-child(8) { --i: 7; }

.report__insight {
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--glass-edge-lit);
  border-radius: var(--radius-md);
  
  background-image: var(--gradient-report-card);
  box-shadow: var(--shadow-lg);
}

.report__insight .report__lights {
  margin-block-end: var(--space-4);
}

.report__insight-eyebrow {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  hyphens: none;
}

.report__insight-label {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  hyphens: none;
}

.report__insight-value {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
}

.report__insight-delta {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  hyphens: none;
}

.report__insight-foot {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  hyphens: none;
}

.report__spark {
  display: block;
  inline-size: 100%;
  block-size: 4.5rem;
  margin-block-start: var(--space-4);
  overflow: visible;
}

.report__spark-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  
  stroke-dashoffset: calc(1 - var(--spark-draw, 1));
}

.report__spark-dot {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: calc(max(0, var(--spark-draw, 1) - 0.75) * 4);
}

.report__spark-days {
  margin: var(--space-2) 0 0;
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.report.is-live .report__spark {
  --spark-draw: 0;
}

.report__caption {
  
  margin-block-start: calc(var(--report-drop, 0px) + var(--space-4));
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: end;
  hyphens: none;
}

@media (min-width: 64rem) {

.report {
    padding-block-start: 0;
    padding-inline: 0;
  }

.report__metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .report__metric {
    padding-inline: var(--space-4);
    border-inline-start: 1px solid var(--glass-edge);
  }

  .report__metric + .report__metric {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }

  .report__metric:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .report__lower {
    
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-7);
  }

.report {
    --report-card-w: 46rem;
    
    --report-card-h: 8.5rem;
    --report-drop: 2.75rem;
  }

  .report__insight {
    position: absolute;
    
    inset-block-end: calc(var(--report-drop) * -1);
    inset-inline-start: var(--space-5);
    inline-size: var(--report-card-w);
    margin-block-start: 0;
    z-index: 1;
  }

  .report__insight-body {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .report__insight-figure {
    flex: none;
    inline-size: 7.5rem;
  }

  .report__insight-foot {
    flex: none;
    inline-size: 8rem;
    margin-block-start: 0;
    line-height: 1.4;
  }

  .report__insight-chart {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .report__insight-chart .report__spark {
    margin-block-start: 0;
    block-size: 2.75rem;
  }

.report__insight {
    
    min-block-size: var(--report-card-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
  }

.report__insight .report__lights {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-4);
    margin-block-end: 0;
  }

  .report__insight-eyebrow {
    margin-inline-start: 3.25rem;
  }

  .report__insight-label { margin-block-start: 0; }
  .report__insight-value { font-size: var(--font-size-2xl); margin-block-start: 0; }
  .report__insight-delta { margin-block-start: 0; }
  .report__insight-foot  { margin-block-start: 0; }

.report__lower > .report__panel:first-child {
    padding-block-end: calc(var(--report-card-h) - var(--report-drop) + var(--space-6));
  }
}

.report__source-logo {
  display: block;
  inline-size: 0.875rem;
  block-size: auto;
}

@media (max-width: 47.99rem) {
  .report__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) 0;
  }

  .report__metric {
    padding-inline: var(--space-4);
    border-inline-start: 1px solid var(--glass-edge);
  }

  .report__metric + .report__metric {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }

  .report__metric:nth-child(2n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

.report__metric-since {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

.report__sources {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .report__source {
    padding-block: 0;
    gap: 0;
  }

  .report__source + .report__source {
    border-block-start: 0;
  }

  .report__source-name,
  .report__source-state {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .report__source-mark {
    inline-size: 100%;
    max-inline-size: 2rem;
    block-size: auto;
    aspect-ratio: 1;
    animation: report-pulse 3.2s var(--easing-standard) infinite;
    animation-delay: calc(var(--i, 0) * -0.4s);
  }

.report__source-state::before {
    animation: none;
  }

.report__insight-value,
  .report__insight-delta {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.filamento__disciplines,
.filamento__work {
  text-align: center;
}

.filamento__work > * + * {
  margin-block-start: var(--space-4);
}

.filamento__close {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.filamento__grid {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .filamento__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.filamento__item > .image-slot,
.filamento__item > .frame {
  margin: 0;
}

.section--screen.hero .hero__title {
  font-size: var(--font-size-3xl);
}

.section--screen.hero .hero__subline {
  font-size: var(--font-size-lead);
}

@media (max-width: 47.99rem) {
  
  .section--screen.hero .hero__title {
    font-size: var(--font-size-4xl);
  }
}

.service-problem > .container > .section__intro {
  margin-inline: auto;
  text-align: center;
}

.service-problem > .container > .problem-beats {
  
  max-inline-size: 44rem;
  margin-inline: auto;
  text-align: center;
}

.problem-beats > * {
  hyphens: none;
}

.problem-beats > * + * {
  margin-block-start: var(--space-6);
}

.problem-beats__setup {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
  
  text-wrap: pretty;
}

.problem-beats__middle {
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.problem-beats__lead {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-wrap: balance;
  
  margin-block-end: calc(var(--space-6) * -0.5);
}

.problem-beats__turn {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-accent);
  
  text-wrap: pretty;
}

.problem-beats__lead,
.problem-beats__turn {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-5);
  margin-block-start: var(--space-7);
}

.problem-beats__lead + .problem-beats__turn {
  border-block-start: 0;
  padding-block-start: 0;
  margin-block-start: var(--space-4);
}

.problem-beats__turn .text-link {
  color: inherit;
  text-decoration-color: currentColor;
}

.converge__report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
}

.converge__report-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  hyphens: none;
}

.converge__report-status::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background-color: var(--color-success);
  flex: none;
}

.converge__report-range {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background-color: var(--sys-fill);
  border: 1px solid var(--sys-edge);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  hyphens: none;
}

.converge__report-title {
  align-self: start;
}

.converge__chart-wrap {
  position: relative;
  inline-size: 100%;
}

.converge__chart {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.converge__chart-grid {
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}

.converge__chart-tick {
  fill: var(--color-text-muted);
  font-size: 11px;
  font-family: var(--font-family-base);
}

.converge__chart-bars {
  fill: var(--color-accent);
  
  opacity: 0.22;
}

.converge__chart-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.converge__chart-end-halo {
  fill: var(--color-accent);
  opacity: 0.22;
}

.converge__chart-end {
  fill: var(--color-text);
  stroke: var(--color-accent);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.converge__chart-badge {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: 2.25rem;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.converge__kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  text-align: start;
}

.converge__kpi + .converge__kpi {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--color-border);
}

.converge__kpi-label {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  hyphens: none;
}

.converge__kpi-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  hyphens: none;
}

.converge__kpi-delta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
}

.flow:not(.flow--motif) .converge__fan::before {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 50%;
  inline-size: 9px;
  block-size: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 10px 3px var(--color-accent-subtle);
  opacity: clamp(0, calc((var(--flow-line, 1) - 0.72) / 0.18), 1);
}

.flow:not(.flow--motif) .converge__trunk {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  
  stroke-dashoffset: calc(1 - clamp(0, (var(--flow-line, 1) - 0.8) / 0.2, 1));
}

.converge__trunk { display: none; }
.flow:not(.flow--motif) .converge__trunk { display: block; }

.converge__outcome-disc {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  background-color: var(--color-accent-subtle);
  box-shadow: 0 0 0 1px var(--color-accent), 0 0 18px 2px var(--color-accent-subtle);
}

.converge__outcome-note {
  margin: 0;
  font-size: var(--font-size-sm);
  
  line-height: var(--line-height-heading);
  color: var(--color-text-muted);
  hyphens: none;
}

.converge__caption {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  hyphens: none;
}

.about--axis .approach__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.about--axis .approach__title,
.about--axis .approach__statement,
.about--axis .approach__line {
  grid-column: 1;
  grid-row: auto;
}

.about--axis .approach__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.about--axis .approach__title::before,
.about--axis .approach__title::after {
  content: "";
  display: block;
  inline-size: var(--space-6);
  block-size: 1px;
  background-color: var(--color-border-strong);
}

.about--axis .approach__statement {
  
  max-width: 34ch;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.approach__mark {
  background-image: linear-gradient(var(--color-mark-fill), var(--color-mark-fill));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(var(--mark-fill, 1) * 100%) 100%;
  padding-inline: 0.12em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.about--axis .approach__statement.is-live {
  --mark-fill: 0;
}

.about--axis .approach__line {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}

.about__orbit {

--arc-r: clamp(13rem, 8rem + 12vw, 18rem);
  --arc-cy: calc(var(--arc-r) + 1rem);
  --dot-gap: 0.875rem;

  position: relative;
  inline-size: 100%;
  min-block-size: calc(1rem + var(--arc-r) * 1.72);
  max-inline-size: 64rem;
  margin: var(--space-5) auto 0;
  display: grid;
  place-items: end center;
  isolation: isolate;
}

.about__arc {
  position: absolute;
  inset-block-start: calc(var(--arc-cy) - var(--arc-r));
  inset-inline-start: calc(50% - var(--arc-r));
  inline-size: calc(var(--arc-r) * 2);
  block-size: var(--arc-r);
  aspect-ratio: auto;
  border: 1px dashed var(--color-border);
  border-block-end: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 0;
}

.about--axis .about__field {
  position: absolute;
  inset-block-start: calc(var(--arc-cy) - var(--arc-r));
  inset-inline-start: 50%;
  translate: -50% 0;
  
  inline-size: min(100%, calc(var(--arc-r) * 2.2));
  aspect-ratio: 1;
  inset-block-end: auto;
  z-index: 0;
}

.about--axis .about__portrait {

position: absolute;
  inset-block-start: calc(var(--arc-cy) - var(--arc-r) - var(--arc-r) * 0.17);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 1;
  inline-size: auto;
  block-size: calc(var(--arc-r) * 1.95);
  margin: 0;
}

.about__triad {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.about__facet {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  
  max-inline-size: 17rem;
  padding: var(--space-3) var(--space-4);
  border: var(--card-edge-w) solid var(--glass-edge);
  border-block-start-color: var(--glass-edge-lit);
  border-radius: var(--radius-lg);
  background-color: var(--glass-fill);
  background-image: var(--gradient-glass);
  
  min-inline-size: 0;
}

.about__facet-icon {
  flex: none;
  color: var(--color-accent);
}

.about__facet-label {
  font-size: var(--font-size-sm);
  line-height: 1.35;
  color: var(--color-text);
  text-wrap: balance;
}

.about__facet::after {
  content: "";
  position: absolute;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

@property --facet-float {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes about-facet-float {
  0%, 100% { --facet-float: 0px; }
  50%      { --facet-float: -7px; }
}

.about--axis .about__facet {
  animation: about-facet-float 6.5s var(--easing-standard) infinite;
  animation-delay: calc(var(--facet-slot, 0) * -0.95s);
}

.about--axis .about__facet--think { --facet-slot: 0; }
.about--axis .about__facet--craft { --facet-slot: 1; }
.about--axis .about__facet--tech  { --facet-slot: 2; }

.about__facet--craft {
  inset-block-start: calc(var(--arc-cy) - var(--arc-r) - var(--dot-gap));
  inset-inline-start: 50%;
  translate: -50% calc(-100% + var(--facet-float, 0px));
}

.about__facet--craft::after {
  inset-block-start: calc(100% + var(--dot-gap));
  inset-inline-start: 50%;
  translate: -50% -50%;
}

.about__facet--think {
  inset-block-start: var(--arc-cy);
  inset-inline-start: calc(50% - var(--arc-r) - var(--dot-gap));
  translate: -100% calc(-50% + var(--facet-float, 0px));
}

.about__facet--think::after {
  inset-block-start: 50%;
  inset-inline-start: calc(100% + var(--dot-gap));
  translate: -50% -50%;
}

.about__facet--tech {
  inset-block-start: var(--arc-cy);
  inset-inline-start: calc(50% + var(--arc-r) + var(--dot-gap));
  translate: 0 calc(-50% + var(--facet-float, 0px));
}

.about__facet--tech::after {
  inset-block-start: 50%;
  inset-inline-start: calc(0px - var(--dot-gap));
  translate: -50% -50%;
}

.about--axis .about__text {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  
  margin-block-start: var(--space-4);
  text-align: center;
}

.about--axis .about__name {
  margin: 0;
}

.about--axis .about__role {
  margin: 0;
}

.about--axis .about__bio p {
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.about--axis .about__cta {
  margin-block-start: var(--space-2);
}

.about--axis .track {
  margin-block-start: var(--space-6);
  
  max-inline-size: 64rem;
  margin-inline: auto;
}

@property --track-draw {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --node-lit {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.about--axis .track::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--track-row) / 2 - 7px);
  inset-inline-start: 0;
  inline-size: calc(var(--track-draw) * 100%);
  block-size: 14px;
  background-image:
    radial-gradient(
      circle 7px at 100% 50%,
      var(--color-accent) 0%,
      var(--color-accent-subtle) 42%,
      transparent 72%
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      var(--color-accent) calc(50% - 0.5px),
      var(--color-accent) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  background-repeat: no-repeat;
  pointer-events: none;
}

.about--axis .track.is-live {
  --track-draw: 0;
}

.about--axis .track.is-live .track__node {
  --node-lit: 0;
}

.about--axis .track__node {
  scale: calc(0.62 + var(--node-lit) * 0.38);
  opacity: calc(0.3 + var(--node-lit) * 0.7);
  box-shadow:
    0 0 0 4px var(--color-bg),
    0 0 calc(var(--node-lit) * 12px) var(--color-accent);
}

@media (max-width: 47.99rem) {
  .track {
    gap: var(--space-7);
  }

.about--axis .track {
    
    padding-inline-start: var(--space-6);
  }

.track::before {
    inset-block: 0;
    inset-inline: auto;
    inset-inline-start: calc(var(--track-node) / 2 - 0.5px);
    inline-size: 1px;
    block-size: auto;
  }

.track__step {
    padding-block-start: 0;
    padding-inline-start: 0;
  }

  .track__node {
    inset-block-start: 0.62em;
    inset-inline-start: calc(-1 * var(--space-6) + 0px);
  }

.about--axis .track::after {
    inset-block-start: 0;
    inset-inline-start: calc(var(--track-node) / 2 - 7px);
    inline-size: 14px;
    block-size: calc(var(--track-draw) * 100%);
    background-image:
      radial-gradient(
        circle 7px at 50% 100%,
        var(--color-accent) 0%,
        var(--color-accent-subtle) 42%,
        transparent 72%
      ),
      linear-gradient(
        to right,
        transparent calc(50% - 0.5px),
        var(--color-accent) calc(50% - 0.5px),
        var(--color-accent) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
      );
  }
}

@media (max-width: 61.99rem) {
  .about__orbit {
    min-block-size: 0;
    max-inline-size: min(26rem, 100%);
    display: grid;
    gap: var(--space-5);
    place-items: center;
  }

  .about__arc { display: none; }

.about--axis .about__portrait {
    position: static;
    inset: auto;
    translate: none;
    inline-size: min(18rem, 100%);
    max-inline-size: min(18rem, 100%);
    block-size: auto;
  }

  .about__triad {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  .about__facet {
    position: static;
    inset: auto;
    translate: none;
    max-inline-size: 100%;
  }

.about__facet::after { display: none; }
}