/* ==========================================================================
   Sixth Protocol — Home
   Section styles for index.html. Depends on base.css for tokens + keyframes.
   ========================================================================== */

.sp-anchor { scroll-margin-top: 70px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sp-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px var(--gutter) 90px;
  overflow: hidden;
}

.sp-hero__field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sp-hero__canvas { width: 100%; height: 100%; }

.sp-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 18, 38, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 38, .032) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(68% 60% at 50% 42%, #000 25%, transparent 78%);
  mask-image: radial-gradient(68% 60% at 50% 42%, #000 25%, transparent 78%);
}

.sp-hero__aura--a {
  left: -14%;
  top: -18%;
  width: min(58vw, 760px);
  background: radial-gradient(circle, var(--acSoft), transparent 62%);
  animation: spDrift1 19s ease-in-out infinite alternate;
}
.sp-hero__aura--b {
  right: -16%;
  bottom: -22%;
  width: min(52vw, 680px);
  background: radial-gradient(circle, var(--ac2Soft), transparent 62%);
  animation: spDrift2 23s ease-in-out infinite alternate;
}

.sp-hero__inner {
  position: relative;
  max-width: 960px;
}

.sp-hero__eyebrow { justify-content: center; }

.sp-hero__title {
  margin: 24px 0 0;
  font-size: clamp(46px, 8.2vw, 110px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.sp-hero__lede {
  margin: 26px auto 0;
  max-width: 640px;
  font-size: clamp(16px, 1.8vw, 19.5px);
  line-height: 1.65;
  color: var(--ink-65);
}

.sp-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 42px;
}

.sp-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sp-scroll__mouse {
  width: 22px;
  height: 34px;
  border: 1.5px solid var(--ink-28);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.sp-scroll__dot {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--ac1);
  animation: spDot 1.8s ease-in-out infinite;
  display: block;
}
.sp-scroll__label {
  font-size: 9.5px;
  letter-spacing: .32em;
  color: var(--ink-30);
}

/* --------------------------------------------------------------------------
   Capability marquee
   Each half is its own padded group so translateX(-50%) lands exactly one
   group over and the loop has no seam.
   -------------------------------------------------------------------------- */

.sp-marquee {
  border-top: 1px solid var(--hair-2);
  border-bottom: 1px solid var(--hair-2);
  overflow: hidden;
  padding: 17px 0;
  background: rgba(11, 18, 38, .012);
}
.sp-marquee__track {
  display: flex;
  width: max-content;
  animation: spMarquee 32s linear infinite;
  will-change: transform;
}
.sp-marquee__group {
  display: flex;
  align-items: center;
  gap: 52px;
  padding-right: 52px;
}
.sp-marquee__item {
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--ink-45);
  white-space: nowrap;
}
.sp-marquee__sep {
  color: var(--acText);
  opacity: .45;
  font-size: 8px;
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.sp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 18px;
  margin-top: 56px;
}

.sp-card {
  position: relative;
  overflow: hidden;
  background-color: var(--tint);
  background-image: radial-gradient(520px circle at var(--mx, -400px) var(--my, -400px), var(--acSpot), transparent 45%);
  border: 1px solid var(--hair-3);
  border-radius: 18px;
  padding: 30px 26px 26px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
@media (hover: hover) {
  .sp-card:hover {
    transform: translateY(-5px);
    border-color: var(--acBorder);
    box-shadow: 0 24px 70px -28px var(--acGlow);
  }
}

.sp-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--hair-4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac1);
  background: var(--acFaint);
  flex: none;
}
.sp-card__num {
  font-size: 11px;
  color: var(--ink-35);
}
.sp-card__title {
  margin: 22px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.sp-card__desc {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-60);
}
.sp-card__list {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--hair-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sp-card__list li {
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-48);
}
.sp-card__list li::before {
  content: "+";
  color: var(--acText);
  margin-right: .45em;
}
.sp-card__link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--acText);
}

/* --------------------------------------------------------------------------
   Why us — sticky intro, stat grid, orbit diagram
   -------------------------------------------------------------------------- */

.sp-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.sp-why__intro { position: sticky; top: 110px; }
.sp-why__lede {
  margin: 20px 0 0;
  font-size: clamp(15.5px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--ink-62);
}
.sp-why__more { margin-top: 26px; }

.sp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 14px;
}
.sp-stat {
  border: 1px solid var(--hair-3);
  border-radius: 16px;
  padding: 24px 22px;
  background: var(--tint-soft);
}
.sp-stat__value {
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 700;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--ac1), var(--ac2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sp-stat__label {
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--ink-45);
}

.sp-orbit {
  margin: 38px auto 0;
  position: relative;
  aspect-ratio: 1;
  max-width: 520px;
}
.sp-orbit__ring {
  position: absolute;
  border-radius: 50%;
}
.sp-orbit__ring--1 { inset: 0;   border: 1px dashed rgba(11, 18, 38, .16); }
.sp-orbit__ring--2 { inset: 20%; border: 1px dashed rgba(11, 18, 38, .14); }
.sp-orbit__ring--3 { inset: 40%; border: 1px dashed rgba(11, 18, 38, .12); }

.sp-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sp-orbit__ping {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 1px solid var(--acBorder);
  animation: spPing 3s ease-out infinite;
  display: block;
}
.sp-orbit__logo {
  width: 52px;
  height: 69.6px;
  display: block;
  filter: drop-shadow(0 0 26px var(--acGlow));
}

.sp-orbit__track { position: absolute; }
.sp-orbit__track--1 { inset: 0; }
.sp-orbit__track--2 { inset: 20%; }

/* --dur / --delay are set per-satellite in the markup */
.sp-orbit__spin {
  position: absolute;
  inset: 0;
  animation: spOrbit var(--dur) linear infinite;
  animation-delay: var(--delay, 0s);
}
.sp-orbit__anchor { position: absolute; top: 0; left: 50%; }
.sp-orbit__center { transform: translate(-50%, -50%); }
.sp-orbit__counter {
  animation: spOrbitRev var(--dur) linear infinite;
  animation-delay: var(--delay, 0s);
}
.sp-orbit__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid rgba(11, 18, 38, .12);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 8px 24px -10px rgba(11, 18, 38, .2);
  white-space: nowrap;
}
.sp-orbit__pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ac1);
  display: inline-block;
  flex: none;
}

@media (max-width: 560px) {
  .sp-orbit__pill { font-size: 10.5px; padding: 6px 11px; }
}

/* --------------------------------------------------------------------------
   Carousels (selected work + signals)
   -------------------------------------------------------------------------- */

.sp-work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sp-work__all { padding-bottom: 6px; }

.sp-carousel { position: relative; margin-top: 52px; }
.sp-carousel__stage { position: relative; touch-action: pan-y; }
.sp-carousel__stage--work   { height: clamp(330px, 52vw, 560px); }

.sp-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hair-5);
  background: var(--panel);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(11, 18, 38, .3);
  z-index: 5;
  transition: border-color .2s, transform .2s;
}
.sp-carousel__nav--prev { left: 0; }
.sp-carousel__nav--next { right: 0; }
@media (hover: hover) {
  .sp-carousel__nav:hover {
    border-color: var(--acBorder);
    transform: translateY(-50%) scale(1.06);
  }
}
.sp-carousel__hint {
  margin-top: 16px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--ink-40);
}

.sp-case {
  position: absolute;
  left: 20%;
  top: 3%;
  width: 60%;
  border: 1px solid var(--hair-4);
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 30px 80px -30px rgba(11, 18, 38, .28);
}
.sp-case__media {
  aspect-ratio: 16 / 9;
  background-color: rgba(11, 18, 38, .025);
  background-image: repeating-linear-gradient(135deg, rgba(11, 18, 38, .1) 0 2px, transparent 2px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--hair-3);
}
.sp-case__media span {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-45);
  text-align: center;
  padding: 0 12px;
}
.sp-case__body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-case__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-case__meta {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-55);
}

/* --------------------------------------------------------------------------
   AI band
   -------------------------------------------------------------------------- */

.sp-ai {
  padding-block: clamp(90px, 11vw, 160px);
  text-align: center;
  overflow: hidden;
}
.sp-ai__aura {
  left: 50%;
  top: 50%;
  margin-left: min(-29vw, -380px);
  margin-top: min(-29vw, -380px);
  width: min(58vw, 760px);
  background: radial-gradient(circle, var(--acSoft), transparent 62%);
}
.sp-ai__inner {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}
.sp-ai__eyebrow { margin-bottom: 20px; }
.sp-ai__title {
  margin: 0;
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.04;
  background: linear-gradient(90deg, var(--ac1), var(--ac2), var(--ac1));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spGrad 7s linear infinite;
}
.sp-ai__lede {
  margin: 24px auto 0;
  max-width: 560px;
  font-size: clamp(15.5px, 1.7vw, 18.5px);
  line-height: 1.7;
  color: var(--ink-65);
}

/* --------------------------------------------------------------------------
   Process trajectory
   -------------------------------------------------------------------------- */

.sp-traj { position: relative; margin-top: 74px; }
.sp-traj__svg { width: 100%; height: auto; overflow: visible; }
.sp-traj__stop-a { stop-color: var(--acText); }
.sp-traj__stop-b { stop-color: var(--ac2); }
.sp-traj__path {
  fill: none;
  stroke: url(#spTrajG);
  stroke-width: 2;
  stroke-linecap: round;
}

.sp-traj__node {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 5;
}
.sp-traj__ping {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--acBorder);
  animation: spPing 2.8s ease-out infinite;
  animation-delay: var(--ping-delay, 0s);
  display: block;
}
.sp-traj__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac1), var(--ac2));
  box-shadow: 0 0 16px var(--acGlow);
  display: block;
}
.sp-traj__num {
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--acText);
}
.sp-traj__scrub {
  position: absolute;
  left: 2%;
  top: 77%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac1), var(--ac2));
  border: 3px solid var(--panel);
  box-shadow: 0 4px 18px rgba(11, 18, 38, .3), 0 0 20px var(--acGlow);
  cursor: grab;
  z-index: 6;
  touch-action: none;
}
.sp-traj__hint {
  margin-top: 14px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--ink-40);
}

.sp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 30px;
  margin-top: 36px;
}
.sp-step__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--acText);
}
.sp-step__title {
  margin: 14px 0 0;
  font-size: 19px;
  font-weight: 600;
}
.sp-step__desc {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.sp-cta {
  padding-block: clamp(100px, 13vw, 190px);
  text-align: center;
  overflow: hidden;
}
/* Wrapper owns the centring transform so the drift keyframes are free to
   own `transform` outright. */
.sp-cta__aura-wrap {
  position: absolute;
  left: 50%;
  bottom: -40%;
  transform: translateX(-50%);
  width: min(70vw, 900px);
  aspect-ratio: 1;
  pointer-events: none;
}
.sp-cta__aura {
  inset: 0;
  width: 100%;
  background: radial-gradient(circle, var(--acSoft), transparent 60%);
  animation: spDrift1 21s ease-in-out infinite alternate;
}
.sp-cta__inner {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}
.sp-cta__title {
  margin: 0;
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.sp-cta__lede {
  margin: 24px auto 0;
  max-width: 520px;
  font-size: clamp(15.5px, 1.7vw, 18.5px);
  line-height: 1.7;
  color: var(--ink-65);
}
.sp-cta__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.sp-cta__btn { padding: 16px 32px; }
.sp-cta__email {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-55);
  transition: color .2s;
}
.sp-cta__email:hover { color: var(--acText); }

/* --------------------------------------------------------------------------
   Process: progressive reveal
   Each stage keeps its number so the run of four still reads, but only the
   stage the scrubber has reached shows its copy. The modifier class is added
   by fx.js, so if the script never runs every stage stays readable.
   -------------------------------------------------------------------------- */

.sp-step__body {
  transition: opacity .35s ease, transform .35s ease;
}
.sp-steps--progressive [data-step] .sp-step__num {
  transition: color .35s ease, opacity .35s ease;
}
.sp-steps--progressive [data-step]:not([data-active]) .sp-step__num {
  color: var(--ink-30);
}
.sp-steps--progressive [data-step]:not([data-active]) .sp-step__body {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

/* --------------------------------------------------------------------------
   Why us: small screens
   Once the grid is a single column the sticky intro has nothing to sit beside,
   so it pins itself over the stats and orbit as they scroll past. And the orbit
   pills, sized for a half-width column, run off the side of a phone. Below the
   two-column breakpoint the intro un-pins and the orbit flattens into a plain
   stacked list, which is what the diagram was saying anyway.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .sp-why__intro { position: static; top: auto; }

  .sp-orbit {
    aspect-ratio: auto;
    max-width: none;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sp-orbit__ring,
  .sp-orbit__ping { display: none; }

  .sp-orbit__core {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
  }

  .sp-orbit__track,
  .sp-orbit__spin,
  .sp-orbit__anchor {
    position: static;
    inset: auto;
  }
  .sp-orbit__spin,
  .sp-orbit__counter { animation: none; }
  .sp-orbit__center { transform: none; }

  .sp-orbit__pill {
    white-space: normal;
    width: 100%;
    justify-content: flex-start;
    font-size: 13px;
    padding: 12px 16px;
  }
}

/* A carousel card that links out to the brand. */
a.sp-case { display: block; color: inherit; text-decoration: none; }
a.sp-case:hover { color: inherit; }
.sp-case__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
  display: block;
}
.sp-case__media:has(img) {
  background-image: none;
  background-color: #fff;
}