/* ============================================================
   RIVEL HOME — Pro Sections (3)
   01 · Manifesto (We Came to Lead)
   02 · Venture (RIVEL Life's Game)
   03 · Consulting (Strategy Lab)
   ----------------------------------------------------------------
   Style: Hyper-futuristic minimalism. Black canvas, hairline grid,
   iridescent holographic accents, monospace tabular numerals,
   editorial display typography. Animations are GSAP-driven via
   js/home-pro-sections.js — all CSS animations here are subtle
   ambience (gradient sweeps, pulse dots) and respect reduced motion.
   ============================================================ */

@font-face {
  font-family: 'PP Neue Machina';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PPNeueMachina-PlainLight.otf') format('opentype');
}
@font-face {
  font-family: 'PP Neue Machina';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PPNeueMachina-PlainRegular.otf') format('opentype');
}
@font-face {
  font-family: 'PP Neue Machina';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PPNeueMachina-PlainUltrabold.otf') format('opentype');
}
@font-face {
  font-family: 'PP Editorial New';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PPEditorialNew-Ultralight.otf') format('opentype');
}
@font-face {
  font-family: 'PP Editorial New';
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/PPEditorialNew-UltraboldItalic.otf') format('opentype');
}

/* ========== TOKENS ========== */
.hps {
  /* Colors */
  --hps-bg:        #050505;
  --hps-fg:        #ffffff;
  --hps-fg-70:     rgba(255,255,255,.72);
  --hps-fg-50:     rgba(255,255,255,.5);
  --hps-fg-30:     rgba(255,255,255,.3);
  --hps-fg-15:     rgba(255,255,255,.15);
  --hps-fg-08:     rgba(255,255,255,.08);
  --hps-fg-04:     rgba(255,255,255,.04);
  --hps-card:      rgba(255,255,255,.025);
  --hps-card-hov:  rgba(255,255,255,.05);

  /* Holographic gradient (from RIVEL strategy-lab orb) */
  --hps-holo: conic-gradient(from 180deg at 50% 50%,
    #b8d4ff 0deg,
    #f6c8e1 60deg,
    #fff2c4 120deg,
    #c8efd7 180deg,
    #c0d6ff 240deg,
    #e9c8f0 300deg,
    #b8d4ff 360deg);

  --hps-holo-soft: linear-gradient(135deg,
    rgba(184,212,255,.7) 0%,
    rgba(246,200,225,.7) 33%,
    rgba(255,242,196,.7) 66%,
    rgba(200,239,215,.7) 100%);

  /* Type */
  --hps-display: 'PP Neue Machina', 'Space Grotesk', system-ui, sans-serif;
  --hps-editorial: 'PP Editorial New', Georgia, serif;
  --hps-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --hps-body: 'Geist', 'Space Grotesk', system-ui, sans-serif;

  /* Spacing scale (fluid) */
  --hps-space-1: clamp(.25rem, .5vw, .5rem);
  --hps-space-2: clamp(.5rem, 1vw, 1rem);
  --hps-space-3: clamp(1rem, 1.5vw, 1.5rem);
  --hps-space-4: clamp(1.5rem, 2.5vw, 2.5rem);
  --hps-space-5: clamp(2.5rem, 4vw, 4rem);
  --hps-space-6: clamp(4rem, 7vw, 7rem);
  --hps-space-7: clamp(6rem, 10vw, 10rem);

  /* Easing */
  --hps-ease: cubic-bezier(.22,.61,.36,1);
  --hps-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ========== BASE WRAPPER ========== */
.hps {
  position: relative;
  background: var(--hps-bg);
  color: var(--hps-fg);
  font-family: var(--hps-body);
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  overflow: hidden;
}

.hps * {
  box-sizing: border-box;
}

.hps-section {
  position: relative;
  padding: var(--hps-space-7) clamp(1.25rem, 4vw, 4rem);
  overflow: hidden;
}

.hps-container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

/* Subtle hairline grid backdrop (per section) */
.hps-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--hps-fg-04) 1px, transparent 1px) 0 0/clamp(80px,8vw,140px) 100%,
    linear-gradient(to bottom, var(--hps-fg-04) 1px, transparent 1px) 0 0/100% clamp(80px,8vw,140px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ========== ATOMS ========== */

/* Eyebrow tag (e.g. "001 // MANIFESTO") */
.hps-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hps-space-2);
  padding: .55rem 1rem;
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  font-family: var(--hps-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
  background: var(--hps-fg-04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hps-eyebrow .hps-eyebrow-num {
  color: var(--hps-fg);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.hps-eyebrow .hps-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hps-fg);
  box-shadow: 0 0 14px currentColor;
  animation: hpsPulse 2.4s ease-in-out infinite;
}
@keyframes hpsPulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.25); }
}

/* Display headline */
.hps-display {
  font-family: var(--hps-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--hps-fg);
  margin: 0;
  /* Avoid italic descenders ("g", "y") clashing with following content */
  padding-bottom: .12em;
}
.hps-display em,
.hps-display .hps-display-italic {
  font-family: var(--hps-editorial);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.025em;
  /* Italic glyphs need slightly more line-height for ascenders/descenders */
  line-height: 1.06;
  /* Visually align italic baseline with display */
  display: inline-block;
  vertical-align: baseline;
}

/* Gradient stroke on key word (subtle holographic shine) */
.hps-display .hps-display-shine {
  background: var(--hps-holo);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: brightness(1.05);
}

.hps-tagline {
  font-family: var(--hps-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--hps-fg-70);
  margin: 0;
}

.hps-lede {
  font-family: var(--hps-body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  color: var(--hps-fg-70);
  max-width: 56ch;
  margin: 0;
}

/* Gradient hairline divider */
.hps-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--hps-fg-15) 20%,
    var(--hps-fg-30) 50%,
    var(--hps-fg-15) 80%,
    transparent 100%);
  border: 0;
  margin: 0;
}

/* Buttons */
.hps-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.6rem;
  font-family: var(--hps-body);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 100vw;
  cursor: pointer;
  transition: transform .35s var(--hps-ease), background .35s var(--hps-ease), color .35s var(--hps-ease);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.hps-btn:focus-visible {
  outline: 2px solid var(--hps-fg);
  outline-offset: 3px;
}
.hps-btn--primary {
  background: var(--hps-fg);
  color: #000;
  box-shadow:
    0 0 0 1px var(--hps-fg-30) inset,
    0 18px 40px -22px rgba(255,255,255,.4);
}
.hps-btn--primary:hover {
  transform: translateY(-1px);
  background: #f4f4f4;
}
.hps-btn--ghost {
  background: var(--hps-fg-04);
  color: var(--hps-fg);
  border: 1px solid var(--hps-fg-15);
}
.hps-btn--ghost:hover {
  background: var(--hps-fg-08);
  border-color: var(--hps-fg-30);
  transform: translateY(-1px);
}
.hps-btn .hps-btn-arrow {
  display: inline-block;
  transition: transform .35s var(--hps-ease);
}
.hps-btn:hover .hps-btn-arrow {
  transform: translateX(3px);
}

/* CTA pair */
.hps-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hps-space-2);
  align-items: center;
}

/* Stats ticker (data row) */
.hps-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  font-family: var(--hps-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
  padding: var(--hps-space-3) 0;
  border-top: 1px solid var(--hps-fg-08);
  border-bottom: 1px solid var(--hps-fg-08);
}
.hps-stats__item {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.hps-stats__num {
  font-family: var(--hps-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--hps-fg);
  letter-spacing: -.01em;
}
.hps-stats__sep {
  width: 1px;
  align-self: stretch;
  background: var(--hps-fg-08);
  display: inline-block;
}

/* ============================================================
   01 · MANIFESTO — "We Didn't Come to Follow."
   ============================================================ */
.hps-manifesto {
  padding-top: var(--hps-space-7);
}

.hps-manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--hps-space-5);
  align-items: end;
  margin-bottom: var(--hps-space-5);
}
@media (max-width: 900px) {
  .hps-manifesto__grid {
    grid-template-columns: 1fr;
    gap: var(--hps-space-4);
    align-items: start;
  }
}
.hps-manifesto__head {
  display: flex;
  flex-direction: column;
  gap: var(--hps-space-3);
}
.hps-manifesto__copy {
  display: flex;
  flex-direction: column;
  gap: var(--hps-space-3);
}

/* Pillars grid (4 cards) */
.hps-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.5vw, 1.4rem);
  margin-top: var(--hps-space-5);
}
@media (max-width: 1100px) {
  .hps-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px)  {
  .hps-pillars { grid-template-columns: 1fr; }
}

.hps-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hps-fg-08);
  background: var(--hps-card);
  border-radius: 18px;
  overflow: hidden;
  transition: background .4s var(--hps-ease), border-color .4s var(--hps-ease), transform .5s var(--hps-ease-out);
  will-change: transform;
}
.hps-pillar:hover {
  background: var(--hps-card-hov);
  border-color: var(--hps-fg-30);
  transform: translateY(-4px);
}
.hps-pillar__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0a0a0a;
}
.hps-pillar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.92);
  transition: transform 1.2s var(--hps-ease-out), filter .6s var(--hps-ease);
  will-change: transform;
}
.hps-pillar:hover .hps-pillar__media img {
  transform: scale(1.06);
  filter: saturate(1) brightness(1);
}
.hps-pillar__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.hps-pillar__num {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  font-family: var(--hps-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--hps-fg);
  background: rgba(0,0,0,.6);
  border: 1px solid var(--hps-fg-15);
  padding: .35rem .65rem;
  border-radius: 100vw;
  backdrop-filter: blur(8px);
}
.hps-pillar__body {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.hps-pillar__title {
  font-family: var(--hps-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--hps-fg);
  margin: 0;
}
.hps-pillar__desc {
  font-family: var(--hps-body);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--hps-fg-70);
  margin: 0;
}

/* Holographic edge on hover (drawn via mask) */
.hps-pillar::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  padding: 1px;
  background: var(--hps-holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .55s var(--hps-ease);
  pointer-events: none;
  z-index: 1;
}
.hps-pillar:hover::before { opacity: 1; }

/* ============================================================
   02 · VENTURE — "RIVEL Life's Game"
   ============================================================ */
.hps-venture {
  padding-top: var(--hps-space-7);
  padding-bottom: var(--hps-space-7);
}

/* Hero panel with status */
.hps-venture__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--hps-space-5);
  align-items: end;
  margin-bottom: var(--hps-space-5);
}
@media (max-width: 1000px) {
  .hps-venture__hero {
    grid-template-columns: 1fr;
    gap: var(--hps-space-4);
  }
}

.hps-venture__head {
  display: flex;
  flex-direction: column;
  gap: var(--hps-space-4);
}

/* Status ribbon: "● COMING 2026" */
.hps-status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  background: var(--hps-fg-04);
  font-family: var(--hps-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
  width: max-content;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hps-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hps-fg);
  box-shadow: 0 0 16px var(--hps-fg);
  animation: hpsPulse 2s ease-in-out infinite;
}

.hps-venture__copy {
  display: flex;
  flex-direction: column;
  gap: var(--hps-space-3);
  align-items: flex-start;
  padding-bottom: .5rem;
}

/* Numbered features grid (4 orbs) */
.hps-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.5vw, 1.4rem);
  margin-top: var(--hps-space-5);
}
@media (max-width: 1100px) { .hps-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hps-features { grid-template-columns: 1fr; } }

.hps-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.6rem 1.4rem 1.6rem;
  border: 1px solid var(--hps-fg-08);
  background: var(--hps-card);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  transition: background .4s var(--hps-ease), border-color .4s var(--hps-ease), transform .5s var(--hps-ease-out);
}
.hps-feature:hover {
  background: var(--hps-card-hov);
  border-color: var(--hps-fg-30);
  transform: translateY(-4px);
}
.hps-feature::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  padding: 1px;
  background: var(--hps-holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .55s var(--hps-ease);
  pointer-events: none;
}
.hps-feature:hover::before { opacity: 1; }

/* The numbered orb */
.hps-feature__orb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--hps-mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--hps-fg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hps-fg-15);
  isolation: isolate;
}
.hps-feature__orb::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: var(--hps-holo);
  opacity: .25;
  filter: blur(14px);
  transition: opacity .55s var(--hps-ease);
  z-index: -1;
}
.hps-feature:hover .hps-feature__orb::before { opacity: .55; }

.hps-feature__title {
  font-family: var(--hps-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--hps-fg);
  margin: 0;
}
.hps-feature__desc {
  font-family: var(--hps-body);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--hps-fg-70);
  margin: 0;
}

/* ============================================================
   03 · CONSULTING — "Strategy Lab"
   ============================================================ */
.hps-consulting {
  padding-top: var(--hps-space-6);
}

.hps-consulting__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--hps-space-5);
  align-items: stretch;
  margin-bottom: var(--hps-space-5);
}
@media (max-width: 1000px) {
  .hps-consulting__grid {
    grid-template-columns: 1fr;
    gap: var(--hps-space-4);
  }
}

.hps-consulting__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hps-space-4);
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid var(--hps-fg-08);
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(184,212,255,.06), transparent 50%),
    radial-gradient(140% 140% at 100% 100%, rgba(246,200,225,.05), transparent 50%),
    rgba(255,255,255,.018);
  overflow: hidden;
  isolation: isolate;
}
.hps-consulting__panel::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  right: -100px;
  bottom: -100px;
  border-radius: 50%;
  background: var(--hps-holo);
  opacity: .12;
  filter: blur(36px);
  z-index: -1;
}

.hps-consulting__feat {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hps-fg-08);
  border-radius: 24px;
  overflow: hidden;
  background: var(--hps-card);
  isolation: isolate;
}

.hps-quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hps-space-3);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  flex: 1;
}

.hps-quote-card__icon {
  width: 28px;
  height: auto;
  opacity: .35;
}

.hps-quote-card__text {
  font-family: var(--hps-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--hps-fg);
  margin: 0;
  flex: 1;
}

.hps-quote-card__person {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: var(--hps-space-3);
  border-top: 1px solid var(--hps-fg-08);
}
.hps-quote-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--hps-fg-15);
}
.hps-quote-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hps-quote-card__name {
  font-family: var(--hps-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--hps-fg);
  margin: 0;
}
.hps-quote-card__role {
  font-family: var(--hps-body);
  font-size: .85rem;
  color: var(--hps-fg-50);
  margin: 0;
}

/* Logo strip below consulting */
.hps-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  padding: var(--hps-space-4) 0;
  border-top: 1px solid var(--hps-fg-08);
  margin-top: var(--hps-space-4);
}
.hps-logos__label {
  font-family: var(--hps-mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hps-fg-50);
}
.hps-logos__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.hps-logos__items img {
  height: 1.65rem;
  width: auto;
  opacity: .55;
  filter: brightness(2);
  transition: opacity .35s var(--hps-ease);
}
.hps-logos__items img:hover { opacity: .9; }

/* ============================================================
   ANIMATION HOOKS (GSAP-driven)
   The JS adds .is-revealed once the section enters viewport.
   These rules are just initial states + fallbacks.
   ============================================================ */
.hps [data-hps-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--hps-ease-out), transform .9s var(--hps-ease-out);
  will-change: opacity, transform;
}
.hps [data-hps-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* Stagger child reveals */
.hps [data-hps-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .7s var(--hps-ease-out), transform .7s var(--hps-ease-out);
}
.hps [data-hps-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}
.hps [data-hps-stagger].is-revealed > *:nth-child(1) { transition-delay: .05s; }
.hps [data-hps-stagger].is-revealed > *:nth-child(2) { transition-delay: .12s; }
.hps [data-hps-stagger].is-revealed > *:nth-child(3) { transition-delay: .19s; }
.hps [data-hps-stagger].is-revealed > *:nth-child(4) { transition-delay: .26s; }
.hps [data-hps-stagger].is-revealed > *:nth-child(5) { transition-delay: .33s; }
.hps [data-hps-stagger].is-revealed > *:nth-child(6) { transition-delay: .40s; }

/* Char-split for headlines (set up by JS) */
.hps-display .hps-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.6em, 0);
  transition: opacity .7s var(--hps-ease-out), transform .8s var(--hps-ease-out);
}
.hps-display .hps-word {
  display: inline-block;
  white-space: nowrap;
}
.hps-display.is-revealed .hps-char {
  opacity: 1;
  transform: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hps [data-hps-reveal],
  .hps [data-hps-stagger] > *,
  .hps-display .hps-char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hps-eyebrow .hps-eyebrow-dot,
  .hps-status::before {
    animation: none !important;
  }
}

/* ============================================================
   STEPS / 3-PHASE — overrides existing Webflow markup
   .hps-steps is a modifier class on the Three-Phase section.
   We keep the existing inner classes (.steps-stack-component,
   .steps-item, .steps-card, .steps-content, .steps-tag…) so the
   IX2 / GSAP scroll-stack animation behaviour stays intact. We
   only restyle visually + improve typographic hierarchy.
   ============================================================ */

/* Section wrapper visual reset */
.hps-steps {
  position: relative;
  background: var(--hps-bg);
  color: var(--hps-fg);
  font-family: var(--hps-body);
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
.hps-steps,
.hps-steps * {
  box-sizing: border-box;
}
/* Hairline grid backdrop — no overflow:hidden so .steps-item sticky works */
.hps-steps-wrap {
  position: relative;
  padding: var(--hps-space-7) clamp(1.25rem, 4vw, 4rem);
  background: var(--hps-bg);
  isolation: isolate;
}
.hps-steps-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--hps-fg-04) 1px, transparent 1px) 0 0/clamp(80px,8vw,140px) 100%,
    linear-gradient(to bottom, var(--hps-fg-04) 1px, transparent 1px) 0 0/100% clamp(80px,8vw,140px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Reset the inner Webflow constraints inside this section */
.hps-steps .container,
.hps-steps .padding-global,
.hps-steps .w-layout-blockcontainer {
  padding: 0;
  max-width: none;
  margin: 0;
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  align-self: stretch;
}

/* Section header (above the cards) — centered for hero-style entry */
.hps-steps .steps-wrapper {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(2.5rem, 4.5vw, 4.5rem);
}
.hps-steps .steps-wrapper > .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hps-space-3);
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}
/* Section heading */
.hps-steps .steps-wrapper > .header .heading-4 {
  font-family: var(--hps-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--hps-fg);
  text-transform: none;
  padding-bottom: .12em;
  margin: 0;
}
.hps-steps .steps-wrapper > .header .heading-4 strong { font-weight: inherit; }
.hps-steps .steps-wrapper > .header .heading-4 em {
  font-family: var(--hps-editorial);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.025em;
  display: inline-block;
  line-height: 1.06;
}
.hps-steps .steps-wrapper > .header .text-block-6,
.hps-steps .steps-wrapper > .header .opacity-60 {
  opacity: 1;
}
.hps-steps .steps-wrapper > .header .text-block-6 {
  font-family: var(--hps-body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--hps-fg-70);
}

/* Stack container — keeps animation hooks intact */
.hps-steps .steps-stack-component {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* Each phase item — sticky stack-scroll (preserves Webflow base animation) */
.hps-steps .steps-item {
  position: sticky;
  top: 8vh;
  width: 100%;
}
@media (max-width: 900px) {
  .hps-steps .steps-item {
    position: relative;
    top: auto;
  }
}

/* THE CARD — content-driven height, vertical-centered text, opaque bg for sticky stacking */
.hps-steps .steps-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: stretch;
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  gap: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid var(--hps-fg-08);
  border-radius: 24px;
  background:
    radial-gradient(140% 140% at 0% 0%, rgba(184,212,255,.045), transparent 55%),
    radial-gradient(140% 140% at 100% 100%, rgba(246,200,225,.035), transparent 55%),
    #0c0c0c;
  overflow: hidden;
  isolation: isolate;
  transition: background .4s var(--hps-ease), border-color .4s var(--hps-ease);
  /* Subtle drop shadow so stacked cards have visible separation */
  box-shadow: 0 -1px 0 rgba(255,255,255,.03), 0 30px 60px -30px rgba(0,0,0,.6);
}
@media (max-width: 900px) {
  .hps-steps .steps-card {
    grid-template-columns: 1fr;
    gap: var(--hps-space-3);
  }
}
.hps-steps .steps-card:hover {
  background:
    radial-gradient(140% 140% at 0% 0%, rgba(184,212,255,.08), transparent 55%),
    radial-gradient(140% 140% at 100% 100%, rgba(246,200,225,.06), transparent 55%),
    #111111;
  border-color: var(--hps-fg-30);
}

/* Holographic edge on hover */
.hps-steps .steps-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  padding: 1px;
  background: var(--hps-holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .55s var(--hps-ease);
  pointer-events: none;
  z-index: 3;
}
.hps-steps .steps-card:hover::before { opacity: 1; }

/* Phase number watermark — fully inside card, anchored bottom-left as editorial accent */
.hps-steps .steps-card::after {
  content: attr(data-phase);
  position: absolute;
  left: clamp(.5rem, 1vw, 1.25rem);
  bottom: clamp(.25rem, .6vw, .75rem);
  font-family: var(--hps-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(7rem, 13vw, 11rem);
  line-height: .82;
  color: var(--hps-fg);
  opacity: .045;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -.05em;
  white-space: nowrap;
  transition: opacity .55s var(--hps-ease);
}
.hps-steps .steps-card:hover::after {
  opacity: .08;
}

/* LEFT content area — vertically centered, tight rhythm, no space-between gaps */
.hps-steps .left-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.4rem, 1.8vw, 1.8rem);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  z-index: 1;
  min-height: 0;
}
.hps-steps .steps-content {
  display: flex;
  flex-direction: column;
  gap: clamp(.85rem, 1.1vw, 1.1rem);
  width: 100%;
}

/* Phase tag → HPS-style eyebrow */
.hps-steps .steps-tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  background: var(--hps-fg-04);
  width: max-content;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin: 0;
}
.hps-steps .steps-tag .text-size-small,
.hps-steps .steps-tag .opacity-70,
.hps-steps .steps-tag .read-more-button {
  font-family: var(--hps-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
  opacity: 1;
}
.hps-steps .steps-tag .read-more-button {
  display: inline-flex;
}
.hps-steps .steps-tag .read-more-button .text-size-small {
  color: var(--hps-fg);
  letter-spacing: .08em;
}
.hps-steps .steps-tag .vertical-line-tag {
  width: 1px;
  height: 12px;
  background: var(--hps-fg-15);
  display: inline-block;
  margin: 0;
}
.hps-steps .steps-tag .hps-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hps-fg);
  box-shadow: 0 0 14px currentColor;
  animation: hpsPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* Heading */
.hps-steps .steps-content .heading-4 {
  font-family: var(--hps-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--hps-fg);
  margin: 0;
  text-transform: none;
}
.hps-steps .steps-content .heading-4 em {
  font-family: var(--hps-editorial);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.025em;
  color: var(--hps-fg-70);
}
.hps-steps .steps-content .max-width-30ch,
.hps-steps .steps-content .max-width-40ch {
  max-width: none;
}

/* Description */
.hps-steps .steps-description {
  margin: 0;
}
.hps-steps .steps-description .text-block-7,
.hps-steps .steps-description .text-block-8,
.hps-steps .steps-description .text-block-9 {
  font-family: var(--hps-body);
  font-size: clamp(.92rem, 1vw, 1rem);
  line-height: 1.55;
  color: var(--hps-fg-70);
  max-width: 44ch;
  margin: 0;
}

/* BUTTON — strong override of Webflow .primary-button */
.hps-steps .left-content a.primary-button,
.hps-steps .left-content a.primary-button.home,
.hps-steps .left-content a.primary-button.w-inline-block {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.5rem;
  font-family: var(--hps-body);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 100vw;
  background: #fff;
  background-color: #fff;
  color: #000;
  border: 0;
  border-color: transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  width: max-content;
  margin: 0;
  overflow: visible;
  justify-content: flex-start;
  transition: transform .35s var(--hps-ease), background .35s var(--hps-ease), box-shadow .35s var(--hps-ease);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06) inset,
    0 18px 40px -22px rgba(255,255,255,.35);
}
.hps-steps .left-content a.primary-button:hover {
  transform: translateY(-1px);
  background: #f4f4f4;
  background-color: #f4f4f4;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06) inset,
    0 24px 50px -22px rgba(255,255,255,.5);
}
.hps-steps .left-content a.primary-button .button-elipse {
  display: none;
}
.hps-steps .left-content a.primary-button .text-size-small,
.hps-steps .left-content a.primary-button .relative {
  font-family: var(--hps-body);
  font-size: .9rem;
  font-weight: 500;
  color: #000;
  letter-spacing: 0;
  position: static;
}
.hps-steps .left-content a.primary-button::after {
  content: '→';
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  margin-left: .1rem;
  transition: transform .35s var(--hps-ease);
}
.hps-steps .left-content a.primary-button:hover::after {
  transform: translateX(3px);
}

/* RIGHT — image side, fills its grid cell so card height = max(left content, image) */
.hps-steps .right-content {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  z-index: 1;
  min-height: 0;
}
.hps-steps .steps-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 26vw, 340px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hps-fg-08);
  background: #0a0a0a;
}
@media (max-width: 900px) {
  .hps-steps .steps-image {
    aspect-ratio: 16 / 10;
    min-height: 0;
    height: auto;
  }
}
.hps-steps .steps-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.92) contrast(1.05);
  transition: transform 1.2s var(--hps-ease-out), filter .55s var(--hps-ease);
  will-change: transform;
}
.hps-steps .steps-card:hover .steps-image img {
  transform: scale(1.03);
  filter: saturate(1) brightness(1) contrast(1.05);
}
.hps-steps .steps-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
/* Holographic edge on image */
.hps-steps .steps-image::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  padding: 1px;
  background: var(--hps-holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .55s var(--hps-ease);
  pointer-events: none;
  z-index: 2;
}
.hps-steps .steps-card:hover .steps-image::before { opacity: 1; }