/* ==========================================================================
   POLY — Way of working

   A deep brand panel sits on the mist ground; the steps float over it as
   frosted glass cards that climb to the right, with a luminous ribbon drawn
   behind them once the section enters the viewport.

   The panel is the one place in the system that uses large radii, so those
   live here as widget scoped tokens instead of touching --poly-radius.
   ========================================================================== */

.poly-process {
    --poly-process-panel-radius: clamp(16px, 2.2vw, 28px);
    --poly-process-card-radius: clamp(12px, 1.4vw, 18px);
    --poly-process-glass-line: rgba(255, 255, 255, .17);
    --poly-process-text: rgba(255, 255, 255, .72);
    --poly-process-climb: 26px;
}

/* ----------------------------------------------------------------- panel */

.poly-process__panel {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(40px, 5.2vw, 88px) clamp(24px, 4vw, 76px) clamp(40px, 5vw, 80px);
    border-radius: var(--poly-process-panel-radius);
    background:
        linear-gradient(126deg, var(--poly-brand-900) 0%, #232C6E 48%, var(--poly-brand) 100%);
    color: var(--poly-process-text);
    box-shadow:
        0 48px 92px -50px rgba(11, 17, 48, .7),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* Soft light pools, echoing the lit corner of the reference artwork. */
.poly-process__glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.poly-process__glow--top {
    top: -34%;
    left: -12%;
    width: 62%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(47, 134, 201, .55) 0%, rgba(47, 134, 201, 0) 68%);
}

.poly-process__glow--edge {
    right: -18%;
    bottom: -30%;
    width: 54%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(123, 188, 232, .22) 0%, rgba(123, 188, 232, 0) 66%);
}

/* ------------------------------------------------------------------- head */

.poly-process__head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(20px, 3.4vw, 64px);
    align-items: end;
    margin-bottom: clamp(48px, 5vw, 76px);
}

.poly-process .poly-eyebrow { color: var(--poly-accent-200); }

.poly-process__title {
    max-width: 15ch;
    color: var(--poly-white);
}

.poly-process__intro {
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--poly-process-text);
}

/* ------------------------------------------------------------------ stage */

.poly-process__stage {
    position: relative;
    padding-top: calc(var(--poly-process-climb) * 3);
}

.poly-process__flow {
    position: absolute;
    inset: -8% -14%;
    width: 128%;
    height: 116%;
    z-index: 0;
    pointer-events: none;
}

.poly-process__band {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.9s var(--poly-ease-out);
    transition-delay: calc(var(--poly-band, 0) * 140ms + 200ms);
}

.poly-process__flow.is-revealed .poly-process__band { stroke-dashoffset: 0; }

.poly-process__band--haze {
    opacity: .2;
    filter: blur(12px);
}

.poly-process__band--soft {
    opacity: .34;
    filter: blur(4px);
}

.poly-process__band--edge { opacity: .85; }
.poly-process__band--edge-dim { opacity: .45; }

/* No JS means no reveal class ever lands, so the ribbon must draw itself. */
html:not(.poly-js) .poly-process__band { stroke-dashoffset: 0; }

/* ------------------------------------------------------------------ steps */

.poly-process__steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    align-items: stretch;
    gap: clamp(20px, 2.4vw, 34px);
}

/* The grid cells stay equal, so every card is the same size; the inner layer
   then lifts one notch per step and the row reads as a flight path. The lift
   lives on .__inner because the reveal system owns the transform of the <li>.
   The lift is capped in PHP. */
.poly-process__step {
    display: flex;
}

.poly-process__inner {
    position: relative;
    isolation: isolate;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.2vw, 32px);
    transform: translateY(calc(var(--poly-lift, 0) * var(--poly-process-climb) * -1));
}

.poly-process__card {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--poly-process-card-radius);
    border: 1px solid var(--poly-process-glass-line);
    background: linear-gradient(158deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 56%, rgba(255, 255, 255, .04) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
        0 30px 60px -34px rgba(5, 9, 32, .9),
        inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: border-color .45s var(--poly-ease), box-shadow .45s var(--poly-ease),
                background-color .45s var(--poly-ease);
}

.poly-process__inner:hover .poly-process__card {
    border-color: rgba(255, 255, 255, .34);
    background-color: rgba(255, 255, 255, .05);
    box-shadow:
        0 40px 74px -34px rgba(5, 9, 32, 1),
        inset 0 1px 0 rgba(255, 255, 255, .32);
}

.poly-process__step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Cards stretch to a common height, so the copy hangs from the card foot
       and the climb of the row stays the only diagonal. */
    margin-bottom: auto;
    padding-bottom: clamp(28px, 3vw, 44px);
}

/* White tile with the brand mark inside — the one opaque object per card. */
.poly-process__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--poly-white) 0%, var(--poly-mist-deep) 100%);
    color: var(--poly-brand);
    box-shadow:
        0 16px 28px -14px rgba(5, 9, 32, .85),
        inset 0 -1px 0 rgba(11, 17, 48, .1);
    transition: transform .45s var(--poly-ease-out);
}

.poly-process__inner:hover .poly-process__icon { transform: translateY(-4px) scale(1.04); }

.poly-process__icon .poly-icon { width: 24px; height: 24px; }

.poly-process__no {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-family: var(--poly-font-display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--poly-accent-200);
}

.poly-process__no::after {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: .45;
}

.poly-process__step-title {
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    letter-spacing: -.018em;
    color: var(--poly-white);
}

.poly-process__step-text {
    margin-top: .8rem;
    font-size: .9625rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, .66);
    max-width: 38ch;
}

/* -------------------------------------------------------------------- cta */

.poly-process__cta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
    margin-top: clamp(36px, 3.6vw, 56px);
    padding-top: clamp(26px, 2.8vw, 40px);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.poly-process__note {
    flex: 1 1 22ch;
    font-size: 1rem;
    line-height: 1.68;
    color: var(--poly-process-text);
    max-width: 46ch;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
    .poly-process { --poly-process-climb: 12px; }
}

@media (max-width: 900px) {
    .poly-process { --poly-process-climb: 0px; }

    .poly-process__head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .poly-process__stage { padding-top: 0; }

    /* The ribbon only makes sense across a row; stacked cards carry their own
       sequence through the step numbers. */
    .poly-process__flow { display: none; }

    .poly-process__steps { grid-template-columns: 1fr; }

    .poly-process__step-head { padding-bottom: 24px; }

    .poly-process__step-text { max-width: 52ch; }
}

@media (max-width: 560px) {
    .poly-process__cta .poly-btn { width: 100%; }
}

/* Frosted glass falls back to a flat tint where backdrop-filter is missing. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .poly-process__card { background: linear-gradient(158deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .07) 100%); }
}