/* ==========================================================
   STEEL MANUFACTURING PROCESS

   Two layouts from one markup:

   Desktop  .steel-process is pinned by ScrollTrigger, the box
            scales up, the canvas is scrubbed.

   Touch    .steel-process--video is added by the JS. Nothing is
            pinned, the section is a single 100svh panel, the
            video plays inline. Every viewport-unit and
            transform trick that can fight touch scrolling is
            switched off in that mode.
========================================================== */

:root {
    --process-bg: #050505;
    --process-text: #ffffff;
    --process-muted: rgba(255, 255, 255, .70);
    --process-border: rgba(255, 255, 255, .08);
}


/* ==========================================================
   MOBILE: HIDDEN

   One-stop switch. Matches the same (hover: none) + (pointer:
   coarse) test the JS uses, so CSS and JS agree on what counts
   as "mobile" without duplicating a breakpoint number in two
   places. Pure CSS, so it hides even if the JS fails to load —
   nothing below this point in the file runs on those devices.
========================================================== */

@media (hover: none) and (pointer: coarse) {

    .steel-process {
        display: none !important;
    }

}


/* ==========================================================
   SECTION
========================================================== */

/* overflow:hidden here breaks a position:fixed pin in WebKit —
   the pinned box can vanish or refuse to stick. overflow-x:clip
   contains the 1.28x scale without creating a scroll container. */

.steel-process {
    position: relative;
    background: #fff;
    padding: 0;
    overflow: visible;
}

@supports (overflow: clip) {

    .steel-process {
        overflow-x: clip;
        overflow-y: visible;
    }

}


/* ==========================================================
   STICKY AREA
========================================================== */

.steel-process__sticky {
    position: relative;

    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

/* svh, deliberately. A pinned element must be sized in a unit
   that cannot change: dvh tracks the live viewport, so the panel
   grows as the URL bar collapses while ScrollTrigger's pin-spacer
   does not — and when the document ends up shorter than the pin
   needs, the browser clamps the scroll and you cannot get past
   the section. svh is the URL-bar-expanded height and never
   moves. Height lost to svh is taken back by sizing the box
   against the panel rather than the viewport. */

@supports (height: 100svh) {

    .steel-process__sticky {
        height: 100svh;
    }

}


/* ==========================================================
   BOX WRAPPER
========================================================== */

.steel-process__box-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 80vw;
    height: 78vh;

    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;

    will-change: transform;
}


/* ==========================================================
   MAIN BOX
========================================================== */

/* No `perspective` — it creates a containing block and forces a
   3D rendering context around the media for no benefit.
   will-change is narrowed to transform: listing four properties
   made WebKit re-rasterise the layer whenever any of them
   changed, so animating border-radius repainted the media every
   frame. The -webkit-mask is what stops Safari leaking square
   media corners past the radius on a transformed layer. */

.steel-process__box {
    position: relative;

    width: 100%;
    height: 100%;

    margin: auto;

    overflow: hidden;

    border-radius: 38px;

    background: var(--process-bg);

    box-shadow: 0 30px 100px rgba(0, 0, 0, .30);

    transform-origin: center center;
    transform: translate3d(0, 0, 0);

    will-change: transform;

    isolation: isolate;

    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* ==========================================================
   MEDIA WRAPPER
========================================================== */

.steel-process__canvas-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


#steelProcessCanvas,
.steel-process__video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
}


.steel-process__video {
    object-fit: cover;

    /* Hidden until the JS decides this is a touch device. Keeps
       the poster from flashing over the canvas on desktop. */
    display: none;

    background: var(--process-bg);
}


/* Video mode: the canvas is never used, the video takes over. */

.steel-process--video #steelProcessCanvas {
    display: none;
}

.steel-process--video .steel-process__video {
    display: block;
}


/* ==========================================================
   PLAY FALLBACK
   Only shown when the browser refuses autoplay — iOS does this
   in Low Power Mode even for muted, inline video.
========================================================== */

.steel-process__play {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 30;

    width: 78px;
    height: 78px;

    padding: 0;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;

    background: rgba(0, 0, 0, .45);

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.steel-process__play[hidden] {
    display: none;
}

.steel-process__play-icon {
    width: 0;
    height: 0;

    margin-left: 5px;

    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 18px solid #fff;
}

.steel-process__play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}


/* ==========================================================
   OVERLAY
========================================================== */

.steel-process__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .65) 0%,
            rgba(0, 0, 0, .20) 45%,
            rgba(0, 0, 0, .05) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   CONTENT
========================================================== */

.steel-process__content {
    position: absolute;
    inset: 0;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 80px;

    pointer-events: none;
}

/* Only the step buttons are interactive; everything else must
   let touch events through to the page so scrolling over the
   panel still works. */

.steel-process__content .step-btn {
    pointer-events: auto;
}


/* ==========================================================
   LEFT PROGRESS
========================================================== */

.steel-process__progress {
    position: relative;

    width: 80px;
    height: 520px;

    flex-shrink: 0;
}


.progress-line {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 2px;

    background: rgba(255, 255, 255, .18);

    transform: translateX(-50%);
}


/* Fills as the video plays. Width/height is set from JS. */

.progress-line-fill {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 0%;

    background: #fff;

    transform-origin: top center;
}


.steel-process__progress ul {
    list-style: none;

    margin: 0;
    padding: 0;

    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}


.steel-process__progress li {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;
}


.step-btn {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    /* Generous hit area — the dot itself is 14px, well under the
       44px minimum for a touch target. */
    width: 44px;
    height: 44px;

    padding: 0;
    margin: 0;

    border: 0;
    background: none;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.step-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%;
}


/* Explicit property names — `transition: .4s` is shorthand for
   `transition: all`, and WebKit re-evaluates layout properties
   under `all` constantly. */

.step-dot {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #8f8f8f;

    border: 2px solid rgba(255, 255, 255, .25);

    z-index: 2;

    transition: transform .4s ease, background .4s ease;
}


.step-number {
    position: absolute;

    right: 100%;
    margin-right: 12px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: .15em;

    opacity: .35;

    transition: opacity .35s ease;
}


.steel-process__progress li.active .step-dot {
    background: #fff;
    transform: scale(1.45);
}


.steel-process__progress li.active .step-number {
    opacity: 1;
}


/* ==========================================================
   RIGHT CONTENT
========================================================== */

.steel-process__info {
    width: min(560px, 100%);
    margin-left: auto;
}


.process-label {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    border-radius: 100px;

    border: 1px solid rgba(255, 255, 255, .10);

    background: rgba(255, 255, 255, .05);

    color: #fff;

    font-size: 13px;

    letter-spacing: .20em;

    text-transform: uppercase;

    margin-bottom: 22px;
}


.process-title {
    color: #fff;

    font-size: 60px;

    line-height: 1;

    font-weight: 700;

    margin: 0 0 24px;
}


.process-description {
    color: var(--process-muted);

    font-size: 18px;

    line-height: 1.8;

    margin: 0;

    max-width: 520px;
}


/* ==========================================================
   HIDDEN DATA / A11Y
========================================================== */

.steel-process-data {
    display: none;
}

.steel-process .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================
   VIDEO MODE — plain 16:9 block, no pin, no full-height panel

   This is the whole fix: the section stops being a scroll-driven
   panel and becomes an ordinary embed that sits in normal page
   flow. It scrolls past like any image or video would. Nothing
   here can lock up scrolling because nothing here touches
   scrolling.
========================================================== */

.steel-process--video .steel-process__intro {
    display: none;
}

.steel-process--video .steel-process__sticky {
    height: auto;
    min-height: 0;

    display: block;

    overflow: visible;
}

.steel-process--video .steel-process__box-wrapper {
    position: relative;

    top: auto;
    left: auto;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    transform: none;
    will-change: auto;
}

/* Old Android WebViews without aspect-ratio support: the
   padding-top trick reserves the same 16:9 box. */

@supports not (aspect-ratio: 16 / 9) {

    .steel-process--video .steel-process__box-wrapper {
        height: 0;
        padding-top: 56.25%;
    }

}

.steel-process--video .steel-process__box {
    width: 100%;
    height: 100%;

    border-radius: 16px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);

    transform: none;
    will-change: auto;

    -webkit-mask-image: none;
    isolation: auto;
}

.steel-process--video .steel-process__content {
    padding: 16px;
}

.steel-process--video .steel-process__info {
    max-width: 100%;
}

.steel-process--video .process-title {
    font-size: 22px;
    margin-bottom: 6px;
}

.steel-process--video .process-description {
    font-size: 13px;
    line-height: 1.45;
}

.steel-process--video .process-label {
    display: none;
}

.steel-process--video .steel-process__progress ul {
    gap: 4px;
}


/* ==========================================================
   LARGE LAPTOP  1201px → 1400px
========================================================== */

@media (max-width: 1400px) {

    .steel-process__box-wrapper {
        width: 86vw;
        height: 78vh;
    }

    .steel-process__content {
        padding: 65px;
    }

    .steel-process__progress {
        width: 70px;
        height: 480px;
    }

    .process-title {
        font-size: 56px;
    }

    .process-description {
        font-size: 17px;
    }

}


/* ==========================================================
   LAPTOP  992px → 1200px
========================================================== */

@media (max-width: 1200px) {

    .steel-process__box-wrapper {
        width: 90vw;
        height: 78vh;
    }

    .steel-process__box {
        border-radius: 32px;
    }

    .steel-process__content {
        padding: 50px;
    }

    .steel-process__progress {
        width: 65px;
        height: 450px;
    }

    .step-number {
        font-size: 12px;
    }

    .process-label {
        font-size: 12px;
        padding: 9px 15px;
        margin-bottom: 18px;
    }

    .process-title {
        font-size: 50px;
        line-height: 1.05;
        margin-bottom: 20px;
    }

    .process-description {
        font-size: 16px;
        line-height: 1.7;
        max-width: 480px;
    }

}


/* ==========================================================
   TABLET  768px → 991px
========================================================== */

@media (max-width: 991px) {

    /* Percentage of the panel, not of the viewport. No vh unit
       is involved, so nothing here shifts when the URL bar
       moves — and it reads taller than the old 78vh did. */

    .steel-process__box-wrapper {
        width: 92vw;
        height: 92%;
    }

    .steel-process__box {
        border-radius: 28px;

        /* A 100px blur on a full-screen layer is recomputed on
           every paint. 30px reads the same at this size. */
        box-shadow: 0 12px 30px rgba(0, 0, 0, .28);

        -webkit-mask-image: none;
        isolation: auto;
        will-change: auto;
    }

    .steel-process__content {
        flex-direction: column;

        align-items: center;
        justify-content: flex-end;

        text-align: center;

        gap: 28px;

        padding: 40px 45px;
    }

    .steel-process__progress {
        width: 100%;
        height: auto;

        order: 1;
    }

    .progress-line {
        top: auto;
        bottom: -14px;

        left: 0;

        width: 100%;
        height: 2px;

        transform: none;
    }

    .progress-line-fill {
        width: 0%;
        height: 100%;
    }

    .steel-process__progress ul {
        height: auto;
        width: 100%;

        flex-direction: row;

        align-items: center;
        justify-content: space-between;

        gap: 10px;
    }

    .steel-process__progress li {
        flex: 1;
    }

    .step-number {
        display: none;
    }

    .steel-process__info {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;

        order: 2;
    }

    .process-label {
        margin-bottom: 16px;
    }

    .process-title {
        font-size: 42px;
        line-height: 1.08;
        margin-bottom: 16px;
    }

    .process-description {
        max-width: 600px;
        margin: 0 auto;

        font-size: 16px;
        line-height: 1.65;
    }

}


/* ==========================================================
   SMALL TABLET  577px → 767px
========================================================== */

@media (max-width: 767px) {

    .steel-process__box-wrapper {
        width: 94vw;
        height: 92%;
    }

    .steel-process__box {
        border-radius: 24px;
    }

    .steel-process__content {
        justify-content: flex-end;

        gap: 24px;

        padding: 30px 28px;
    }

    .steel-process__progress ul {
        gap: 6px;
    }

    .step-dot {
        width: 11px;
        height: 11px;

        border-width: 1.5px;
    }

    .steel-process__progress li.active .step-dot {
        transform: scale(1.35);
    }

    .process-label {
        font-size: 10px;
        letter-spacing: .16em;
        padding: 8px 13px;
        margin-bottom: 14px;
    }

    .process-title {
        font-size: 36px;
        line-height: 1.08;
        margin-bottom: 14px;
    }

    .process-description {
        font-size: 15px;
        line-height: 1.6;
    }

}


/* ==========================================================
   MOBILE  481px → 576px
========================================================== */

@media (max-width: 576px) {

    .steel-process__box-wrapper {
        width: 94vw;
        height: 92%;
    }

    .steel-process__box {
        border-radius: 20px;
    }

    .steel-process__content {
        padding: 24px 20px;
        gap: 20px;
    }

    /* The dots stay: they are the pacing control that scroll
       used to provide, so they earn their space. */

    .step-dot {
        width: 10px;
        height: 10px;
    }

    .step-btn {
        width: 34px;
        height: 34px;
    }

    .process-label {
        font-size: 9px;
        letter-spacing: .14em;
        padding: 7px 11px;
        margin-bottom: 12px;
    }

    .process-title {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .process-description {
        font-size: 14px;
        line-height: 1.55;
    }

    .steel-process__play {
        width: 66px;
        height: 66px;
    }

}


/* ==========================================================
   SMALL MOBILE  480px AND BELOW
========================================================== */

@media (max-width: 480px) {

    .steel-process__box-wrapper {
        width: 94vw;
        height: 92%;
    }

    .steel-process__box {
        border-radius: 18px;
    }

    .steel-process__content {
        padding: 20px 16px;
        gap: 18px;
    }

    .process-label {
        font-size: 8px;
        letter-spacing: .12em;
        padding: 6px 10px;
        margin-bottom: 10px;
    }

    .process-title {
        font-size: 28px;
        line-height: 1.1;
        margin-bottom: 10px;
    }

    .process-description {
        font-size: 13px;
        line-height: 1.5;
    }

    .step-dot {
        width: 9px;
        height: 9px;
    }

}


/* ==========================================================
   VERY SMALL MOBILE  375px AND BELOW
========================================================== */

@media (max-width: 375px) {

    .steel-process__box-wrapper {
        width: 95vw;
        height: 92%;
    }

    .steel-process__content {
        padding: 18px 14px;
        gap: 16px;
    }

    .process-title {
        font-size: 25px;
    }

    .process-description {
        font-size: 12px;
        line-height: 1.5;
    }

    .process-label {
        font-size: 7px;
        padding: 5px 8px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .steel-process__box-wrapper {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .step-dot,
    .step-number,
    .progress-line-fill {
        transition: none;
    }

}