/* =========================================================
   SIARE — MANUFACTURING DETAIL PAGE
   Separate page styles; no entrance animations added yet.
========================================================= */

.mf-page {
    --mf-bg: #0b0b0b;
    --mf-ink: #f5f2ea;
    --mf-muted: rgba(245, 242, 234, 0.72);
    --mf-gold: #c8a96b;

    position: relative;
    isolation: isolate;
    background: var(--mf-bg);
    color: var(--mf-ink);
    overflow-x: hidden;
}

/* Soft-focus factory atmosphere behind the complete page.
   Foreground process photos remain sharp. */
.mf-page::before {
    content: "";
    position: fixed;
    inset: -22px;
    z-index: -2;
    pointer-events: none;
    background-image: url("images/siare-manufacturing-background-redesign.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(3px) brightness(0.9) saturate(0.82);
    transform: scale(1.035);
}

/* Dark overlays preserve readability while allowing the blurred image to show. */
.mf-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 8, 10, 0.58) 0%, rgba(7, 8, 10, 0.34) 48%, rgba(7, 8, 10, 0.56) 100%),
        linear-gradient(180deg, rgba(7, 8, 10, 0.24) 0%, rgba(7, 8, 10, 0.40) 52%, rgba(7, 8, 10, 0.54) 100%);
}

.mf-page .site-header {
    background: rgba(11, 11, 11, 0.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mf-main {
    width: 100%;
    padding: 0 clamp(24px, 7.2vw, 112px) 44px;
}

/* INTRO */
.mf-back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 38px;
    padding: 12px 16px;
    border: 1px solid rgba(200, 169, 107, 0.48);
    color: rgba(245, 242, 234, 0.82);
    background: transparent;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-decoration: none;
    transition:
        color 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

.mf-back-arrow {
    display: inline-block;
    color: var(--mf-gold);
    font-size: 16px;
    line-height: 1;
    transition: transform 0.35s ease;
}

.mf-back-link:hover,
.mf-back-link:focus-visible {
    color: var(--mf-ink);
    border-color: var(--mf-gold);
    background: rgba(200, 169, 107, 0.08);
}

.mf-back-link:hover .mf-back-arrow,
.mf-back-link:focus-visible .mf-back-arrow {
    transform: translateX(-4px);
}

.mf-back-link:focus-visible {
    outline: 2px solid var(--mf-gold);
    outline-offset: 4px;
}

.mf-intro {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding-top: clamp(144px, 17vh, 190px);
    padding-bottom: clamp(42px, 6vw, 82px);
}

.mf-eyebrow {
    margin: 0 0 22px;
    color: var(--mf-gold);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.24em;
    line-height: 1.6;
}

.mf-eyebrow span {
    padding: 0 5px;
    color: rgba(200, 169, 107, 0.55);
}

.mf-intro h1 {
    max-width: 1000px;
    margin: 0;
    color: var(--mf-ink);
    font-size: clamp(36px, 5.2vw, 70px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.mf-intro-copy {
    max-width: 610px;
    margin: 24px 0 0;
    color: var(--mf-muted);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.8;
    letter-spacing: 0.015em;
}

.mf-intro-rule {
    width: 100%;
    height: 1px;
    margin-top: clamp(34px, 5vw, 66px);
    background: linear-gradient(90deg, rgba(200, 169, 107, 0.55), rgba(200, 169, 107, 0.08) 65%, transparent);
}

/* THREE INTERLEAVED PROCESS ROWS */
.mf-step {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.82fr);
    align-items: center;
    gap: clamp(34px, 7vw, 112px);
    padding: clamp(28px, 5.5vw, 76px) 0;

    /* Unfocused sections remain visible, but are visually quieter. */
    opacity: 0.76;
    transition: opacity 0.55s ease;
}

.mf-step:hover,
.mf-step:focus-within {
    opacity: 1;
}

/* Step 02: make its image column more dominant. */
.mf-step-02 {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(34px, 6vw, 96px);
}

.mf-step-image-wrap {
    position: relative;
    min-width: 0;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: #171512;
}

.mf-step-02 .mf-step-image-wrap-featured {
    aspect-ratio: 4 / 3;
}

.mf-step-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.91) saturate(0.94);
    transform: scale(1);
    transition:
        filter 0.65s ease,
        transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, filter;
}

.mf-step:hover .mf-step-image,
.mf-step:focus-within .mf-step-image {
    filter: brightness(1) saturate(1);
    transform: scale(1.02);
}

.mf-image-index {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 1;
    color: rgba(245, 242, 234, 0.92);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.mf-step-copy {
    max-width: 470px;
    padding: 10px 0;
}

.mf-step-kicker {
    margin: 0 0 22px;
    color: var(--mf-gold);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.19em;
    line-height: 1.6;
}

.mf-step-kicker span {
    padding: 0 5px;
    color: rgba(200, 169, 107, 0.6);
}

.mf-step-copy h2 {
    margin: 0;
    color: var(--mf-ink);
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.mf-step-copy > p:last-child {
    max-width: 440px;
    margin: 22px 0 0;
    color: var(--mf-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.01em;
    transition: color 0.55s ease;
}

.mf-step:hover .mf-step-copy > p:last-child,
.mf-step:focus-within .mf-step-copy > p:last-child {
    color: rgba(245, 242, 234, 0.92);
}

/* Ending signature */
.mf-end-mark {
    width: 100%;
    max-width: 1480px;
    margin: clamp(34px, 5vw, 70px) auto 0;
    padding: 26px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    color: rgba(200, 169, 107, 0.8);
}

.mf-end-mark span {
    display: block;
    width: clamp(22px, 7vw, 100px);
    height: 1px;
    background: rgba(200, 169, 107, 0.3);
}

.mf-end-mark p {
    margin: 0;
    font-size: 9px;
    line-height: 1.8;
    letter-spacing: 0.16em;
    text-align: center;
    white-space: nowrap;
}

.mf-end-mark b {
    padding: 0 5px;
    color: var(--mf-ink);
    font-weight: 400;
}

/* Responsive: tablet */
@media (max-width: 1000px) {
    .mf-main {
        padding-right: 5vw;
        padding-left: 5vw;
    }

    .mf-step,
    .mf-step-02 {
        gap: 34px;
    }

    .mf-step-copy h2 {
        font-size: clamp(26px, 3.4vw, 36px);
    }

    .mf-step-copy > p:last-child {
        font-size: 14px;
        line-height: 1.8;
    }
}

/* Responsive: mobile — keep imagery clearly visible without hover. */
@media (max-width: 760px) {
    .mf-main {
        padding: 0 22px 30px;
    }

    .mf-intro {
        padding-top: 126px;
        padding-bottom: 30px;
    }

    .mf-back-link {
        margin-bottom: 28px;
        padding: 11px 14px;
        font-size: 9px;
    }

    .mf-eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
    }

    .mf-intro h1 {
        font-size: clamp(34px, 9vw, 48px);
        line-height: 1.08;
    }

    .mf-intro-copy {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.75;
    }

    .mf-intro-rule {
        margin-top: 30px;
    }

    .mf-step,
    .mf-step-02 {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 34px 0;
        opacity: 1;
    }

    /* Preserve the intended alternating content order on mobile too. */
    .mf-step-02 .mf-step-copy {
        order: 2;
    }

    .mf-step-02 .mf-step-image-wrap {
        order: 1;
    }

    .mf-step-image-wrap,
    .mf-step-02 .mf-step-image-wrap-featured {
        aspect-ratio: 4 / 3;
    }

    .mf-step-copy {
        max-width: 620px;
        padding: 0;
    }

    .mf-step-kicker {
        margin-bottom: 15px;
        font-size: 10px;
    }

    .mf-step-copy h2 {
        font-size: clamp(28px, 7.5vw, 38px);
    }

    .mf-step-copy > p:last-child {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.8;
    }

    .mf-step-image {
        filter: none;
        transform: none;
    }

    .mf-end-mark {
        gap: 10px;
        margin-top: 24px;
    }

    .mf-end-mark p {
        font-size: 8px;
        letter-spacing: 0.09em;
    }
}

/* For touch devices, never require hovering to see the section clearly. */
@media (hover: none), (pointer: coarse) {
    .mf-step {
        opacity: 1;
    }

    .mf-step-image {
        filter: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mf-step,
    .mf-step-image,
    .mf-step-copy > p:last-child {
        transition: none;
    }
}


/* =========================================================
   SHARED LANGUAGE SWITCH + ARABIC RTL SUPPORT
   These rules affect this detail page only.
========================================================= */
.mf-page .language-switch.is-open .language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mf-page .language-switch.is-dismissed .language-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
}

html[dir="rtl"] .mf-page {
    direction: rtl;
}

html[dir="rtl"] .mf-page .mf-intro-rule {
    background: linear-gradient(270deg, rgba(200, 169, 107, 0.55), rgba(200, 169, 107, 0.08) 65%, transparent);
}

html[dir="rtl"] .mf-page .mf-image-index {
    left: auto;
    right: 18px;
}

html[dir="rtl"] .mf-page .mf-back-arrow {
    transform: scaleX(-1);
}

html[dir="rtl"] .mf-page .mf-back-link:hover .mf-back-arrow,
html[dir="rtl"] .mf-page .mf-back-link:focus-visible .mf-back-arrow {
    transform: scaleX(-1) translateX(-4px);
}

html[dir="rtl"] .mf-page .language-menu {
    right: auto;
    left: 0;
}

@media (max-width: 760px) {
    html[dir="rtl"] .mf-page .mf-end-mark {
        direction: rtl;
    }
}


/* SIARE MANUFACTURING DETAIL — more editorial, less slide-like */
:root{--mf-ink:#1c1b17;--mf-paper:#f5f2eb;--mf-gold:#c8a96b}
body{background:#11100d;color:#f5f2ea}
.site-header{background:rgba(10,10,9,.88);border-bottom:1px solid rgba(221,199,142,.2);backdrop-filter:blur(16px)}
.mf-main{width:min(1480px,100%);margin:0 auto;padding:0 clamp(20px,5vw,80px) 90px}
.mf-intro{min-height:440px;padding:clamp(90px,12vw,165px) 0 70px}
.mf-intro h1{font-size:clamp(44px,6vw,82px);letter-spacing:-.04em;line-height:1.02}
.mf-intro p{max-width:620px;line-height:1.9;color:rgba(245,242,234,.72)}
.mf-step{min-height:0;padding:clamp(48px,7vw,92px) 0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(26px,5vw,72px);align-items:center;border-top:1px solid rgba(221,199,142,.18)}
.mf-step-02{grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr)}
.mf-step-image-wrap{border:1px solid rgba(221,199,142,.2);background:#24211a}
.mf-step-image{filter:saturate(.9);transition:transform .55s ease,filter .35s ease}
.mf-step:hover .mf-step-image{filter:saturate(1.04)}
.mf-step-copy h2{font-size:clamp(32px,4vw,53px);line-height:1.04;letter-spacing:-.03em}
.mf-step-copy>p:last-child{font-size:13px;line-height:1.9;color:rgba(245,242,234,.7);max-width:590px}
.mf-step-kicker{font-size:8px;letter-spacing:.2em;color:#d8bc7f}
@media(max-width:800px){.mf-main{padding:0 20px 54px}.mf-intro{min-height:0;padding:98px 0 40px}.mf-step,.mf-step-02{grid-template-columns:minmax(0,1fr);gap:22px;padding:40px 0}.mf-step-02 .mf-step-image-wrap{order:0}.mf-step-02 .mf-step-copy{order:1}.mf-step-copy h2{font-size:36px}}