/*===============================
  /process — banner-style engagement stages.

  Each stage is a full-bleed horizontal band rather than a card in a grid, so
  the page reads top-to-bottom as a sequence. A single connector line runs
  through every band; the filled part of it, the node dots and the sticky rail
  at the top are all driven by scroll position (see the inline script on the
  page), which is what gives the step-to-step progression.

  Everything degrades to plain, readable bands with no JS: the classes below
  only add emphasis, they are never what makes content visible.
===============================*/

.process-page {
    --stage-pad: clamp(52px, 6vw, 88px);
    /* Distance from the band's left edge to the centre of the connector line. */
    --rail-x: 26px;
    --node: 14px;
}

/*--- Sticky progress rail -------------------------------------------------*/

.process-rail {
    position: sticky;
    /* Clears the sticky site header. */
    top: 78px;
    z-index: 8;
    padding: 14px 0;
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.process-rail-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.process-rail-count {
    flex: 0 0 auto;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-body);
    white-space: nowrap;
}

.process-rail-count b {
    color: var(--color-primary);
    font-weight: 700;
}

.process-rail-track {
    flex: 1 1 auto;
    height: 2px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.process-rail-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-primary);
    border-radius: 2px;
    /* Width is set by script on scroll; the transition only smooths it. */
    transition: width 0.15s linear;
}

.process-rail-name {
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-heading);
}

@media (max-width: 767px) {
    .process-rail {
        top: 66px;
        padding: 10px 0;
    }

    .process-rail-name {
        display: none;
    }

    .process-rail-count {
        font-size: 13px;
    }
}

/*--- The bands ------------------------------------------------------------*/

.process-stage {
    position: relative;
    padding: var(--stage-pad) 0;
    border-top: 1px solid var(--color-border);
    overflow: hidden;
    transition: background 0.5s ease;
}

.process-stage:last-child {
    border-bottom: 1px solid var(--color-border);
}

.process-stage:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.014);
}

/* The active band picks up a soft wash from the left so the eye knows where
   it is without anything moving. */
.process-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(150, 191, 72, 0.09), rgba(150, 191, 72, 0) 55%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.process-stage.is-active::before {
    opacity: 1;
}

.process-stage-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: clamp(20px, 2.5vw, 44px);
}

/*--- Parallax layers ------------------------------------------------------
  Three depths, each moved by --px/--py that the page script writes on scroll.
  The further back a layer is meant to sit, the more it lags the scroll:
  glow plate (slowest) → numeral → body copy, which drifts slightly ahead.
  Every offset defaults to 0, so with no script the bands are simply static.
--------------------------------------------------------------------------*/

/* Back layer: a soft bloom behind the numeral, so the right of the band has
   some depth instead of being flat black. */
.process-plate {
    position: absolute;
    top: 50%;
    right: -6%;
    width: min(760px, 58%);
    aspect-ratio: 1;
    transform: translate(0, calc(-50% + var(--py, 0px)));
    background: radial-gradient(circle at 50% 50%,
            rgba(150, 191, 72, 0.13),
            rgba(150, 191, 72, 0) 66%);
    opacity: 0;
    transition: opacity 0.9s ease;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.process-stage.is-active .process-plate {
    opacity: 1;
}

/* Middle layer: oversized numeral bleeding off the right edge — the banner's
   anchor. It also slides in horizontally as the band comes up. */
.process-ghost {
    position: absolute;
    top: 50%;
    right: -0.06em;
    transform: translate(var(--px, 0px), calc(-50% + var(--py, 0px)));
    z-index: 1;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(150px, 21vw, 300px);
    line-height: 0.78;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
    transition: -webkit-text-stroke-color 0.6s ease;
    will-change: transform;
    pointer-events: none;
    user-select: none;
}

.process-stage.is-active .process-ghost {
    -webkit-text-stroke-color: rgba(150, 191, 72, 0.2);
}

/* Front layer: the copy itself, nudged the other way. Kept small — this is
   depth, not movement you should be able to name. */
.process-body {
    transform: translateY(var(--py, 0px));
}

/*--- Reveal ---------------------------------------------------------------
  Gated behind .process-js, which the page script adds to <html> before it
  starts observing. If the script never runs the content is simply there.
--------------------------------------------------------------------------*/

.process-js .process-reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--r, 0) * 85ms);
}

.process-js .process-stage.is-in .process-reveal {
    opacity: 1;
    transform: none;
}

.process-step     { --r: 0; }
.process-timing   { --r: 1; }
.process-title    { --r: 2; }
.process-lead     { --r: 3; }
.process-detail-col:first-child { --r: 4; }
.process-detail-col:last-child  { --r: 5; }

/*--- Index column: connector line, node, stage label ----------------------*/

.process-index {
    position: relative;
    padding-left: 46px;
}

/* Track and fill hang off the stage's inner wrapper rather than the index
   cell: the wrapper is full-height at every breakpoint, whereas the index cell
   collapses to the height of its label once the columns stack. Both overshoot
   the band's padding so consecutive bands join into one unbroken line. */
.process-stage-inner::before,
.process-stage-inner::after {
    content: "";
    position: absolute;
    left: calc(var(--rail-x) - 1px);
    top: calc(var(--stage-pad) * -1);
    bottom: calc(var(--stage-pad) * -1);
    width: 2px;
}

.process-stage-inner::before {
    background: var(--color-border);
}

.process-stage-inner::after {
    background: linear-gradient(180deg, var(--color-primary), rgba(150, 191, 72, 0.35));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.process-stage.is-active .process-stage-inner::after,
.process-stage.is-passed .process-stage-inner::after {
    transform: scaleY(1);
}

.process-node {
    position: absolute;
    left: calc(var(--rail-x) - var(--node) / 2);
    top: 6px;
    width: var(--node);
    height: var(--node);
    border-radius: 50%;
    background: var(--color-gray-2);
    border: 2px solid var(--color-border);
    transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease,
        transform 0.4s ease;
}

.process-stage.is-passed .process-node {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.process-stage.is-active .process-node {
    border-color: var(--color-primary);
    background: var(--color-primary);
    transform: scale(1.25);
    box-shadow: 0 0 0 6px rgba(150, 191, 72, 0.16);
}

.process-step {
    display: inline-block;
    padding-top: 2px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-body);
    transition: color 0.4s ease;
}

.process-stage.is-active .process-step {
    color: var(--color-primary);
}

/*--- Body column ----------------------------------------------------------*/

.process-timing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-body);
}

.process-timing i {
    font-size: 12px;
    color: var(--color-primary);
}

.process-title {
    margin-bottom: 12px;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.12;
    color: var(--color-heading);
}

.process-lead {
    max-width: 46ch;
    margin-bottom: 34px;
    font-family: var(--font-primary);
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.5;
    color: var(--color-heading);
    opacity: 0.82;
}

.process-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 56px);
    max-width: 1020px;
}

.process-detail-col {
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.process-label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.process-detail-col:last-child .process-label {
    color: var(--color-body);
}

.process-detail-col p {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-body);
}

/*--- What I don't do ------------------------------------------------------*/

.process-exclusions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin-top: 34px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}

.process-exclusion {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 28px;
    background: var(--color-gray-2);
}

.process-exclusion i {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-primary-2nd);
}

.process-exclusion p {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-body);
}

/*--- Responsive -----------------------------------------------------------*/

@media (max-width: 991px) {
    .process-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .process-exclusions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .process-page {
        --rail-x: 7px;
        --node: 12px;
    }

    .process-stage-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding-left: 34px;
    }

    .process-index {
        padding-left: 0;
    }

    /* The node lives inside the index cell, which now starts after the inner's
       34px of padding — so it has to be pulled back to the band's edge. */
    .process-node {
        left: calc(var(--rail-x) - var(--node) / 2 - 34px);
        top: 4px;
    }

    .process-ghost {
        font-size: clamp(120px, 34vw, 190px);
        opacity: 0.7;
    }

    /* The bloom is most of the band at this width — keep it faint. */
    .process-plate {
        width: 100%;
        right: -25%;
        opacity: 0;
    }

    .process-stage.is-active .process-plate {
        opacity: 0.55;
    }

    .process-lead {
        margin-bottom: 26px;
    }
}

/* No motion means no drawing line and no reveal — the states apply instantly. */
@media (prefers-reduced-motion: reduce) {

    .process-stage-inner::after,
    .process-node,
    .process-stage,
    .process-stage::before,
    .process-ghost,
    .process-plate,
    .process-js .process-reveal {
        transition: none !important;
    }

    /* The script stops writing offsets, but make sure nothing is left shifted. */
    .process-ghost,
    .process-plate,
    .process-body {
        --px: 0px;
        --py: 0px;
    }

    .process-js .process-reveal {
        opacity: 1;
        transform: none;
    }
}