/* ============================================================
   OFF AXIS — Marketing site
   Black canvas. One animated aurora centerpiece built from a
   bitmap swirl + purple/blue radial glow. General Sans only.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: #000; color: #EDEDED;
  font-family: "General Sans", system-ui, sans-serif;
  overflow-x: clip; /* prevent horizontal scroll without breaking sticky */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.page { width: 100%; position: relative; }

/* ============================================================
   GRAIN — SVG noise overlay across the whole page.
   Fixed-position, very low opacity, multiply blended so it
   reads as analog film texture, not visual noise.
   ============================================================ */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ============================================================
   TOP NAV — flat black bar, logo left, CTA pill right.
   ============================================================ */
.topnav {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 52px;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topnav__brand {
  height: 64px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.topnav__brand img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

/* CTA — stacked "Let's / talk." with entrance + idle glow */
@keyframes cta-enter-top {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cta-enter-bot {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cta-glow-pulse {
  0%, 100% { color: #938CED; }
  50%       { color: #c0baff; }
}

.topnav__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 0.92;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.topnav__cta:hover { opacity: 0.75; }

.topnav__cta span {
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: -0.03em;
  color: #EDEDED;
  animation: cta-enter-top 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.topnav__cta em {
  font-family: "General Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: -0.03em;
  color: #938CED;
  animation:
    cta-enter-bot  0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both,
    cta-glow-pulse 3.5s ease-in-out infinite 1.2s;
}

@media (max-width: 639px) {
  .topnav { padding: 14px 24px; }
  .topnav__brand { height: 50px; }
  .topnav__cta span,
  .topnav__cta em { font-size: 20px; }
}

/* ============================================================
   HERO BAND — full-width horizontal bitmap-swirl strip with
   a centered black-block headline overlay.
   ============================================================ */
.hero-band {
  position: relative;
  width: 100%;
  height: clamp(360px, 52vh, 560px);
  background: #000;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Pull the band up by 1px so it overlaps the nav and any
     sub-pixel seam disappears under it. */
  margin-top: -1px;
}

/* The swirl wrapper holds an oversized track that scrolls
   sideways. Track width is 200% so the bitmap (tiled across
   it) loops perfectly when shifted by -50%. */
.hero-band__swirl {
  position: absolute; inset: 0;
  overflow: hidden;
  /* Long, soft fade on the bottom edge so the swirl band
     dissolves into the About section's black. Top butts the
     nav with no seam. */
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 55%,
    rgba(0,0,0,0.7) 78%,
    rgba(0,0,0,0.25) 92%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 55%,
    rgba(0,0,0,0.7) 78%,
    rgba(0,0,0,0.25) 92%,
    transparent 100%);
}
.hero-band__swirl-track {
  position: absolute;
  /* Extend a few px past the top/bottom so any pale edge in
     the source bitmap or sub-pixel rendering is hidden under
     the parent's overflow:hidden + adjacent black surfaces. */
  inset: -4px 0;
  width: 200%;
  background-image: url('../../assets/swirls/horizontal-conf02-purple.jpg');
  background-repeat: repeat-x;
  background-size: 50% 100%;
  background-position: 0 center;
  mix-blend-mode: screen;
  filter: contrast(1.06) saturate(1.08) brightness(0.95);
  animation: hero-pan 28s linear infinite;
}

@keyframes hero-pan {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Centered headline blocks — two stacked lines, each in a
   black block with brand-purple text inside. */
.hero-band__blocks {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.hero-band__block {
  display: inline-block;
  background: #000;
  color: #938CED;
  padding: 4px 18px 8px;
  font-family: "General Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 84px);
  line-height: 1.0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .hero-band__swirl-track { animation: none !important; }
}

/* ============================================================
   SERVICES — 2×2 card grid, hairline borders, hover reveals
   ============================================================ */
.services {
  padding: 120px 48px;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.services__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.services__head {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 64px;
}
.services__label {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #938CED;
}
.services__h {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
  color: #EDEDED;
}
.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
}
@keyframes card-seq-glow {
  0%, 50%, 100% { background: transparent; }
  18%, 32% { background: rgba(147, 140, 237, 0.09); }
}
.service-card {
  padding: 64px 48px;
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 20px;
  transition: background 320ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: card-seq-glow 12s ease-in-out infinite;
}
.service-card:nth-child(2) { animation-delay: 3s; }
.service-card:nth-child(3) { animation-delay: 6s; }
.service-card:nth-child(4) { animation-delay: 9s; }
.service-card:nth-child(even) { border-right: none; }
.service-card:nth-child(3),
.service-card:nth-child(4) { border-bottom: none; }
.service-card:hover { animation: none; background: rgba(147, 140, 237, 0.1); }
.service-card__num {
  font-family: "General Sans", sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #938CED;
}
@keyframes card-title-seq-glow {
  0%, 50%, 100% { color: #EDEDED; }
  18%, 32% { color: #938CED; }
}
.service-card__title {
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: #EDEDED;
  animation: card-title-seq-glow 12s ease-in-out infinite;
}
.service-card:nth-child(2) .service-card__title { animation-delay: 3s; }
.service-card:nth-child(3) .service-card__title { animation-delay: 6s; }
.service-card:nth-child(4) .service-card__title { animation-delay: 9s; }
.service-card:hover .service-card__title { animation: none; color: #938CED; }
.service-card__desc {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(237,237,237,0.65);
  margin: 0;
}

@media (max-width: 880px) {
  .services__grid { grid-template-columns: 1fr; }
  .service-card { border-right: none; }
  .service-card:nth-child(4) { border-bottom: none; }
  .service-card:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,0.1); }
}

@keyframes service-divider-in {
  from { opacity: 0; transform: scaleX(0.4); }
  to   { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 639px) {
  .services { padding: 72px 24px 56px; }
  .services__head { margin-bottom: 28px; }
  .services__grid {
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .service-card {
    border: none !important;
    padding: 40px 0;
    border-radius: 0;
    background: transparent !important;
    animation: none !important;
    position: relative;
    transition: none;
  }
  /* gradient divider above each card */
  .service-card::before {
    content: '';
    display: block;
    height: 1px;
    margin-bottom: 40px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(147,140,237,0.12) 15%,
      rgba(147,140,237,0.35) 50%,
      rgba(147,140,237,0.12) 85%,
      transparent 100%
    );
  }
  .service-card:last-child::after { content: none; }
  /* kill the random desktop glow on mobile */
  .service-card__title { animation: none !important; }
  .service-card__num { font-size: 13px; }

  /* scroll-active highlight */
  .service-card.is-active .service-card__title {
    color: #938CED;
    transition: color 450ms ease;
  }
  .service-card.is-active .service-card__num {
    color: #fff;
    transition: color 450ms ease;
  }
  .service-card .service-card__title { transition: color 450ms ease; }
  .service-card .service-card__num   { transition: color 450ms ease; }
}

/* ============================================================
   PROCESS — "What We Do" scroll-driven info graphic.
   The section is 500vh tall so we have ~4 viewport heights of
   scroll. Inside, a sticky viewport stays pinned at the top of
   the screen, and a single light-purple fill bar sweeps from
   left → right across four labeled panels.
   ============================================================ */
.process {
  position: relative;
  background: #000;
  height: 440vh;
  border-top: 1px solid rgba(237,237,237,0.08);
}
.process__viewport {
  position: sticky; top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  overflow: hidden;
}
.process__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex; flex-direction: column;
  padding: 40px 48px 52px;
  box-sizing: border-box;
}

/* Headline block above the track */
.process__head {
  display: flex; flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 28px;
}
.process__label {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #938CED;
}
.process__h {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  color: #EDEDED;
}
.process__lead {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.5;
  color: rgba(237,237,237,0.85);
  margin: 0;
}

/* The track is the bar itself */
.process__track {
  position: relative;
  flex: 1;
  min-height: 200px;
  background: #15121d;
  border: 1px solid rgba(237,237,237,0.12);
  border-radius: 14px;
  overflow: hidden;
}
.process__fill-body {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: calc(var(--progress, 0) * 100%);
  background: #938CED;
  z-index: 1;
  transition: width 120ms linear;
}
.process__fill-cap {
  /* A half-circle bulging right at the fill's leading edge. */
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--progress, 0) * 100%);
  aspect-ratio: 1 / 2;     /* width = half height → half-circle */
  background: #938CED;
  border-radius: 0 999px 999px 0;
  transform: translateX(-1px);  /* nudge to avoid sub-pixel seam */
  z-index: 1;
  /* Fade the cap out when progress is near 0 so it doesn't appear
     as a dot at the left edge before scrolling begins. */
  opacity: min(1, calc(var(--progress, 0) * 15));
  transition: left 120ms linear, opacity 400ms ease;
}
.process__panels {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 2;
}
.panel {
  border-left: 1px solid rgba(237,237,237,0.18);
  padding: 28px 28px 32px;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
}
.panel:first-child { border-left: none; }
.panel__num {
  width: 44px; height: 44px;
  border: 1px solid rgba(237,237,237,0.55);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: rgba(237,237,237,0.9);
  transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
              color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.panel__label {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #BDB9F4;
  transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: flex-start;
}
.panel.is-passed .panel__num {
  border-color: #000;
  color: #000;
}
.panel.is-passed .panel__label {
  color: #000;
}

/* Live progress meta — small caption under the bar */
.process__progress {
  margin-top: 18px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px;
}
.process__progress-meta {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(237,237,237,0.5);
}
.process__progress-meta em {
  font-style: normal;
  color: #EDEDED;
}
.process__progress-name {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(237,237,237,0.9);
  transition: color 200ms;
}

/* Step description — fades + rises in below the progress row */
.process__desc {
  margin-top: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.process__step-heading {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #938CED;
  padding-bottom: 12px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.process__step-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #938CED;
  margin: 10px auto 0;
  opacity: 0.6;
}
.process__step-heading.is-fading {
  opacity: 0;
  transform: translateY(10px);
}
.process__desc [data-desc-text] {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.65;
  color: rgba(237,237,237,0.88);
  margin: 0;
  max-width: 72ch;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.process__desc [data-desc-text].is-fading {
  opacity: 0;
  transform: translateY(10px);
}

/* ============================================================
   HERO — black canvas + centered aurora + headline stack
   ============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  background: #000;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 160px 32px 80px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* ============================================================
   SWIRL RAIN — the centerpiece. The arches bitmap scrolls
   downward in three parallax layers at different speeds and
   horizontal offsets, screen-blended so the black background
   of the bitmap drops out. Edges fade to transparent on all
   four sides so the rain melts into the page.
   ============================================================ */
.swirl-rain {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(880px, 108vmin, 1560px);
  height: clamp(620px, 80vmin, 1120px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Soft purple ambient glow sat behind the rain so the dither
   gets backlight rather than sitting on raw black. */
.swirl-rain__glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 95%; height: 95%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(147,140,237,0.24) 0%,
    rgba(147,140,237,0.10) 40%,
    rgba(21,12,190,0.05) 60%,
    transparent 82%
  );
  filter: blur(60px);
  animation: rain-glow 9s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

/* A single column of the bitmap, tiling vertically.
   Three variants at different sizes, speeds and offsets give
   the rain its parallax depth. Each layer is screen-blended,
   masked on all four edges so it fades into the page. */
.swirl-rain__layer {
  position: absolute;
  inset: 0;
  background-image: url('../../assets/swirls/three-swirls-purple.png');
  background-repeat: repeat;
  background-position: center top;
  mix-blend-mode: screen;
  filter: contrast(1.0) saturate(1.0) brightness(0.6);
  /* Very soft elliptical fade — solid only at the very
     center, then a long gradient ramp out to fully transparent
     well before the edge. Edges should disappear entirely. */
  mask-image: radial-gradient(ellipse 55% 60% at center,
    #000 0%,
    rgba(0,0,0,0.92) 18%,
    rgba(0,0,0,0.72) 38%,
    rgba(0,0,0,0.45) 58%,
    rgba(0,0,0,0.20) 75%,
    rgba(0,0,0,0.06) 88%,
    transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at center,
    #000 0%,
    rgba(0,0,0,0.92) 18%,
    rgba(0,0,0,0.72) 38%,
    rgba(0,0,0,0.45) 58%,
    rgba(0,0,0,0.20) 75%,
    rgba(0,0,0,0.06) 88%,
    transparent 100%);
}

/* Back layer — biggest tile, slowest fall, softest */
.swirl-rain__layer.l-back {
  background-size: 38vmin 38vmin;
  background-position: center top;
  opacity: 0.30;
  animation: rain-fall-back 38s linear infinite;
  filter: contrast(0.95) saturate(0.95) brightness(0.65) blur(0.5px);
}
/* Mid layer — medium tile, medium speed, slightly offset right */
.swirl-rain__layer.l-mid {
  background-size: 28vmin 28vmin;
  background-position: 4vmin top;
  opacity: 0.36;
  animation: rain-fall-mid 24s linear infinite;
  filter: contrast(1.0) saturate(1.0) brightness(0.72);
}
/* Front layer — smallest tile, fastest, offset left, sharper */
.swirl-rain__layer.l-front {
  background-size: 20vmin 20vmin;
  background-position: -5vmin top;
  opacity: 0.42;
  animation: rain-fall-front 16s linear infinite;
  filter: contrast(1.06) saturate(1.05) brightness(0.82);
}

/* The keyframes loop exactly one tile height — start at 0 and
   end at one full tile down, so the seamless tiling means the
   end frame is visually identical to the start frame (no reset
   jump). Each layer's distance matches its own tile size. */
@keyframes rain-fall-back {
  from { background-position-y: 0vmin; }
  to   { background-position-y: 38vmin; }
}
@keyframes rain-fall-mid {
  from { background-position-y: 0vmin; }
  to   { background-position-y: 28vmin; }
}
@keyframes rain-fall-front {
  from { background-position-y: 0vmin; }
  to   { background-position-y: 20vmin; }
}
@keyframes rain-glow {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.95); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}

/* Hero content — stacked above the aurora */
.hero__stack {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
}
.hero__h {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(52px, 7vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
  color: #EDEDED;
  max-width: 16ch;
}
.hero__h em { font-style: normal; }

/* ============================================================
   HEADLINE PULSE — Brands · Something · Say breathe together
   on a continuous sine, white → brand blue → white.
   ============================================================ */
.shimmer {
  color: #EDEDED;
  animation: word-pulse 7s ease-in-out infinite;
  will-change: color;
  display: inline-block;
}
/* All three words pulse simultaneously — no stagger. */
.hero__h .shimmer { animation-delay: 0s; }

@keyframes word-pulse {
  0%, 100% { color: #EDEDED; }
  50%      { color: #BDB9F4; }
}
.hero__sub {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.005em;
  color: rgba(237, 237, 237, 0.65);
  margin: -12px 0 0;
  max-width: 50ch;
}

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  background: #EDEDED; color: #000;
  border: none; border-radius: 999px;
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 220ms, color 220ms, transform 220ms;
}
.cta:hover { background: #938CED; color: #000; transform: translateY(-2px); }

.hero__nudge {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(237, 237, 237, 0.45);
  margin: -16px 0 0;
}

.hero__credit {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(237, 237, 237, 0.4);
  letter-spacing: 0.05em;
  z-index: 2;
}
.hero__credit em { font-style: normal; color: rgba(237,237,237,0.7); }

/* ============================================================
   ABOUT — same black, two columns, portrait slot
   ============================================================ */
.about {
  padding: 120px 48px 120px;
  background: #000;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.about::before {
  /* faint purple bloom on one edge so the page still feels alive */
  content: "";
  position: absolute;
  top: 20%; right: -12%;
  width: 50vw; height: 50vw; max-width: 700px; max-height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147,140,237,0.18), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.about__inner {
  position: relative; z-index: 2;
  max-width: 1480px; margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 88px;
  align-items: center;
}
.about__media {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 0;
}
.about__name {
  margin: 0 0 4px;
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #EDEDED;
  order: 1;
}
.about__portrait { order: 3; margin-top: 20px; }
.about__media-caption { order: 2; margin-top: 0; }
.about__media .about__placeholder {
  margin: 0;
  max-width: none;
  order: 4;
  margin-top: 20px;
}
.about__portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    url('../../assets/photos/founder.jpg') center / cover no-repeat,
    #1a1a1a;
  position: relative;
  isolation: isolate;
  filter: grayscale(1) contrast(1.05);
}
.about__portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(147,140,237,0.06) 0%,
    transparent 35%,
    rgba(0,0,0,0.25) 100%
  );
  pointer-events: none;
}
.about__media-caption {
  margin-top: 0;
  text-align: left;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(237,237,237,0.55);
}
.about__copy {
  display: flex; flex-direction: column; gap: 24px;
}
.about__copy::after { display: none; }
.about__copy {
  display: flex; flex-direction: column; gap: 24px;
}
.about__label {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #938CED;
}
.about__h {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
  color: #EDEDED;
  max-width: 18ch;
}
.about__lead {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0;
  color: rgba(237,237,237,0.92);
}
.about__body {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  color: rgba(237,237,237,0.72);
}
.about__body p { margin: 0 0 12px; }
.about__placeholder {
  border-left: 2px solid #938CED;
  padding: 6px 0 6px 16px;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(237,237,237,0.45);
  font-style: italic;
  max-width: 56ch;
}

/* ============================================================
   CONTACT — anchor target, same black, simple block
   ============================================================ */
.contact {
  min-height: auto;
  background: #000;
  padding: 120px 48px 120px;
  display: flex; flex-direction: column;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.contact::before {
  content: "";
  position: absolute;
  bottom: -30%; left: 50%;
  width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147,140,237,0.20), rgba(21,12,190,0.10) 45%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.contact__inner {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto; width: 100%;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 80px;
}
.contact__head { display: flex; flex-direction: column; gap: 18px;}
.contact__label {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #938CED;
}
.contact__h {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(72px, 10vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 0;
  color: #EDEDED;
}
.contact__h em {
  font-style: normal;
  color: #938CED;
}
.contact__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 88px;
  align-items: start;
  padding-top: 0;
  border-top: none;
}

/* LEFT — label + headline + lead, all stacked */
.contact__left { display: flex; flex-direction: column; gap: 32px;}

/* RIGHT — form + direct line */
.contact__right { display: flex; flex-direction: column; gap: 48px;}
.contact__lead {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.5;
  color: rgba(237,237,237,0.88);
  margin: 0;
  max-width: 44ch;
}
.contact__list {
  display: block;
  margin: 0; padding: 0;
}
.contact__list > div { display: block; }
.contact__list dt {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(237,237,237,0.5);
  margin: 0 0 12px;
}
.contact__list dd {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(237,237,237,0.92);
  margin: 0;
}
.contact__list dd a {
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.contact__list dd a:hover { color: #938CED; border-color: #938CED; }

/* RIGHT — form */
.contact__form {
  display: flex; flex-direction: column; gap: 22px;
}
.contact__field { display: flex; flex-direction: column; gap: 8px;}
.contact__field label {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(237,237,237,0.5);
}
.contact__field input,
.contact__field textarea {
  font-family: inherit; font-weight: 400; font-size: 16px;
  color: #EDEDED;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(237,237,237,0.25);
  padding: 10px 0 12px;
  outline: none;
  resize: none;
  transition: border-color 220ms;
}
.contact__field input::placeholder,
.contact__field textarea::placeholder {
  color: rgba(237,237,237,0.35);
}
.contact__field input:focus,
.contact__field textarea:focus {
  border-bottom-color: #938CED;
}

.contact__submit {
  align-self: flex-start;
  position: relative; overflow: hidden;
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 30px;
  border: 1px solid #EDEDED;
  background: transparent;
  color: #EDEDED;
  border-radius: 999px;
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  cursor: pointer;
  min-width: 220px;
  min-height: 52px;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.contact__submit::before {
  content: "";
  position: absolute; inset: 0;
  background: #938CED;
  border-radius: 999px;
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.contact__submit:hover::before { transform: translateY(0); }
.contact__submit:hover { color: #000; border-color: #938CED; }
.contact__submit > span { position: relative; z-index: 1; transition: opacity 220ms; }

/* .is-sent is added to the <form> element by JS */
.contact__form.is-sent .contact__field,
.contact__form.is-sent .contact__submit { display: none; }
.contact__form.is-sent .contact__confirm { display: flex; }

.contact__confirm {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 40px 0 20px;
}
.contact__confirm__title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  color: #EDEDED;
  letter-spacing: -0.01em;
}
.contact__confirm__body {
  font-size: 16px;
  color: rgba(237,237,237,0.6);
  line-height: 1.6;
}

.contact__foot {
  position: relative; z-index: 2;
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 22px;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(237,237,237,0.5);
  max-width: 1280px;
  width: 100%;
  margin-left: auto; margin-right: auto;
}
.contact__foot span:nth-child(2) { text-align: center; }
.contact__foot span:last-child { text-align: right; }

/* ============================================================
   SOCIALS — the only footer. Centered row of three text links.
   ============================================================ */
.socials {
  background: transparent;
  padding: 40px 32px 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.socials__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(237,237,237,0.28);
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237,237,237,0.8);
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.socials__link:hover {
  color: #fff;
  border-color: rgba(147,140,237,0.7);
  background: rgba(147,140,237,0.1);
}
.socials__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

/* ============================================================
   SCROLL REVEAL — any .reveal element starts hidden + 24px
   below, then fades + rises into place when its observer fires.
   Add `.reveal--left` for elements that should slide in from
   the left instead.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal--left { transform: translateX(-32px); }
.reveal.is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .shimmer { animation: none !important; }
  .service-card { animation: none !important; }
  .service-card__title { animation: none !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 880px) {
  .about, .contact { padding-left: 24px; padding-right: 24px; }
  .contact { padding-top: 64px; padding-bottom: 64px; overflow: hidden; }
  .about__inner { grid-template-columns: 1fr; gap: 40px; }
  .contact__grid { grid-template-columns: 1fr; gap: 36px; }
  .contact__list { grid-template-columns: 1fr 1fr; gap: 20px; }
  .contact__foot { grid-template-columns: 1fr; gap: 6px; }
  .contact__foot span { text-align: left !important; }
  .socials { flex-wrap: wrap; gap: 14px; padding: 28px 24px 36px; }
}

.mob-br { display: none; }
@media (max-width: 639px) { .mob-br { display: inline; } }

/* ---- About: smaller portrait on mobile, name → caption → photo → bio ---- */
@media (max-width: 639px) {
  .about { padding: 64px 24px 80px; }
  .about__name { order: 1; text-align: center; margin-bottom: 4px; }
  .about__media-caption { order: 2; text-align: center; }
  .about__portrait { max-width: 220px; margin: 16px auto 0; order: 3; }
  .about__media .about__placeholder { order: 4; margin-top: 20px; text-align: left; }
}

/* ---- Process: mobile one-step-at-a-time ---- */
@media (max-width: 768px) {
  .process__inner { padding: 28px 24px 64px; }
  .process__head { margin-bottom: 20px; gap: 10px; }
  .process__desc { margin-top: 14px; }
  .process__progress { margin-top: 14px; }

  /* Expand the panels container to 4× track width, then slide so
     only the active panel is visible behind the progress fill. */
  .process__panels {
    right: auto;
    width: 400%;
    transform: translateX(calc(-1 * var(--active-panel, 0) * 25%));
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .panel { padding: 16px 20px; }
  .panel__num { width: 36px; height: 36px; font-size: 14px; }
  .panel__label { font-size: 13px; letter-spacing: 0.12em; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .swirl-rain__glow, .swirl-rain__layer {
    animation: none !important;
  }
}