.wrap { max-width: 1200px; margin: 0 auto; }
.wrap > h2 { font-size: 34px; margin: 0; }

/* ============ WRAPPER: shared variables (this block was missing) ============ */
.portfolio-flow-wrap {
  position: relative;
  margin-top: 64px;                 /* moved here from .portfolio-flow so the glow lines up with the grid */

  --flow-line: rgba(255, 255, 255, .58);

  /* Glow controls */
  --gradient-width: 1200px;
  --gradient-height: 800px;
  --gradient-color-primary: #ff00fff7;
  --gradient-color-fade: rgba(141, 0, 196, 0.4);

  /* Dot controls */
  --dot-size: 11px;
  --dot-x: -8px;
  --dot-y: -8px;
}

/* ============ GLOW: the only thing that clips ============ */
.portfolio-flow__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.portfolio-flow__glow::before {
  content: '';
  position: absolute;
  top: -148px;
  left: 50%;
  width: var(--gradient-width);
  height: var(--gradient-height);
  transform: translateX(-50%);
  margin-top: calc(var(--gradient-height) * -0.5);
  background: radial-gradient(
    ellipse at center,
    var(--gradient-color-primary) 0%,
    var(--gradient-color-fade) 50%,
    transparent 70%
  );
}

/* ============ GRID: no overflow:hidden, so the dots can hang outside ============ */
.portfolio-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--flow-line);
}

/* (old .portfolio-flow::before and .portfolio-flow > * rules removed) */

.portfolio-flow__step {
  position: relative;
  min-height: 205px;
  padding: 30px 28px 12px 0;
  border-right: 1px solid rgba(255, 255, 255, .22);
}
.portfolio-flow__step:not(:first-child) { padding-left: 28px; }
.portfolio-flow__step:last-child { border-right: 0; }

.portfolio-flow__step::before {
  position: absolute;
  top: var(--dot-y);
  left: var(--dot-x);
  width: var(--dot-size);
  height: var(--dot-size);
  border: 2px solid #fff;
  border-radius: 50%;
  background: #b400ee;
  content: "";
}

.portfolio-flow__number {
  color: #a9efff; font-size: 10px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
}
.portfolio-flow__step h3 { margin: 30px 0 10px; font-size: 25px; line-height: 1.1; }
.portfolio-flow__step p {
  max-width: 290px; margin: 0;
  color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.5;
}

@media (max-width: 900px) {
  .portfolio-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .portfolio-flow-wrap {
    --dot-x: -6px;
    --dot-y: -6px;
  }
  .portfolio-flow__step {
    min-height: 180px; padding: 26px 20px 20px 0;
    border-top: 1px solid var(--flow-line);
  }
  .portfolio-flow__step:not(:first-child) { padding-left: 20px; }
  .portfolio-flow__step:nth-child(odd) { padding-left: 0; }
  .portfolio-flow__step:nth-child(even) { border-right: 0; }
}

@media (max-width: 640px) {
  .portfolio-flow { grid-template-columns: 1fr; }
  .portfolio-flow-wrap {
    /* Centers the dot on the 1px left border line, whatever --dot-size is */
    --dot-x: calc(var(--dot-size) / -2 - 1px);
    --dot-y: 2px;     /* raise or lower the dots here */
  }
  .portfolio-flow__step,
  .portfolio-flow__step:not(:first-child),
  .portfolio-flow__step:nth-child(odd) {
    min-height: 0; padding: 24px 0 24px 22px;
    border-top: 0; border-right: 0; border-left: 1px solid var(--flow-line);
  }
  .portfolio-flow__step:first-child { padding-top: 0; }
  .portfolio-flow__step h3 { margin: 0 0 8px; }
}

/* ============ VISUALS ============ */

.portfolio-flow__visual {
  height: 96px;
  margin-bottom: 22px;
}
.portfolio-flow__visual svg {
  display: block;
  width: 100%;
  max-width: 250px;
  height: 100%;
  overflow: visible;
}
.portfolio-flow__visual text {
  font-family: inherit;
  font-size: 8.5px;
  letter-spacing: .04em;
  fill: rgba(255, 255, 255, .62);
}

.portfolio-flow--visuals .portfolio-flow__step h3 { margin: 12px 0 10px; }
.portfolio-flow--visuals .portfolio-flow__step { min-height: 0; padding-bottom: 20px; }

/* Shared SVG tokens */
.pf-card   { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .38); }
.pf-line   { fill: rgba(255, 255, 255, .32); }
.pf-input  { fill: none; stroke: rgba(255, 255, 255, .3); }
.pf-accent { fill: #ffa7e2; }
.pf-cyan   { fill: #abdeff; }
.pf-ghost  { fill: rgba(255, 255, 255, .26); }
.pf-axis   { stroke: rgba(255, 255, 255, .35); stroke-width: 1; fill: none; }

.pf-pill        { fill: none; stroke: rgba(255, 255, 255, .26); }
.pf-pill--on    { fill: rgba(169, 239, 255, .14); stroke: #a9efff; }
.pf-pill-text--on { fill: #a9efff !important; font-weight: 700; }

/* Reveal animation (JS adds .is-animating when scrolled into view) */
.portfolio-flow__step:nth-child(2) { --pf-delay: .2s; }
.portfolio-flow__step:nth-child(3) { --pf-delay: .4s; }
.portfolio-flow__step:nth-child(4) { --pf-delay: .6s; }

@keyframes pf-grow-x { from { transform: scaleX(0); } }
@keyframes pf-grow-y { from { transform: scaleY(0); } }
@keyframes pf-draw   { from { stroke-dashoffset: 1; } }
@keyframes pf-fade   { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .is-animating .pf-grow-x { transform-box: fill-box; transform-origin: left center;
    animation: pf-grow-x .9s cubic-bezier(.2,.7,.2,1) var(--pf-delay, 0s) both; }
  .is-animating .pf-grow-y { transform-box: fill-box; transform-origin: center bottom;
    animation: pf-grow-y .9s cubic-bezier(.2,.7,.2,1) var(--pf-delay, 0s) both; }
  .is-animating .pf-draw   { animation: pf-draw 1.2s ease-out var(--pf-delay, 0s) both; }
  .is-animating .pf-fade   { animation: pf-fade .8s ease-out calc(var(--pf-delay, 0s) + .5s) both; }
}

@media (max-width: 640px) {
  .portfolio-flow { grid-template-columns: 1fr; }

  .portfolio-flow-wrap {
    --step-pad: 22px;    /* single source of truth for the step's left padding */
    --dot-nudge: 0px;    /* fine-tune the dot up/down relative to the number */
  }

  .portfolio-flow__step,
  .portfolio-flow__step:not(:first-child),
  .portfolio-flow__step:nth-child(odd) {
    min-height: 0;
    padding: 24px 0 24px var(--step-pad);
    border-top: 0; border-right: 0; border-left: 1px solid var(--flow-line);
  }
  .portfolio-flow__step:first-child { padding-top: 0; }
  .portfolio-flow__step h3 { margin: 0 0 8px; }

  /* Turn off the step-anchored dot on mobile... */
  .portfolio-flow__step::before { display: none; }

  /* ...and hang the dot off the number instead */
  .portfolio-flow__number {
    position: relative;
    display: block;
  }
  .portfolio-flow__number::before {
    content: "";
    position: absolute;
    top: 50%;
    /* back out the step padding, then center on the 1px border line */
    left: calc(var(--step-pad) * -1 - var(--dot-size) / 2 - .5px);
    width: var(--dot-size);
    height: var(--dot-size);
    box-sizing: border-box;
    transform: translateY(calc(-50% + var(--dot-nudge)));
    border: 2px solid #fff;
    border-radius: 50%;
    background: #b400ee;
  }
}