/* ============================================
   PROCESS SECTION - STYLES
   ============================================ */

/* ════ SECTION BLEND ════ */
.process-section {
    -webkit-mask-image: none;
    mask-image: none;
    padding-top: 80px;
}

/* ════ PROCESS PIN ════ */
#process-pin-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
}

#process-pin-panel {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
}

#process-bg-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: transparent;
    transition: background 0.7s ease;
}

#process-pips {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    /* Slide-progress rail hidden per request. Flip back to `flex` to restore the
       five-pip indicator; the JS (setActivePip) keeps tracking it either way. */
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.process-pip {
    width: 2px;
    height: 22px;
    border-radius: 2px;
    background: rgba(244, 241, 234, 0.14);
    transition: height 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.process-pip.active {
    height: 42px;
    background: var(--teal);
    box-shadow: 0 0 12px rgba(0, 184, 212, 0.45);
}

#process-scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#process-scroll-hint span {
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gray);
}

.process-arrow {
    width: 16px;
    height: 16px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(45deg);
    animation: process-ab 1.5s ease-in-out infinite;
}

@keyframes process-ab {

    0%,
    100% {
        opacity: 1;
        margin-top: 0
    }

    50% {
        opacity: .25;
        margin-top: 5px
    }
}

/* ════ SLIDES ════ */
.process-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8vw;
    /* The docked side nav is position:fixed over the left gutter and expands
       downward on hover, so 8vw alone is not enough room below ~1900px. */
    padding-left: max(8vw, 150px);
    z-index: 2;
    pointer-events: none;
    visibility: hidden;
}

/* ── Slide 0 - OUR PROCESS + step overview combined, 2-column horizontal ── */
#process-slide-0 {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 8vw;
    padding-left: max(8vw, 150px);
    gap: clamp(32px, 5vw, 72px);
}

.process-s0-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
}

/* ── Combined slide-0: center arrow filling the dead space ── */
.process-s0-arrow {
    flex: 1 1 auto;
    align-self: center;
    display: flex;
    align-items: center;
    min-width: 0;
    pointer-events: none;
}

.process-s0-arrow-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    color: var(--teal);
    filter: none;
    /* lift the arrow up so the tail comes from between the two title words
       and the head points at the "4 steps" box */
    transform: translateY(-8.5vw);
}

/* Baselines so nothing flashes/lingers before the scroll-bound JS takes over:
   the line starts fully un-drawn and the head starts hidden. */
.ps-arrow-line {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.ps-arrow-head {
    opacity: 0;
}

@media (max-width: 900px) {
    .process-s0-arrow {
        display: none;
    }
}

#process-slide-0 .process-s0-label {
    font-size: clamp(5rem, 12.5vw, 15rem);
    line-height: 0.68;
}

.process-s0-right {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
    width: clamp(280px, 23vw, 480px);
    flex-shrink: 0;
    align-self: center;
}

#process-slide-0 .process-s0-stat {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

#process-slide-0 .process-s1-card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.process-s0-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4.5rem, 11.5vw, 14rem);
    line-height: 0.68;
    letter-spacing: 0.03em;
    color: var(--white);
    margin-bottom: 0;
    display: block;
    text-shadow: none !important;
    filter: none !important;
}

.process-s0-label .our {
    display: block;
    color: white;
    -webkit-text-stroke: none;
    line-height: 0.68;
    transform: translateY(25px);
    text-shadow: none !important;
    filter: none !important;
}

.process-s0-label .process {
    display: block;
    color: var(--teal) !important; /* match the "TO SUCCESS" accent (.subhead-to) */
    line-height: 0.68;
    transform: translateY(-20px);
}

.process-s0-bottom {
    margin-top: clamp(18px, 2.2vh, 28px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    max-width: 1100px;
    gap: clamp(20px, 3.5vw, 50px);
}

.process-s0-desc {
    font-size: clamp(1.2rem, 1.55vw, 1.45rem);
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 660px;
}

.process-s0-stat {
    position: absolute;
    top: clamp(48px, 9vh, 90px);
    right: clamp(130px, 11vw, 200px);
    text-align: left;
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: 10px;
    background: rgba(15, 20, 26, 0.88);
    border: 1px solid rgba(0, 184, 212, 0.16);
    box-shadow:
        0 24px 48px -18px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    width: clamp(220px, 22vw, 300px);
    overflow: hidden;
}

.process-s0-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--teal) 0%, rgba(0, 184, 212, 0.15) 80%, transparent 100%);
}

/* bare icon, colour-matched to the big .process-icon-ring on each step */
.process-s0-stat-icon,
.process-s1-card-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(30px, 2.4vw, 46px);
    height: clamp(30px, 2.4vw, 46px);
    pointer-events: none;
}

.process-s0-stat-icon svg,
.process-s1-card-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.process-s0-stat-icon {
    top: clamp(34px, 3.6vw, 46px);
    right: clamp(26px, 2.4vw, 36px);
    color: var(--teal);
}

.process-s0-stat-num {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(2.6rem, 3.5vw, 4.5rem);
    line-height: 1;
    color: var(--teal);
    display: block;
    margin-bottom: 10px;
    letter-spacing: -0.04em;
}

.process-s0-stat-label {
    font-size: clamp(0.7rem, 0.9vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: white;
    display: block;
    margin: 0;
}

/* ── Slides 1-4 - pain-inner layout, matching problem-card grid exactly ── */
.process-pain-inner {
    display: grid;
    /* Title column carries more weight now that it no longer overhangs left,
       so headings keep their authored line breaks instead of re-wrapping. */
    grid-template-columns: 1.25fr clamp(150px, 12.5vw, 205px) 1fr;
    align-items: center;
    column-gap: clamp(36px, 4.4vw, 64px);
    max-width: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    transform: translateX(-5px);
}

.process-pain-text {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    /* was -70px, which pulled the title group out of its column and under the
       docked nav */
    margin-left: 0;
    padding-right: 10px;
}

.process-pain-visual {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.process-pain-body {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    margin-left: clamp(60px, 7vw, 130px);
    max-width: 42ch;
    font-size: clamp(1.2rem, 1.55vw, 1.5rem);
    font-weight: 300;
    line-height: 1.75;
    min-width: 0;
    color: #FFFFFF;
}

.process-pain-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0;
    border-radius: 0;
    background: none;
    margin-bottom: 18px;
}

.process-pain-tag::before {
    display: none;
}

.process-pain-heading {
    font-family: var(--font-body), sans-serif;
    font-size: clamp(2.1rem, 3.42vw, 4.4rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 10px;
}

.process-pain-heading em {
    font-style: normal;
}


.process-pain-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-icon-ring {
    width: clamp(135px, 16.5vw, 215px);
    height: clamp(135px, 16.5vw, 215px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.process-icon-ring:hover {
    transform: scale(1.04);
    border-color: currentColor;
}

.process-icon-ring:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
}

.process-icon-ring svg {
    width: 38%;
    height: 38%;
    stroke-width: 1.6;
    filter: none;
}

.process-icon-ring::before {
    content: none;
}

.process-icon-ring::after {
    content: none;
}

/* Editorial ghost numeral behind each step */
.process-ghost-num {
    display: block;
    position: absolute;
    right: clamp(1.5rem, 3.5vw, 4rem);
    bottom: clamp(0.75rem, 1.8vh, 1.5rem);
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(5.8rem, 10vw, 9rem);
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(244, 241, 234, 0.11);
    -webkit-text-stroke: 0;
    text-rendering: geometricPrecision;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* colour themes - gold, blue, green, purple */
#process-slide-1 .process-pain-tag {
    color: #A1A1AA;
}

#process-slide-1 .process-pain-heading em {
    color: #A1A1AA;
}

#process-slide-1 .process-icon-ring {
    background: rgba(255, 255, 255, 0.03);
    color: #A1A1AA;
    box-shadow: none;
}

#process-slide-2 .process-pain-tag {
    color: #00b8d4;
}

#process-slide-2 .process-pain-heading em {
    color: #00b8d4;
}

#process-slide-2 .process-icon-ring {
    background: color-mix(in srgb, #00b8d4 10%, rgba(13, 20, 26, 0.7));
    color: #00b8d4;
}

#process-slide-3 .process-pain-tag {
    color: #4285F4;
}

#process-slide-3 .process-pain-heading em {
    color: #4285F4;
}

#process-slide-3 .process-icon-ring {
    background: color-mix(in srgb, #4285F4 10%, rgba(13, 20, 26, 0.7));
    color: #4285F4;
}

#process-slide-4 .process-pain-tag {
    color: #0866FF;
}

#process-slide-4 .process-pain-heading em {
    color: #0866FF;
}

#process-slide-4 .process-icon-ring {
    background: color-mix(in srgb, #0866FF 10%, rgba(13, 20, 26, 0.7));
    color: #0866FF;
}

#process-slide-5 .process-pain-tag {
    color: #0866FF;
}

#process-slide-5 .process-pain-heading em {
    color: #0866FF;
}

#process-slide-5 .process-icon-ring {
    background: color-mix(in srgb, #0866FF 10%, rgba(13, 20, 26, 0.7));
    color: #0866FF;
}

/* ── Slide 1 - intro step, mirrors "INVISIBLE" slide exactly ── */
#process-slide-1 {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10vw;
    justify-content: center;
}

.process-s1-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.08rem, 1.68vw, 1.56rem);
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.32);
    margin-bottom: clamp(6px, 0.8vh, 10px);
    display: block;
}

.process-s1-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 15vw, 18rem);
    line-height: 0.75;
    letter-spacing: 0.01em;
    margin-bottom: 0;
    width: 100%;
}

.process-s1-title .line-ghost {
    display: block;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.25);
    color: transparent;
    line-height: 0.85;
    margin-bottom: 0;
}

.process-s1-title .line-solid {
    display: block;
    color: var(--white);
    line-height: 0.85;
    margin-bottom: 0;
}

.process-s1-title .line-orange {
    display: block;
    color: #ff6b35;
    line-height: 0.85;
}

.process-s1-title .line-green {
    display: block;
    color: #00e676;
    /* Bright vibrant green for victory */
    line-height: 0.85;
    margin-bottom: 0;
}

.process-s1-card {
    position: absolute;
    right: 14vw;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(240px, 22vw, 320px);
    background: rgba(15, 20, 26, 0.88);
    border: 1px solid rgba(244, 241, 234, 0.08);
    border-radius: 12px;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}

.process-s1-card-item {
    --step-hover-bg: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    pointer-events: auto;
    background: transparent;
    /* extra right padding reserves room for the chip icon */
    padding: clamp(14px, 2.2vh, 22px) clamp(74px, 6vw, 94px) clamp(14px, 2.2vh, 22px) clamp(20px, 1.8vw, 28px);
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.3s ease;
}

.process-s1-card-item:last-child {
    border-bottom: none;
}

.process-s1-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    opacity: 0.35;
    transition: width 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

.process-s1-card-item:hover::before {
    width: 5px;
    opacity: 1;
}

.process-s1-card-item:nth-child(1)::before {
    background: #00b8d4;
    box-shadow: 0 0 10px rgba(0, 184, 212, 0.5);
}

.process-s1-card-item:nth-child(1) {
    --step-hover-bg: rgba(0, 184, 212, 0.08);
}

.process-s1-card-item:nth-child(2)::before {
    background: #4285F4;
    box-shadow: 0 0 10px rgba(66, 133, 244, 0.5);
}

.process-s1-card-item:nth-child(2) {
    --step-hover-bg: rgba(66, 133, 244, 0.08);
}

.process-s1-card-item:nth-child(3)::before {
    background: #0866FF;
    box-shadow: 0 0 10px rgba(8, 102, 255, 0.5);
}

.process-s1-card-item:nth-child(3) {
    --step-hover-bg: rgba(8, 102, 255, 0.08);
}

.process-s1-card-item:nth-child(4)::before {
    background: #0866FF;
    box-shadow: 0 0 10px rgba(8, 102, 255, 0.5);
}

.process-s1-card-item:nth-child(4) {
    --step-hover-bg: rgba(8, 102, 255, 0.08);
}

.process-s1-card-item:hover,
.process-s1-card-item:focus-visible {
    background: var(--step-hover-bg);
}

.process-s1-card-icon {
    top: 50%;
    right: clamp(30px, 2.6vw, 40px);
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.process-s1-card-item:hover .process-s1-card-icon {
    transform: translateY(-50%) scale(1.08);
}

.process-s1-card-item:nth-child(1) .process-s1-card-icon {
    color: #00b8d4;
}

.process-s1-card-item:nth-child(2) .process-s1-card-icon {
    color: #4285F4;
}

.process-s1-card-item:nth-child(3) .process-s1-card-icon {
    color: #0866FF;
}

.process-s1-card-item:nth-child(4) .process-s1-card-icon {
    color: #0866FF;
}

.process-s1-card-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 2.4vw, 3.4rem);
    line-height: 1;
    display: block;
    margin-bottom: 3px;
    transition: transform 0.3s ease;
}

.process-s1-card-item:hover .process-s1-card-num {
    transform: translateX(4px);
}

.process-s1-card-item:nth-child(1) .process-s1-card-num {
    color: #00b8d4;
    text-shadow: 0 0 10px rgba(0, 184, 212, 0.2);
}

.process-s1-card-item:nth-child(2) .process-s1-card-num {
    color: #4285F4;
    text-shadow: 0 0 10px rgba(66, 133, 244, 0.2);
}

.process-s1-card-item:nth-child(3) .process-s1-card-num {
    color: #0866FF;
    text-shadow: 0 0 10px rgba(8, 102, 255, 0.2);
}

.process-s1-card-item:nth-child(4) .process-s1-card-num {
    color: #0866FF;
    text-shadow: 0 0 10px rgba(8, 102, 255, 0.2);
}

.process-s1-card-label {
    font-size: clamp(0.85rem, 1.05vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: white;
    display: block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.process-s1-card-item:hover .process-s1-card-label {
    transform: translateX(4px);
    color: var(--white);
}

/* ── icon animations ── */
@keyframes processIconRing {
    0% {
        transform: rotate(0)
    }

    8% {
        transform: rotate(-20deg)
    }

    18% {
        transform: rotate(20deg)
    }

    28% {
        transform: rotate(-14deg)
    }

    38% {
        transform: rotate(14deg)
    }

    48% {
        transform: rotate(-7deg)
    }

    58% {
        transform: rotate(7deg)
    }

    68% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(0)
    }
}

@keyframes processIconStar {
    0% {
        transform: rotate(0deg) scale(0.7);
        opacity: 0.3;
    }

    15% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

@keyframes processIconPulse {
    0% {
        transform: scale(1)
    }

    20% {
        transform: scaleX(1.2) scaleY(1.25)
    }

    40% {
        transform: scaleX(0.85) scaleY(0.88)
    }

    60% {
        transform: scaleX(1.1) scaleY(1.12)
    }

    80% {
        transform: scaleX(0.96)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes processDrawLine {
    0% {
        stroke-dashoffset: -60;
        opacity: 0.2;
    }

    15% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes processBarLeft {
    0% {
        transform: scaleY(0.15);
        opacity: 0.2;
    }

    30% {
        transform: scaleY(1.15);
        opacity: 1;
    }

    50% {
        transform: scaleY(0.6);
    }

    70% {
        transform: scaleY(1.05);
    }

    85% {
        transform: scaleY(0.85);
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes processBarMid {
    0% {
        transform: scaleY(0.15);
        opacity: 0.2;
    }

    35% {
        transform: scaleY(1.2);
        opacity: 1;
    }

    55% {
        transform: scaleY(0.7);
    }

    75% {
        transform: scaleY(1.08);
    }

    88% {
        transform: scaleY(0.9);
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes processBarRight {
    0% {
        transform: scaleY(0.15);
        opacity: 0.2;
    }

    40% {
        transform: scaleY(1.25);
        opacity: 1;
    }

    60% {
        transform: scaleY(0.65);
    }

    80% {
        transform: scaleY(1.1);
    }

    92% {
        transform: scaleY(0.88);
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes processGlowPop {
    0% {
        opacity: .15;
        transform: scale(1)
    }

    45% {
        opacity: .55;
        transform: scale(1.1)
    }

    100% {
        opacity: .15;
        transform: scale(1)
    }
}

#process-slide-2 .process-icon-ring.icon-animate svg {
    animation: processIconRing 1.1s ease-in-out forwards;
}

#process-slide-3 .process-icon-ring.icon-animate svg {
    animation: processIconStar 0.9s ease-out forwards;
}

#process-slide-4 .process-icon-ring.icon-animate polyline {
    animation: processDrawLine 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Safety net: the markup ships this polyline fully offset, i.e. invisible until
   something draws it in. If the reveal never fires the icon must still be
   there, so the resting state is the drawn one; the animation still starts from
   its own hidden keyframe. */
#process-slide-4 .process-icon-ring polyline {
    stroke-dashoffset: 0;
}

#process-slide-5 .process-icon-ring line {
    transform-origin: center bottom;
    transform-box: fill-box;
}

#process-slide-5 .process-icon-ring.icon-animate line:nth-child(1) {
    animation: processBarLeft 1s cubic-bezier(.34, 1.2, .64, 1) 0ms forwards;
}

#process-slide-5 .process-icon-ring.icon-animate line:nth-child(2) {
    animation: processBarMid 1s cubic-bezier(.34, 1.2, .64, 1) 120ms forwards;
}

#process-slide-5 .process-icon-ring.icon-animate line:nth-child(3) {
    animation: processBarRight 1s cubic-bezier(.34, 1.2, .64, 1) 240ms forwards;
}

.process-icon-ring.icon-animate::before {
    animation: processGlowPop 1s ease-out forwards;
}

.process-s0-stat:hover .process-s0-stat-icon svg {
    animation: processDrawLine 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.process-s1-card-item:nth-child(1):hover .process-s1-card-icon svg,
.process-s1-card-item:nth-child(1):focus-visible .process-s1-card-icon svg {
    animation: processIconRing 1.1s ease-in-out forwards;
}

.process-s1-card-item:nth-child(2):hover .process-s1-card-icon svg,
.process-s1-card-item:nth-child(2):focus-visible .process-s1-card-icon svg {
    animation: processIconStar 0.9s ease-out forwards;
}

.process-s1-card-item:nth-child(3) .process-s1-card-icon polyline {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}

.process-s1-card-item:nth-child(3):hover .process-s1-card-icon polyline,
.process-s1-card-item:nth-child(3):focus-visible .process-s1-card-icon polyline {
    animation: processDrawLine 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.process-s1-card-item:nth-child(4) .process-s1-card-icon line {
    transform-origin: center bottom;
    transform-box: fill-box;
}

.process-s1-card-item:nth-child(4):hover .process-s1-card-icon line:nth-child(1),
.process-s1-card-item:nth-child(4):focus-visible .process-s1-card-icon line:nth-child(1) {
    animation: processBarLeft 1s cubic-bezier(.34, 1.2, .64, 1) 0ms forwards;
}

.process-s1-card-item:nth-child(4):hover .process-s1-card-icon line:nth-child(2),
.process-s1-card-item:nth-child(4):focus-visible .process-s1-card-icon line:nth-child(2) {
    animation: processBarMid 1s cubic-bezier(.34, 1.2, .64, 1) 120ms forwards;
}

.process-s1-card-item:nth-child(4):hover .process-s1-card-icon line:nth-child(3),
.process-s1-card-item:nth-child(4):focus-visible .process-s1-card-icon line:nth-child(3) {
    animation: processBarRight 1s cubic-bezier(.34, 1.2, .64, 1) 240ms forwards;
}

@media (max-width: 900px) {
    .process-pain-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .process-pain-text,
    .process-pain-visual,
    .process-pain-body {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .process-pain-visual {
        order: -1;
    }

    .process-pain-body {
        max-width: 100%;
    }

    #process-pips {
        right: 14px;
    }
}

/* ── Combined slide-0: sub-header ── */
.process-s0-subhead {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.68rem, 2.88vw, 3.36rem);
    letter-spacing: 0.04em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0.45em;
    margin-top: clamp(6px, 0.8vh, 10px);
    margin-bottom: clamp(10px, 1.8vh, 20px);
}

.subhead-from {
    color: var(--white);
}

.subhead-to {
    color: var(--teal);
}

/* ── Combined slide-0: left content wrapper ── */
.process-s0-left-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ============================================================================
   MOBILE — STATIC VERTICAL STACK
   The JS pin/slide-deck is disabled at ≤900px (see initProcessSection in
   problem.js), so the five slides are no longer shown one-at-a-time over a
   pinned panel. Here we take them out of the absolute stack and render them as
   normal, full-width blocks flowing down the page — no overlap, no h-scroll.
   ========================================================================== */
@media (max-width: 900px) {
    /* Panel: drop the 100vh pin box; grow to fit the stacked slides instead */
    #process-pin-wrapper {
        height: auto;
    }

    #process-pin-panel {
        height: auto;
        min-height: 0;
        display: block;
        /* clip the centered 800px bg-glow so it can't create horizontal scroll */
        overflow: hidden;
        padding: 0;
    }

    /* Each slide: absolute → static, always visible, no leftover transforms */
    .process-slide {
        position: static;
        inset: auto;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        min-height: 0;
        padding: clamp(16px, 4vw, 28px) clamp(18px, 6vw, 28px);
    }

    /* Enclose each of the 4 process steps in a sleek glass outline card on mobile */
    .process-slide:not(#process-slide-0) {
        background: rgba(15, 20, 26, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: clamp(38px, 9vw, 52px) clamp(18px, 5vw, 28px) clamp(30px, 7vw, 42px);
        margin-inline: clamp(14px, 4vw, 24px);
        width: auto;
        margin-bottom: 24px;
        box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .process-pain-visual {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .process-icon-ring {
        width: clamp(120px, 36vw, 160px);
        height: clamp(120px, 36vw, 160px);
    }

    /* Step-specific neon accent borders */
    #process-slide-2 {
        border-color: rgba(0, 184, 212, 0.3);
        margin-top: 40px;
    }

    #process-slide-3 {
        border-color: rgba(66, 133, 244, 0.3);
    }

    #process-slide-4 {
        border-color: rgba(8, 102, 255, 0.3);
    }

    #process-slide-5 {
        border-color: rgba(8, 102, 255, 0.3);
    }

    /* Slide 0 — stack the big title, the "4 steps" stat, and the steps card */
    #process-slide-0 {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        padding-top: 0;
        overflow: visible;
    }

    /* Big enough to fill the space, still safe on a 320px screen */
    #process-slide-0 .process-s0-label,
    .process-s0-label {
        font-size: clamp(4.8rem, 25vw, 9.5rem);
        line-height: 0.85;
        overflow: visible;
    }

    /* Pull the whole title block up: the section's own 80px top padding plus
       the label's 40px lead left a screen of dead space above ADZIO'S. */
    .process-section {
        padding-top: 0;
    }

    /* ADZIO'S — bright solid fill and stacked tight against PROCESS */
    #process-slide-0 .process-s0-label .our,
    .process-s0-label .our {
        color: rgba(244, 241, 234, 0.92);
        -webkit-text-stroke: 0;
        transform: none;
        margin-top: 6px;
        line-height: 0.92;
        margin-bottom: 0;
        text-shadow: none !important;
        filter: none !important;
    }

    #process-slide-0 .process-s0-label .process,
    .process-s0-label .process {
        color: var(--teal);
        transform: translateY(-12px);
        line-height: 0.72;
        margin-top: -6px;
        /* The legacy `.process` section rule in styles.css matches this span by
           name and was adding 90px of padding above and below the word, which
           is what opened the gap under ADZIO'S. */
        padding: 0;
    }

    .process-s0-subhead {
        margin-top: 2px;
        margin-bottom: 6px;
    }

    .process-s0-right {
        width: 100%;
    }

    /* Undo the desktop negative side-margins — once single-column they would
       push the heading/body a few px past the viewport edge */
    .process-pain-text {
        margin-left: 0;
        padding-right: 0;
    }

    .process-pain-body {
        margin-right: 0;
        padding-left: 0;
    }

    /* The giant ghost numeral is decorative and overflows/overlaps when stacked */
    .process-ghost-num {
        display: none;
    }

    /* Pin-era affordances are meaningless in a normal scroll */
    #process-pips,
    #process-scroll-hint {
        display: none;
    }
}


/* ============================================
   MOBILE PASS 2 - typography
   Scoped to (max-width: 768px). Desktop base rules untouched.
   ============================================ */
@media (max-width: 768px) {

    .process-s0-desc {
        font-size: 16px;
    }

    /* Was 1.06, and this heading wraps to 2-3 lines on a phone. */
    .process-pain-heading {
        line-height: 1.15;
    }
}


/* ============================================
   MOBILE PASS 3 - slide 0 horizontal padding
   Scoped to (max-width: 900px), where .process-slide is already static and
   stacked, so no desktop pinned layout is affected.
   ============================================ */
@media (max-width: 900px) {

    /* #process-slide-0 carries `padding-left: max(8vw, 150px)` at ID
       specificity so the desktop docked side nav has clearance. The existing
       mobile block only resets padding-top, so on a phone the slide kept a
       150px left inset and a 40px right one. On a 490px screen that is 31% of
       the width lost on the left, and it pushed the 25vw display heading 21px
       past the right edge with "PROCESS" clipped off.
       .process-slide already switches to a symmetric gutter at this width;
       match it so slide 0 lines up with every other slide. */
    #process-slide-0 {
        padding-left: clamp(18px, 6vw, 28px);
        padding-right: clamp(18px, 6vw, 28px);
    }
}


/* ============================================
   MOBILE PASS 4 - step slide centring
   Scoped to (max-width: 900px), where .process-pain-inner is already a single
   column, so the desktop 3-column layout is untouched.
   ============================================ */
@media (max-width: 900px) {

    /* .process-pain-body carries margin-left: clamp(60px, 7vw, 130px) to hold
       it clear of the centre icon in the desktop [text][icon][body] layout.
       The existing mobile blocks reset its grid placement, max-width,
       margin-right and padding-left, but never this margin-left. Stacked, that
       left the body copy 30px right of the axis the icon, tag and heading all
       share, which is what reads as "not lined up". */
    .process-pain-body {
        margin-left: 0;
        margin-inline: auto;
    }

    /* Base rule adds padding-right: 10px to balance the desktop column gap;
       stacked it makes the whole text block sit 5px left of centre. */
    .process-pain-text {
        padding-right: 0;
        padding-left: 0;
        margin-inline: auto;
    }

    /* .process-pain-inner carries transform: translateX(-5px), a desktop
       micro-nudge for the 3-column layout. Stacked it just shifts the entire
       step 5px left of the slide's centre, which is why the gutters read 23px
       left against 33px right. */
    .process-pain-inner {
        transform: none;
    }
}

/* Separate the stacked mobile display title without changing the desktop lockup. */
@media (max-width: 900px) {
    #process-slide-0 .process-s0-label .process,
    .process-s0-label .process {
        transform: translateY(3px);
        margin-top: 0;
        line-height: 0.78;
    }

    .process-s0-subhead {
        margin-top: 10px;
    }
}

/* Keep the mobile process cards as compact as the service cards. */
@media (max-width: 900px) {
    .process-slide:not(#process-slide-0) {
        padding: 26px clamp(18px, 5vw, 24px) 24px;
        margin-bottom: 18px;
    }

    .process-pain-inner {
        gap: 20px;
    }

    .process-pain-visual {
        margin-top: 4px;
        margin-bottom: 10px;
    }

    .process-icon-ring {
        width: clamp(92px, 28vw, 120px);
        height: clamp(92px, 28vw, 120px);
    }

    .process-pain-heading {
        font-size: clamp(1.65rem, 6.6vw, 2rem);
        line-height: 1.1;
    }
}

/* ============================================
   DESKTOP STEP CARDS
   The four step slides get the same glass outline card the mobile stack uses,
   so a step reads as its own panel instead of loose text on the background.
   The ghost numeral is a sibling of .process-pain-inner, so it stays outside
   the card as decoration.
   ============================================ */
@media (min-width: 901px) {
    /* Vertical padding clears the icon's outermost dashed ring, which overflows
       its own box by 26px, so the circles never touch the card edge. */
    .process-pain-inner {
        padding: clamp(46px, 5vh, 72px) clamp(28px, 3vw, 54px);
    }

    /* The chrome is a pseudo-element, not the box itself, so its opacity can be
       driven by --card-op. The deck's GSAP timeline fades that in and out with
       the step's own content, which keeps a card off every slide but its own
       (the wrapper is briefly visible before its content animates in). */
    .process-pain-inner::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 20px;
        background: rgba(15, 20, 26, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: var(--card-op, 0);
        z-index: -1;
        pointer-events: none;
    }

    /* Step-specific accent borders, matching the mobile cards */
    #process-slide-2 .process-pain-inner::before { border-color: rgba(0, 184, 212, 0.3); }
    #process-slide-3 .process-pain-inner::before { border-color: rgba(66, 133, 244, 0.3); }
    #process-slide-4 .process-pain-inner::before { border-color: rgba(8, 102, 255, 0.3); }
    #process-slide-5 .process-pain-inner::before { border-color: rgba(8, 102, 255, 0.3); }
}