/* ============================================================
   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; }


/* ============================================================
   CONTACT PAGE — single source of truth, HPS aesthetic
   No duplicate forms. Hero + 2-col (form/info) + trust strip.
   ============================================================ */

/* Body of contact page should match HPS bg */
.hps-contact {
  background: var(--hps-bg);
  color: var(--hps-fg);
  font-family: var(--hps-body);
}

/* Generic inner-constrain (used by .hps-contact__hero etc.) */
.hps-section__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  z-index: 1;
}
/* Belt-and-suspenders: also hide the orphan grid div if it sneaks in */
.hps-section__grid {
  display: none;
}

/* Hero */
.hps-contact__hero {
  padding-top: clamp(6rem, 12vh, 9rem);
  padding-bottom: clamp(3rem, 5vh, 4.5rem);
}
.hps-contact__hero .hps-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--hps-space-3);
  max-width: 70ch;
  margin: 0 auto;
}
.hps-contact__hero .hps-display {
  text-align: center;
}
.hps-contact__hero .hps-tagline {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}
.hps-contact__hero .hps-status {
  margin-top: var(--hps-space-3);
}

/* MAIN — 2 column grid */
.hps-contact__main {
  padding-top: clamp(2rem, 4vh, 3.5rem);
  padding-bottom: clamp(4rem, 8vh, 7rem);
}
.hps-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 900px) {
  .hps-contact__grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

/* Column heads — shared styling for form col + info col */
.hps-contact__col-head {
  display: flex;
  flex-direction: column;
  gap: var(--hps-space-2);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.hps-contact__col-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .85rem;
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  background: var(--hps-fg-04);
  width: max-content;
  font-family: var(--hps-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hps-contact__col-eyebrow .hps-eyebrow-num {
  color: var(--hps-fg);
}
.hps-contact__col-title {
  font-family: var(--hps-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--hps-fg);
  margin: 0;
  padding-bottom: .12em;
}
.hps-contact__col-title em {
  font-family: var(--hps-editorial);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.025em;
  color: var(--hps-fg-70);
}
.hps-contact__col-sub {
  font-family: var(--hps-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hps-fg-70);
  margin: 0;
  max-width: 42ch;
}

/* FORM — left col */
.hps-contact__form-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background:
    radial-gradient(140% 140% at 0% 0%, rgba(184,212,255,.04), transparent 55%),
    radial-gradient(140% 140% at 100% 100%, rgba(246,200,225,.03), transparent 55%),
    rgba(255,255,255,.02);
  border: 1px solid var(--hps-fg-08);
  border-radius: 24px;
  isolation: isolate;
  transition: border-color .4s var(--hps-ease);
}
.hps-contact__form-wrap::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: 2;
}
.hps-contact__form-wrap:focus-within::before {
  opacity: 1;
}
.hps-contact__form-wrap:focus-within {
  border-color: var(--hps-fg-30);
}

.hps-contact__form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.4rem);
  position: relative;
  z-index: 1;
}

.hps-contact__field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
}
.hps-contact__label {
  font-family: var(--hps-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
}
.hps-contact__req {
  color: var(--hps-fg);
  margin-left: .15rem;
}
.hps-contact__hint {
  font-family: var(--hps-body);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--hps-fg-30);
  margin-left: .25rem;
}
.hps-contact__input {
  display: block;
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--hps-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hps-fg);
  background: var(--hps-fg-04);
  border: 1px solid var(--hps-fg-15);
  border-radius: 12px;
  outline: none;
  transition: border-color .25s var(--hps-ease), background .25s var(--hps-ease);
  resize: none;
  -webkit-appearance: none;
}
.hps-contact__input::placeholder {
  color: var(--hps-fg-30);
}
.hps-contact__input:hover {
  border-color: var(--hps-fg-30);
}
.hps-contact__input:focus {
  border-color: var(--hps-fg);
  background: rgba(255,255,255,.05);
}
.hps-contact__textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--hps-body);
}
.hps-contact__counter {
  position: absolute;
  right: .75rem;
  bottom: .65rem;
  font-family: var(--hps-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--hps-fg-30);
  pointer-events: none;
}

/* Honeypot — invisible to humans, traps bots */
.hps-contact__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Submit button — HPS primary white pill */
.hps-contact__actions {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: .5rem;
}
.hps-contact__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1rem 1.6rem;
  font-family: var(--hps-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 100vw;
  background: var(--hps-fg);
  color: #000;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  width: max-content;
  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-contact__submit:hover {
  transform: translateY(-1px);
  background: #f4f4f4;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06) inset,
    0 24px 50px -22px rgba(255,255,255,.5);
}
.hps-contact__submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}
.hps-contact__submit-arrow {
  display: inline-block;
  transition: transform .35s var(--hps-ease);
}
.hps-contact__submit:hover .hps-contact__submit-arrow {
  transform: translateX(3px);
}
.hps-contact__legal {
  font-family: var(--hps-body);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--hps-fg-30);
  margin: 0;
  max-width: 50ch;
}
.hps-contact__legal a {
  color: var(--hps-fg-70);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hps-contact__legal a:hover {
  color: var(--hps-fg);
}

/* Success / error states */
.hps-contact__success,
.hps-contact__error {
  margin-top: 1.5rem;
}
.hps-contact__success[hidden],
.hps-contact__error[hidden] {
  display: none;
}
.hps-contact__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(184,212,255,.045);
  border: 1px solid rgba(184,212,255,.2);
  border-radius: 16px;
  position: relative;
  z-index: 1;
}
.hps-contact__success-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hps-fg);
  color: #000;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .25rem;
}
.hps-contact__success-title {
  font-family: var(--hps-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--hps-fg);
  margin: 0;
}
.hps-contact__success-sub {
  font-family: var(--hps-body);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--hps-fg-70);
  margin: 0;
}
.hps-contact__error {
  padding: 1rem 1.25rem;
  background: rgba(255,80,80,.06);
  border: 1px solid rgba(255,80,80,.25);
  border-radius: 12px;
  font-family: var(--hps-body);
  font-size: .9rem;
  color: var(--hps-fg-70);
}
.hps-contact__error a {
  color: var(--hps-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* INFO column — right */
.hps-contact__info {
  display: flex;
  flex-direction: column;
}
.hps-contact__info-stack {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.hps-contact__info-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.4rem 1.5rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--hps-fg-08);
  border-radius: 16px;
  transition: border-color .35s var(--hps-ease), background .35s var(--hps-ease);
}
.hps-contact__info-block:hover {
  border-color: var(--hps-fg-30);
  background: rgba(255,255,255,.035);
}
.hps-contact__info-block--featured {
  background:
    radial-gradient(140% 140% at 0% 0%, rgba(184,212,255,.06), transparent 60%),
    rgba(255,255,255,.02);
  border-color: var(--hps-fg-15);
}
.hps-contact__info-label {
  font-family: var(--hps-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
}
.hps-contact__info-value {
  font-family: var(--hps-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hps-fg);
  margin: 0;
}
.hps-contact__info-value-link {
  font-family: var(--hps-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hps-fg);
  text-decoration: none;
  transition: opacity .25s var(--hps-ease);
}
.hps-contact__info-value-link:hover {
  opacity: .7;
}
.hps-contact__info-value-link + .hps-contact__info-value-link {
  margin-top: .15rem;
}
.hps-contact__info-value-line {
  font-family: var(--hps-body);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--hps-fg);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.hps-contact__info-tag {
  font-family: var(--hps-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
  padding: .2rem .5rem;
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  background: var(--hps-fg-04);
}
.hps-contact__info-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
  padding: .7rem 1.1rem;
  font-family: var(--hps-body);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--hps-fg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  text-decoration: none;
  width: max-content;
  transition: background .35s var(--hps-ease), border-color .35s var(--hps-ease), transform .35s var(--hps-ease);
}
.hps-contact__info-cta:hover {
  background: var(--hps-fg);
  color: #000;
  border-color: var(--hps-fg);
  transform: translateY(-1px);
}
.hps-contact__info-cta-arrow {
  transition: transform .35s var(--hps-ease);
}
.hps-contact__info-cta:hover .hps-contact__info-cta-arrow {
  transform: translateX(3px);
}
.hps-contact__info-social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hps-contact__social-link {
  display: inline-flex;
  align-items: center;
  padding: .45rem .85rem;
  font-family: var(--hps-body);
  font-size: .85rem;
  color: var(--hps-fg-70);
  background: var(--hps-fg-04);
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  text-decoration: none;
  transition: color .25s var(--hps-ease), border-color .25s var(--hps-ease), background .25s var(--hps-ease);
}
.hps-contact__social-link:hover {
  color: var(--hps-fg);
  border-color: var(--hps-fg-30);
  background: rgba(255,255,255,.05);
}

/* TRUST STRIP */
.hps-contact__trust {
  padding-top: clamp(2rem, 4vh, 3rem);
  padding-bottom: clamp(4rem, 7vh, 6rem);
  border-top: 1px solid var(--hps-fg-08);
}
.hps-contact__trust-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}
.hps-contact__trust-label {
  font-family: var(--hps-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hps-fg-30);
}
.hps-contact__trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.hps-contact__trust-logo {
  height: 1.75rem;
  width: auto;
  opacity: .55;
  filter: saturate(0%) brightness(1.1);
  transition: opacity .35s var(--hps-ease), filter .35s var(--hps-ease);
}
.hps-contact__trust-logo:hover {
  opacity: .85;
  filter: saturate(0%) brightness(1.4);
}
@media (max-width: 600px) {
  .hps-contact__trust-logo {
    height: 1.4rem;
  }
}

/* Hide CTA form on contact page (we have a body form already) */
.rg-footer--no-cta .rg-footer-top {
  display: none !important;
}
.rg-footer--no-cta .rg-footer-bottom {
  padding-top: 0;
  border-top: none;
}

/* ============================================================
   LEGAL DOCUMENT — HPS aesthetic for /privacy-policy /terms-of-use
   Hero + sticky TOC + structured prose with anchor links.
   ============================================================ */

.hps-legal {
  background: var(--hps-bg);
  color: var(--hps-fg);
  font-family: var(--hps-body);
  -webkit-font-smoothing: antialiased;
  /* CRITICAL: override .hps { overflow: hidden } so position:sticky works */
  overflow: visible;
  scroll-behavior: smooth;
}
.hps-legal,
.hps-legal * { box-sizing: border-box; }
/* Smooth scroll when clicking TOC anchors */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html, .hps-legal { scroll-behavior: auto; }
}

/* Hero */
.hps-legal__hero {
  padding: clamp(6rem, 12vh, 9rem) clamp(1.25rem, 4vw, 4rem) clamp(3rem, 5vh, 4.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hps-legal__hero::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;
}
.hps-legal__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--hps-space-3);
}
.hps-legal__hero .hps-display {
  text-align: center;
}
.hps-legal__hero .hps-tagline {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto;
}

/* Meta row */
.hps-legal__meta {
  display: inline-flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--hps-space-3);
  padding: .65rem 1.1rem;
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  background: var(--hps-fg-04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--hps-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
}
.hps-legal__meta-divider {
  width: 1px;
  height: 12px;
  background: var(--hps-fg-15);
}
.hps-legal__meta-value {
  color: var(--hps-fg);
  letter-spacing: .04em;
}

/* MAIN — TOC + prose */
.hps-legal__body {
  padding: clamp(2rem, 4vh, 3rem) clamp(1.25rem, 4vw, 4rem) clamp(5rem, 8vh, 7rem);
  background: var(--hps-bg);
}
.hps-legal__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) {
  .hps-legal__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Sticky Table of Contents */
.hps-legal__toc {
  position: sticky;
  top: clamp(70px, 8vh, 100px);
  align-self: start;
  max-height: calc(100vh - clamp(90px, 10vh, 120px));
  overflow-y: auto;
  padding: 1.25rem 1.4rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--hps-fg-08);
  border-radius: 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Soft entrance when it pins */
  transition: box-shadow .4s var(--hps-ease), border-color .4s var(--hps-ease), background .4s var(--hps-ease);
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--hps-fg-15) transparent;
  /* Holographic edge accent when pinned */
  z-index: 5;
}
.hps-legal__toc::-webkit-scrollbar { width: 4px; }
.hps-legal__toc::-webkit-scrollbar-track { background: transparent; }
.hps-legal__toc::-webkit-scrollbar-thumb {
  background: var(--hps-fg-15);
  border-radius: 100vw;
}
.hps-legal__toc::-webkit-scrollbar-thumb:hover { background: var(--hps-fg-30); }

/* When pinned (active class added by JS when stuck) — subtle lift */
.hps-legal__toc.is-pinned {
  background: rgba(255,255,255,.04);
  border-color: var(--hps-fg-15);
  box-shadow:
    0 1px 0 rgba(255,255,255,.02) inset,
    0 30px 60px -30px rgba(0,0,0,.6);
}
@media (max-width: 900px) {
  .hps-legal__toc {
    position: static;
    max-height: none;
    order: -1;
  }
}
.hps-legal__toc-label {
  font-family: var(--hps-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hps-fg-50);
  margin: 0 0 .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hps-legal__toc-label::before {
  content: '';
  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;
}
.hps-legal__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: relative;
}
/* Vertical track behind the list */
.hps-legal__toc-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--hps-fg-08);
  border-radius: 100vw;
}
.hps-legal__toc-list a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .5rem .7rem .5rem 1rem;
  font-family: var(--hps-body);
  font-size: .85rem;
  line-height: 1.35;
  color: var(--hps-fg-50);
  text-decoration: none;
  border-radius: 0 8px 8px 0;
  transition: background .3s var(--hps-ease), color .3s var(--hps-ease), padding-left .35s var(--hps-ease);
}
/* Per-link indicator dot */
.hps-legal__toc-list a::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hps-fg-30);
  transition: transform .35s var(--hps-ease), background .25s var(--hps-ease), box-shadow .35s var(--hps-ease);
}
.hps-legal__toc-list a:hover {
  color: var(--hps-fg-70);
  background: rgba(255,255,255,.02);
}
.hps-legal__toc-list a:hover::before {
  transform: translateY(-50%) scale(1);
}
/* Active section — pronounced indicator */
.hps-legal__toc-list a.is-active {
  color: var(--hps-fg);
  background: rgba(184,212,255,.04);
  padding-left: 1.15rem;
  font-weight: 500;
}
.hps-legal__toc-list a.is-active::before {
  transform: translateY(-50%) scale(2);
  background: var(--hps-fg);
  box-shadow: 0 0 0 3px rgba(184,212,255,.15), 0 0 14px rgba(255,255,255,.4);
}
.hps-legal__toc-num {
  font-family: var(--hps-mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--hps-fg-30);
  font-variant-numeric: tabular-nums;
  min-width: 1.5em;
  flex-shrink: 0;
  transition: color .25s var(--hps-ease);
}
.hps-legal__toc-list a:hover .hps-legal__toc-num {
  color: var(--hps-fg-50);
}
.hps-legal__toc-list a.is-active .hps-legal__toc-num {
  color: var(--hps-fg);
}

/* PROSE */
.hps-legal__prose {
  font-family: var(--hps-body);
  color: var(--hps-fg-70);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 72ch;
}
.hps-legal__prose .intro {
  padding: 1.5rem 1.75rem;
  background: rgba(184,212,255,.04);
  border-left: 2px solid var(--hps-fg-30);
  border-radius: 0 12px 12px 0;
  margin-bottom: 2.5rem;
}
.hps-legal__prose .intro p {
  margin: 0 0 .75rem;
  color: var(--hps-fg);
}
.hps-legal__prose .intro p:last-child {
  margin-bottom: 0;
}
.hps-legal__prose .intro strong {
  color: var(--hps-fg);
}
.hps-legal__prose h2 {
  font-family: var(--hps-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--hps-fg);
  margin: 3.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hps-fg-08);
  scroll-margin-top: 90px;
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.hps-legal__prose h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.hps-legal__prose h2 .hps-legal__h2-num {
  font-family: var(--hps-mono);
  font-size: .85rem;
  font-weight: 500;
  color: var(--hps-fg-30);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  min-width: 2.4em;
}
.hps-legal__prose h3 {
  font-family: var(--hps-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--hps-fg);
  margin: 2rem 0 .75rem;
  scroll-margin-top: 90px;
}
.hps-legal__prose p {
  margin: 0 0 1rem;
}
.hps-legal__prose p:last-child {
  margin-bottom: 0;
}
.hps-legal__prose ul,
.hps-legal__prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
}
.hps-legal__prose li {
  margin-bottom: .5rem;
  line-height: 1.65;
}
.hps-legal__prose li::marker {
  color: var(--hps-fg-30);
}
.hps-legal__prose strong {
  color: var(--hps-fg);
  font-weight: 500;
}
.hps-legal__prose em { color: var(--hps-fg-70); }
.hps-legal__prose a {
  color: var(--hps-fg);
  text-decoration: underline;
  text-decoration-color: var(--hps-fg-30);
  text-underline-offset: 3px;
  transition: text-decoration-color .25s var(--hps-ease);
}
.hps-legal__prose a:hover {
  text-decoration-color: var(--hps-fg);
}
.hps-legal__prose .all-caps,
.hps-legal__prose .all-caps li {
  font-family: var(--hps-mono);
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hps-fg-70);
}
.hps-legal__prose code {
  font-family: var(--hps-mono);
  font-size: .9em;
  color: var(--hps-fg);
  background: var(--hps-fg-04);
  padding: .1em .4em;
  border-radius: 6px;
}

/* Footer of the doc: back-to-top + contact card */
.hps-legal__doc-footer {
  margin-top: clamp(4rem, 7vh, 6rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hps-fg-08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.hps-legal__doc-footer-text {
  font-family: var(--hps-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hps-fg-50);
}
.hps-legal__back-top {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  font-family: var(--hps-body);
  font-size: .85rem;
  color: var(--hps-fg);
  background: var(--hps-fg-04);
  border: 1px solid var(--hps-fg-15);
  border-radius: 100vw;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--hps-ease), border-color .25s var(--hps-ease);
}
.hps-legal__back-top:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--hps-fg-30);
}