/* =========================================================
   PHOENIX KIAN JAYA 2026
   COMPLETE TEMPLATE.CSS
   Homepage + Product Page + Floating Style Navbar
========================================================= */


/* =========================================================
   01. RESET / BASE
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color: #121820;
    background: #ffffff;

    font-size: 16px;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.phoenix-container {
    width: min(
        1240px,
        calc(100% - 48px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   12. HOMEPAGE HERO
========================================================= */

.phoenix-hero {
    position: relative;

    overflow: hidden;

    padding-top: 94px;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(225,233,238,0.85),
            transparent 35%
        ),
        linear-gradient(
            90deg,
            #f5f8fa 0%,
            #ffffff 58%
        );
}

.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1.15fr);

    min-height: 640px;
}


/* =========================================================
   13. HERO COPY
========================================================= */

.hero-copy {
    position: relative;

    z-index: 3;

    padding:
        82px
        55px
        68px
        0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

    color: #e30613;

    font-size: 11px;
    font-weight: 800;

    letter-spacing:
        0.14em;
}

.hero-eyebrow > span {
    width: 28px;
    height: 2px;

    background: #e30613;
}

.hero-copy h1 {
    max-width: 590px;

    margin: 0;

    color: #10161d;

    font-size:
        clamp(
            44px,
            4.1vw,
            62px
        );

    font-weight: 800;

    line-height: 1.02;

    letter-spacing:
        -0.055em;
}

.hero-copy h1 strong {
    color: #e30613;
}

.hero-description {
    max-width: 520px;

    margin:
        27px
        0
        0;

    color: #5e6670;

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


/* =========================================================
   14. HERO BUTTONS
========================================================= */

.hero-actions {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 31px;
}

.btn-primary,
.btn-secondary {
    min-height: 52px;

    padding:
        0
        25px;

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

    gap: 17px;

    border-radius: 999px;

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

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-primary {
    background: #e30613;
    color: #ffffff;

    box-shadow:
        0
        12px
        30px
        rgba(227,6,19,0.20);
}

.btn-primary:hover {
    background: #c8000c;
    color: #ffffff;

    transform:
        translateY(-2px);
}

.btn-primary span {
    font-size: 18px;
}

.btn-secondary {
    border:
        1px solid
        #1f252c;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    color: #151b21;
}

.btn-secondary:hover {
    background: #151b21;
    color: #ffffff;

    transform:
        translateY(-2px);
}


/* =========================================================
   15. HERO BENEFITS
========================================================= */

.hero-benefits {
    display: flex;
    flex-wrap: wrap;

    gap: 28px;

    margin-top: 49px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;

    gap: 11px;
}

.benefit-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border:
        1px solid
        #e30613;

    border-radius: 50%;

    color: #e30613;

    font-size: 13px;
    font-weight: 800;
}

.benefit-item strong {
    display: block;

    margin-bottom: 2px;

    color: #1a2027;

    font-size: 12px;
}

.benefit-item span {
    display: block;

    max-width: 130px;

    color: #7c838a;

    font-size: 10px;
    line-height: 1.45;
}


/* =========================================================
   16. HERO IMAGE
========================================================= */

.hero-visual {
    position: relative;

    min-height: 640px;

    overflow: hidden;
}

.hero-visual::before {
    content: "";

    position: absolute;

    z-index: 2;

    inset:
        0
        auto
        0
        0;

    width: 25%;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255,255,255,0.55) 32%,
            transparent 100%
        );

    pointer-events: none;
}

.hero-image {
    position: absolute !important;

    top: 50% !important;
    left: 56% !important;

    width: 82% !important;
    height: 82% !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: translate(-50%, -50%) !important;
}

.hero-visual:hover
.hero-image {
    transform:
        scale(1.025);
}



/* =========================================================
   18. TRUST SECTION
========================================================= */

.trust-section {
    padding:
        26px
        0;

    background: #ffffff;

    border-bottom:
        1px solid
        #eeeeee;
}

.trust-section p {
    margin: 0;

    text-align: center;

    color: #777e85;

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

    letter-spacing:
        0.025em;
}


/* =========================================================
   19. GENERAL SECTION
========================================================= */

.section-label {
    display: block;

    margin-bottom: 10px;

    color: #e30613;

    font-size: 10px;
    font-weight: 800;

    letter-spacing:
        0.14em;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 40px;
}

.section-heading > div {
    flex: 1;
}

.section-heading h2 {
    margin: 0;

    color: #141a20;

    font-size:
        clamp(
            34px,
            3.2vw,
            48px
        );

    font-weight: 800;

    line-height: 1.06;

    letter-spacing:
        -0.045em;
}

.section-heading > p {
    max-width: 430px;

    margin: 0;

    color: #6e757d;

    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   20. HOMEPAGE PRODUCTS
========================================================= */

.products-section {
    padding:
        92px
        0
        100px;

    background: #ffffff;
}

.product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 19px;
}

.product-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        #eceff2;

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0
        6px
        24px
        rgba(17,24,39,0.04);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.product-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0
        22px
        46px
        rgba(17,24,39,0.11);
}

.product-image {
    position: relative;

    height: 235px;

    overflow: hidden;

    background: #f1f3f5;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.product-card:hover
.product-image img {
    transform:
        scale(1.045);
}

.product-content {
    position: relative;

    min-height: 205px;

    padding:
        22px
        21px
        24px;
}

.product-content > span {
    display: block;

    margin-bottom: 12px;

    color: #e30613;

    font-size: 9px;
    font-weight: 800;
}

.product-content h3 {
    margin:
        0
        0
        10px;

    color: #151b21;

    font-size: 18px;
}

.product-content p {
    margin:
        0
        0
        24px;

    color: #717980;

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

.product-content a {
    position: absolute;

    left: 21px;
    bottom: 22px;

    color: #e30613;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   21. ABOUT
========================================================= */

.about-section {
    padding:
        100px
        0;

    background: #f5f7f8;
}

.about-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.06fr)
        minmax(0,0.94fr);

    gap: 75px;

    align-items: center;
}

.about-image {
    position: relative;

    overflow: hidden;

    min-height: 510px;

    border-radius: 22px;

    background: #e8ecef;

    box-shadow:
        0
        25px
        60px
        rgba(17,24,39,0.12);
}

.about-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.about-content h2 {
    max-width: 560px;

    margin:
        0
        0
        24px;

    color: #141a20;

    font-size:
        clamp(
            38px,
            4vw,
            55px
        );

    font-weight: 800;

    line-height: 1.04;

    letter-spacing:
        -0.05em;
}

.about-content > p {
    max-width: 580px;

    margin:
        0
        0
        14px;

    color: #626a72;

    font-size: 14px;
    line-height: 1.75;
}

.about-stats {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 16px;

    margin-top: 37px;

    padding-top: 29px;

    border-top:
        1px solid
        #dfe3e6;
}

.about-stats strong {
    display: block;

    color: #e30613;

    font-size: 27px;
    font-weight: 800;
}

.about-stats span {
    color: #747b82;

    font-size: 10px;
}


/* =========================================================
   22. PORTFOLIO
========================================================= */

.portfolio-section {
    padding:
        100px
        0;

    background: #ffffff;
}

.portfolio-home-grid {
    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    grid-template-rows:
        310px
        310px
        310px;

    gap: 18px;
}

.portfolio-home-card {
    position: relative;

    overflow: hidden;

    border-radius: 20px;

    background: #111820;
}

.portfolio-home-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.55s ease;
}

.portfolio-home-card:hover img {
    transform:
        scale(1.045);
}

.portfolio-home-card:nth-child(1) {
    grid-column: 1;

    grid-row:
        1 / span 2;
}

.portfolio-home-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.portfolio-home-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.portfolio-home-card:nth-child(4) {
    grid-column:
        1 / span 2;

    grid-row: 3;
}

.portfolio-home-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(8,12,16,0.82) 100%
        );
}

.portfolio-overlay {
    position: absolute;

    z-index: 2;

    left: 26px;
    right: 26px;
    bottom: 24px;

    color: #ffffff;
}

.portfolio-overlay span {
    color: #ff4c55;

    font-size: 10px;
    font-weight: 800;
}

.portfolio-overlay h3 {
    margin: 5px 0 0;

    font-size: 24px;
}


   24. JOOMLA COMPONENT
========================================================= */

.phoenix-component {
    width:
        min(
            1240px,
            calc(100% - 48px)
        );

    margin:
        0
        auto;

    padding:
        120px
        0
        70px;
}


/* =========================================================
   25. FOOTER
========================================================= */

.phoenix-footer {
    background: #111820;

    color: #ffffff;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        0.85fr
        0.85fr
        1fr;

    gap: 55px;

    padding:
        70px
        0
        65px;
}

.footer-brand img {
    width: 180px;

    margin-bottom: 22px;
}

.footer-brand p {
    max-width: 290px;

    color:
        rgba(
            255,
            255,
            255,
            0.57
        );

    font-size: 11px;
}

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.footer-column h4 {
    margin:
        0
        0
        19px;

    font-size: 12px;
}

.footer-column a {
    margin-bottom: 10px;

    color:
        rgba(
            255,
            255,
            255,
            0.60
        );

    font-size: 11px;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );
}

.footer-bottom
.phoenix-container {
    min-height: 65px;

    display: flex;

    align-items: center;
}

.footer-bottom span {
    color:
        rgba(
            255,
            255,
            255,
            0.36
        );

    font-size: 10px;
}


/* =========================================================
   26. FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;

    z-index: 999999 !important;

    width: 58px !important;
    height: 58px !important;

    display: flex !important;

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

    border-radius: 50% !important;

    background: #25D366 !important;

    color: #ffffff !important;

    box-shadow:
        0
        10px
        25px
        rgba(0,0,0,0.18) !important;
}

.floating-whatsapp
.wa-svg {
    width: 31px !important;
    height: 31px !important;

    color: #ffffff !important;

    fill: currentColor !important;
}

.floating-whatsapp:hover {
    background: #20bd5a !important;

    transform:
        translateY(-4px)
        scale(1.05);
}


/* =========================================================
   27. PRODUCT PAGE HERO
========================================================= */

.product-page-hero {
    padding:
        145px
        0
        55px;

    background:
        linear-gradient(
            135deg,
            #f5f7f9,
            #ffffff
        );
}

.product-page-label {
    color: #e30613;

    font-size: 10px;
    font-weight: 800;

    letter-spacing:
        0.14em;
}

.product-page-hero h1 {
    max-width: 760px;

    margin:
        13px
        0
        0;

    font-size:
        clamp(
            44px,
            4.6vw,
            64px
        );

    line-height: 1.02;
}

.product-page-hero p {
    max-width: 610px;

    margin-top: 18px;

    color: #68717a;

    font-size: 14px;
}


/* =========================================================
   28. PRODUCT CATALOG
========================================================= */

.product-catalog-page {
    padding:
        55px
        0
        85px;
}

.catalog-search {
    position: relative;

    margin-bottom: 26px;
}

.catalog-search input {
    width: 100%;

    min-height: 56px;

    padding:
        0
        54px
        0
        20px;

    border:
        1px solid
        #e2e6e9;

    border-radius: 9px;

    outline: none;
}

.catalog-search-icon {
    position: absolute;

    right: 20px;
    top: 50%;

    transform:
        translateY(-50%);
}


/* =========================================================
   29. CATALOG LAYOUT
========================================================= */

.catalog-layout {
    display: grid;

    grid-template-columns:
        240px
        minmax(0,1fr);

    gap: 34px;
}


/* =========================================================
   30. CATALOG SIDEBAR
========================================================= */

.catalog-sidebar-inner {
    position: sticky;

    top: 115px;
}

.catalog-sidebar h3 {
    font-size: 17px;
}

.catalog-filter {
    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 11px;

    border: 0;

    background: transparent;

    color: #69717a;

    font-size: 12px;
}

.catalog-filter > span {
    width: 15px;
    height: 15px;

    border:
        1px solid
        #b8bec4;

    border-radius: 3px;
}

.catalog-filter.active {
    color: #151b21;

    font-weight: 700;
}

.catalog-filter.active > span {
    background: #e30613;

    border-color: #e30613;

    box-shadow:
        inset
        0
        0
        0
        3px
        #ffffff;
}


/* =========================================================
   31. PRODUCT GRID
========================================================= */

.catalog-topbar {
    min-height: 42px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 16px;

    font-size: 11px;
}

.catalog-product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        28px
        20px;
}

.catalog-product-image {
    display: block;

    height: 235px;

    overflow: hidden;

    border-radius: 10px;

    background: #f1f3f5;
}

.catalog-product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.catalog-product-card:hover
.catalog-product-image img {
    transform:
        scale(1.045);
}

.catalog-product-content {
    padding-top: 12px;
}

.catalog-category {
    color: #888f96;

    font-size: 9px;
}

.catalog-product-content h2 {
    margin:
        3px
        0
        0;

    font-size: 16px;
}

.catalog-product-link {
    display: inline-block;

    margin-top: 9px;

    background: transparent !important;

    color: #e30613 !important;

    font-size: 11px;

    font-weight: 700;

    box-shadow: none !important;
}


/* =========================================================
   32. PRODUCT CTA
========================================================= */

.product-page-cta {
    padding:
        55px
        0;

    background:
        linear-gradient(
            110deg,
            #e30613,
            #bd000a
        );

    color: #ffffff;
}

.product-page-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.product-page-cta h2 {
    max-width: 650px;

    margin: 0;

    font-size:
        clamp(
            32px,
            3.2vw,
            44px
        );
}

.product-page-cta a {
    padding:
        13px
        23px;

    border-radius: 999px;

    background: #ffffff;

    color: #111820;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   33. RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .phoenix-nav-shell {
        padding:
            0
            30px;
    }

    .phoenix-nav-left,
    .phoenix-nav-right {
        gap: 22px;
    }

    .phoenix-nav-left a,
    .phoenix-nav-right a {
        font-size: 12px;
    }

    .phoenix-center-logo {
        min-width: 175px;
    }

    .phoenix-center-logo img {
        width: 155px;
    }

    .product-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

}


@media (max-width: 1024px) {

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 460px;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-home-grid {
        grid-template-columns: 1fr;

        grid-template-rows: none;

        grid-auto-rows: 320px;
    }

    .portfolio-home-card:nth-child(1),
    .portfolio-home-card:nth-child(2),
    .portfolio-home-card:nth-child(3),
    .portfolio-home-card:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
    }

    .cta-contact-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 780px) {

    .phoenix-header {
        top: 14px;

        padding:
            0
            14px;
    }

    .phoenix-nav-shell {
        height: 62px;

        padding:
            0
            14px
            0
            19px;

        grid-template-columns:
            1fr
            auto;
    }

    .phoenix-nav-left,
    .phoenix-nav-right {
        display: none;
    }

    .phoenix-center-logo {
        min-width: 0;

        justify-content: flex-start;
    }

    .phoenix-center-logo img {
        width: 150px;

        height: 42px;
    }

    .promindo-menu-toggle {
        display: block;
    }

}


@media (max-width: 750px) {

    .product-page-hero {
        padding:
            115px
            0
            40px;
    }

    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar-inner {
        position: static;
    }

    .catalog-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .product-page-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 700px) {

    .phoenix-container {
        width:
            calc(
                100% - 28px
            );
    }

    .hero-copy h1 {
        font-size: 38px;
    }

    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .hero-benefits {
        display: grid;

        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .floating-whatsapp {
        right: 16px !important;
        bottom: 16px !important;

        width: 54px !important;
        height: 54px !important;
    }

}


@media (max-width: 500px) {

    .product-page-hero h1 {
        font-size: 34px;
    }

    .catalog-product-grid {
        grid-template-columns: 1fr;
    }

    .catalog-product-image {
        height: 260px;
    }

}


@media (max-width: 420px) {

    .phoenix-center-logo img {
        width: 135px;
    }

    .hero-copy h1 {
        font-size: 33px;
    }

    .floating-whatsapp {
        right: 14px !important;
        bottom: 14px !important;

        width: 52px !important;
        height: 52px !important;
    }

}
/* FINAL FORCE WHITE NAVBAR LOGO */

.phoenix-header
.phoenix-nav-shell
.phoenix-center-logo
img {
    filter:
        brightness(0)
        saturate(100%)
        invert(100%) !important;

    -webkit-filter:
        brightness(0)
        saturate(100%)
        invert(100%) !important;

    opacity: 1 !important;
}

/* =========================================================
   PRODUCT DETAIL PAGE
========================================================= */

.detail-product-page {
    background: #ffffff;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.detail-breadcrumb {
    padding:
        125px
        0
        20px;

    background: #ffffff;
}

.detail-breadcrumb
.phoenix-container {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #8a9096;

    font-size: 11px;
}

.detail-breadcrumb a {
    transition:
        color .2s ease;
}

.detail-breadcrumb a:hover {
    color: #e30613;
}

.detail-breadcrumb strong {
    color: #151b21;

    font-weight: 600;
}


/* =========================================================
   PRODUCT HERO
========================================================= */

.detail-product-hero {
    padding:
        20px
        0
        90px;
}

.detail-product-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    gap: 75px;

    align-items: start;
}


/* =========================================================
   GALLERY
========================================================= */

.detail-main-image {
    height: 580px;

    overflow: hidden;

    border-radius: 24px;

    background: #f3f5f6;
}

.detail-main-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease;
}

.detail-main-image:hover img {
    transform:
        scale(1.02);
}


.detail-thumbnails {
    display: flex;

    gap: 12px;

    margin-top: 14px;
}


.detail-thumb {
    width: 86px;
    height: 86px;

    padding: 0;

    overflow: hidden;

    border:
        2px solid
        transparent;

    border-radius: 12px;

    background: #f4f5f6;

    cursor: pointer;

    transition:
        border-color .2s ease;
}


.detail-thumb.active {
    border-color: #e30613;
}


.detail-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.detail-product-info {
    padding-top: 20px;
}


.detail-product-category {
    display: block;

    margin-bottom: 14px;

    color: #e30613;

    font-size: 10px;
    font-weight: 800;

    letter-spacing:
        .15em;
}


.detail-product-info h1 {
    margin: 0;

    color: #111820;

    font-size:
        clamp(
            50px,
            5vw,
            72px
        );

    font-weight: 800;

    line-height: .95;

    letter-spacing:
        -.055em;
}


.detail-product-intro {
    max-width: 550px;

    margin:
        27px
        0
        0;

    color: #687078;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   FEATURES
========================================================= */

.detail-product-features {
    margin-top: 36px;

    padding-top: 30px;

    border-top:
        1px solid
        #e8ebed;
}


.detail-feature {
    display: grid;

    grid-template-columns:
        36px
        1fr;

    gap: 14px;

    margin-bottom: 22px;
}


.detail-feature-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border:
        1px solid
        #e30613;

    border-radius: 50%;

    color: #e30613;

    font-size: 11px;
    font-weight: 800;
}


.detail-feature strong {
    display: block;

    margin-bottom: 4px;

    color: #151b21;

    font-size: 13px;
}


.detail-feature p {
    max-width: 440px;

    margin: 0;

    color: #7a8187;

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   BUTTONS
========================================================= */

.detail-product-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}


.detail-primary-button,
.detail-secondary-button {
    min-height: 52px;

    padding:
        0
        24px;

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

    gap: 16px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    transition:
        .2s ease;
}


.detail-primary-button {
    background: #e30613;

    color: #ffffff;

    box-shadow:
        0
        12px
        28px
        rgba(227,6,19,.18);
}


.detail-primary-button:hover {
    background: #c9000c;

    color: #ffffff;

    transform:
        translateY(-2px);
}


.detail-secondary-button {
    border:
        1px solid
        #d8dcdf;

    color: #181e24;
}


.detail-secondary-button:hover {
    border-color: #181e24;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.detail-product-description {
    padding:
        90px
        0;

    background: #f5f7f8;
}


.detail-description-grid {
    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 80px;
}


.detail-section-label {
    display: block;

    margin-bottom: 12px;

    color: #e30613;

    font-size: 9px;
    font-weight: 800;

    letter-spacing:
        .15em;
}


.detail-description-grid h2,
.detail-showcase-heading h2 {
    margin: 0;

    color: #151b21;

    font-size:
        clamp(
            36px,
            4vw,
            52px
        );

    line-height: 1.03;

    letter-spacing:
        -.045em;
}


.detail-description-copy p {
    margin:
        0
        0
        18px;

    color: #636b73;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   SHOWCASE
========================================================= */

.detail-product-showcase {
    padding:
        95px
        0;
}


.detail-showcase-heading {
    max-width: 650px;

    margin-bottom: 40px;
}


.detail-showcase-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 20px;
}


.detail-showcase-card {
    position: relative;

    height: 430px;

    overflow: hidden;

    border-radius: 20px;

    background: #111820;
}


.detail-showcase-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.detail-showcase-card:hover img {
    transform:
        scale(1.04);
}


.detail-showcase-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.78)
        );
}


.detail-showcase-card > div {
    position: absolute;

    z-index: 2;

    left: 24px;
    right: 24px;
    bottom: 22px;

    color: #ffffff;
}


.detail-showcase-card span {
    color: #ff535a;

    font-size: 9px;
    font-weight: 800;

    letter-spacing:
        .12em;
}


.detail-showcase-card h3 {
    margin:
        5px
        0
        0;

    font-size: 23px;
}


/* =========================================================
   DETAIL CTA
========================================================= */

.detail-product-cta {
    padding:
        65px
        0;

    background:
        linear-gradient(
            110deg,
            #e30613,
            #ba000a
        );

    color: #ffffff;
}


.detail-product-cta-inner {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 50px;
}


.detail-product-cta-inner > div {
    max-width: 700px;
}


.detail-product-cta span {
    display: block;

    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing:
        .14em;
}


.detail-product-cta h2 {
    margin: 0;

    font-size:
        clamp(
            34px,
            4vw,
            49px
        );

    line-height: 1.03;

    letter-spacing:
        -.04em;
}


.detail-product-cta p {
    margin:
        15px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            .78
        );

    font-size: 12px;
}


.detail-product-cta > div > a {
    flex-shrink: 0;

    padding:
        14px
        25px;

    border-radius: 999px;

    background: #ffffff;

    color: #111820;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   DETAIL RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .detail-product-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .detail-main-image {
        height: 520px;
    }

    .detail-description-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

}


@media (max-width: 700px) {

    .detail-breadcrumb {
        padding-top: 105px;
    }

    .detail-product-hero {
        padding-bottom: 60px;
    }

    .detail-main-image {
        height: 380px;

        border-radius: 16px;
    }

    .detail-product-info h1 {
        font-size: 45px;
    }

    .detail-product-actions {
        flex-direction: column;
    }

    .detail-primary-button,
    .detail-secondary-button {
        width: 100%;
    }

    .detail-product-description,
    .detail-product-showcase {
        padding:
            65px
            0;
    }

    .detail-showcase-grid {
        grid-template-columns: 1fr;
    }

    .detail-showcase-card {
        height: 330px;
    }

    .detail-product-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}

/* =========================================================
   NAVBAR — FINAL / PROMINDO STYLE
========================================================= */

.phoenix-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 99999;
    width: 100%;
    padding-top: 10px;
    pointer-events: none;
    transition: padding .3s ease;
}

.phoenix-nav-shell {
    position: relative;
    width: min(930px, calc(100% - 40px));
    height: 54px;
    margin: 0 auto;
    padding: 0 34px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(116, 17, 31, .96);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    transition: width .35s ease, height .35s ease, background .35s ease,
                box-shadow .35s ease;
}

.phoenix-nav-shell::before,
.phoenix-nav-shell::after {
    content: none;
    display: none;
}

.phoenix-nav-left,
.phoenix-nav-right {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.phoenix-nav-left { justify-content: flex-start; }
.phoenix-nav-right { justify-content: flex-end; }

.phoenix-nav-left a,
.phoenix-nav-right a {
    position: relative;
    min-height: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: .92;
    transition: opacity .2s ease;
}

.phoenix-nav-left a:hover,
.phoenix-nav-right a:hover {
    opacity: 1;
}

.phoenix-nav-left a::after,
.phoenix-nav-right a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 9px;
    width: 0;
    height: 2px;
    border-radius: 99px;
    background: #fff;
    transition: width .2s ease;
}

.phoenix-nav-left a:hover::after,
.phoenix-nav-right a:hover::after {
    width: 100%;
}

.phoenix-center-logo {
    position: relative;
    z-index: 2;
    min-width: 180px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.phoenix-center-logo img {
    display: block;
    width: 145px;
    height: 34px;
    margin: 0;
    object-fit: contain;
    object-position: center;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    transition: width .3s ease, height .3s ease, transform .2s ease;
}

.phoenix-center-logo:hover img {
    transform: scale(1.025);
}

.promindo-menu-toggle {
    position: relative;
    z-index: 2;
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}

.promindo-menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    margin: 4px auto;
    border-radius: 5px;
    background: #fff;
    transition: .25s ease;
}

.promindo-menu-toggle.is-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.promindo-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.promindo-menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.promindo-mobile-menu {
    display: none;
    width: min(600px, calc(100% - 48px));
    margin: 10px auto 0;
    padding: 15px;
    border-radius: 22px;
    background: rgba(87, 10, 21, .96);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
}

.promindo-mobile-menu.is-open { display: block; }

.promindo-mobile-menu a {
    width: 100%;
    min-height: 46px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.promindo-mobile-menu a:hover {
    background: rgba(255, 255, 255, .10);
}

.promindo-mobile-menu .mobile-wa-link {
    margin-top: 8px;
    justify-content: center;
    background: #fff;
    color: #a30012;
}

.phoenix-header.is-scrolled {
    padding-top: 8px;
}

.phoenix-header.is-scrolled .phoenix-nav-shell {
    width: min(900px, calc(100% - 46px));
    height: 50px;
    background: rgba(105, 105, 105, .72);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.phoenix-header.is-scrolled .phoenix-center-logo img {
    width: 138px;
    height: 32px;
}

@media (max-width: 760px) {
    .phoenix-header { padding-top: 8px; }

    .phoenix-nav-shell,
    .phoenix-header.is-scrolled .phoenix-nav-shell {
        width: calc(100% - 24px);
        height: 54px;
        padding: 0 18px;
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .phoenix-nav-left,
    .phoenix-nav-right {
        display: none !important;
    }

    .phoenix-center-logo {
        min-width: 0;
        justify-content: flex-start;
    }

    .phoenix-center-logo img,
    .phoenix-header.is-scrolled .phoenix-center-logo img {
        width: 145px;
        height: 36px;
    }

    .promindo-menu-toggle {
        display: block;
    }
}


/* =========================================================
   HERO FLOATING CARD — FINAL POSITION
========================================================= */

.hero-floating-card {
    display: none !important;
    /*position: absolute;*/
    /*z-index: 5;*/
    /*right: 20px;*/
    /*bottom: 65px;*/
    /*width: 225px;*/
    /*padding: 24px;*/
    /*border: 1px solid rgba(255, 255, 255, .12);*/
    /*border-radius: 17px;*/
    /*background: rgba(13, 19, 26, .90);*/
    /*color: #fff;*/
    /*box-shadow: 0 22px 55px rgba(0, 0, 0, .25);*/
    /*backdrop-filter: blur(12px);*/
    /*transform: translateX(-5px);*/
}

.hero-floating-card small {
    display: block;
    margin-bottom: 13px;
    color: #ff4b53;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.hero-floating-card strong {
    display: block;
    margin-bottom: 13px;
    font-size: 27px;
    line-height: 1.05;
}

.hero-floating-card span {
    color: rgba(255, 255, 255, .65);
    font-size: 10px;
    line-height: 1.6;
}


/* =========================================================
   HOMEPAGE PRODUCT CAROUSEL — IMAGE ONLY
========================================================= */

.homepage-product-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.homepage-product-track {
    width: 100%;
    padding: 4px 2px 22px;
    display: flex;
    align-items: stretch;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.homepage-product-track::-webkit-scrollbar { display: none; }

.homepage-product-track .product-card {
    position: relative;
    flex: 0 0 calc((100% - 44px) / 3);
    aspect-ratio: 1 / 1;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    scroll-snap-align: start;
}

.homepage-product-track .product-card::before,
.homepage-product-track .product-card::after,
.homepage-product-track .product-content {
    content: none;
    display: none;
}

.homepage-product-track .product-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: inherit;
}

.homepage-product-track .product-image img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    transition: transform .5s ease;
}

.homepage-product-track .product-card:hover .product-image img {
    transform: scale(1.04);
}

@media (max-width: 1000px) {
    .homepage-product-track { gap: 18px; }
    .homepage-product-track .product-card {
        flex-basis: calc((100% - 18px) / 2);
    }
}

@media (max-width: 700px) {
    .homepage-product-slider { overflow: visible; }
    .homepage-product-track {
        gap: 14px;
        margin-right: -14px;
        padding-right: 14px;
    }
    .homepage-product-track .product-card { flex-basis: 82%; }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-product-track { scroll-behavior: auto; }
    .homepage-product-track .product-image img { transition: none; }
}


/* =========================================================
   CTA OFFICE — FINAL
========================================================= */

.cta-section,
.cta-office-wrap,
.cta-office-grid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.cta-section,
.cta-office-wrap {
    overflow: hidden;
    background: #e70025;
}

.cta-office-grid {
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
    gap: 0;
}

.cta-office-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 72px 70px 72px 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #e70025;
    color: #fff;
}

.cta-office-label {
    display: block;
    margin-bottom: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.cta-office-copy h2 {
    max-width: 620px;
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(42px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -2px;
}

.cta-office-copy p {
    max-width: 620px;
    margin: 0 0 34px;
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
    line-height: 1.6;
}

.cta-office-button {
    width: fit-content;
    min-height: 54px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: #111820;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    transition: transform .25s ease, box-shadow .25s ease;
}

.cta-office-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.cta-office-visual {
    position: relative;
    width: calc(100% + 8px);
    min-width: 0;
    min-height: 520px;
    margin-left: -8px;
    overflow: hidden;
    background: #e70025;
}

.cta-office-visual img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    border: 0;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
}

.cta-office-visual::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 -1px;
    width: 130px;
    background: linear-gradient(
        90deg,
        #e70025 0%,
        rgba(231, 0, 37, .78) 35%,
        rgba(231, 0, 37, .28) 68%,
        rgba(231, 0, 37, 0) 100%
    );
    pointer-events: none;
}

.phoenix-footer {
    position: relative;
    z-index: 5;
    margin-top: 0;
}

@media (max-width: 1000px) {
    .cta-office-grid {
        grid-template-columns: 1fr 1fr;
        min-height: 460px;
    }

    .cta-office-copy {
        padding: 60px 36px 60px 54px;
    }

    .cta-office-copy h2 {
        font-size: clamp(38px, 5vw, 54px);
    }

    .cta-office-visual {
        min-height: 460px;
    }
}

@media (max-width: 760px) {
    .cta-office-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .cta-office-copy {
        padding: 52px 24px 42px;
    }

    .cta-office-copy h2 {
        max-width: 100%;
        font-size: clamp(36px, 11vw, 50px);
        line-height: 1;
    }

    .cta-office-copy p { max-width: 100%; }

    .cta-office-visual {
        width: 100%;
        min-height: 360px;
        margin: 0;
        border-radius: 24px 24px 0 0;
    }

    .cta-office-visual::before { display: none; }
}

/* =========================================================
   CONTACT PAGE
========================================================= */
.contact-page{background:#fff;color:#121820}
.contact-hero{padding:150px 0 88px;background:radial-gradient(circle at 85% 20%,rgba(227,6,19,.08),transparent 28%),linear-gradient(135deg,#f7f8f9 0%,#fff 68%);border-bottom:1px solid #eceff2}
.contact-eyebrow{display:inline-flex;margin-bottom:18px;color:#e30613;font-size:11px;font-weight:800;letter-spacing:.14em}
.contact-hero h1{max-width:760px;margin:0;font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-.055em}
.contact-hero p{max-width:620px;margin:26px 0 0;color:#69717a;font-size:16px;line-height:1.8}
.contact-main{padding:96px 0 110px}
.contact-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:72px;align-items:start}
.contact-info{position:sticky;top:90px}
.contact-info h2{margin:0;font-size:clamp(38px,4vw,54px);line-height:1.02;letter-spacing:-.045em}
.contact-intro{max-width:500px;margin:22px 0 34px;color:#6c747c;font-size:14px;line-height:1.75}
.contact-info-list{display:grid;gap:12px}
.contact-info-card{min-height:102px;padding:18px;display:flex;align-items:center;gap:16px;border:1px solid #e9ecef;border-radius:18px;background:#fff;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.contact-info-card:hover{transform:translateY(-3px);border-color:rgba(227,6,19,.24);box-shadow:0 18px 38px rgba(17,24,39,.08)}
.contact-info-icon{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:50%;background:#f8ecee;color:#e30613;font-size:11px;font-weight:800}
.contact-info-card>span:last-child{min-width:0}.contact-info-card small,.contact-info-card strong,.contact-info-card em{display:block}
.contact-info-card small{margin-bottom:3px;color:#e30613;font-size:9px;font-weight:800;letter-spacing:.10em}
.contact-info-card strong{color:#141a20;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.contact-info-card em{margin-top:3px;color:#8a9198;font-size:10px;font-style:normal}
.contact-form-card{padding:42px;border:1px solid #e7eaed;border-radius:28px;background:#f7f8f9;box-shadow:0 24px 60px rgba(17,24,39,.08)}
.contact-form-heading>span{display:block;margin-bottom:9px;color:#e30613;font-size:10px;font-weight:800;letter-spacing:.12em}
.contact-form-heading h2{margin:0;font-size:clamp(32px,3.2vw,46px);line-height:1.05;letter-spacing:-.04em}
.contact-form-heading p{max-width:540px;margin:15px 0 30px;color:#747c84;font-size:13px;line-height:1.7}
.contact-form{display:grid;gap:18px}.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-field{display:grid;gap:7px}
.contact-field label{color:#343b42;font-size:11px;font-weight:700}
.contact-field input,.contact-field select,.contact-field textarea{width:100%;border:1px solid #dfe3e6;border-radius:13px;outline:0;background:#fff;color:#141a20;font-size:13px;transition:border-color .2s ease,box-shadow .2s ease}
.contact-field input,.contact-field select{height:52px;padding:0 15px}.contact-field textarea{min-height:150px;padding:14px 15px;resize:vertical}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{border-color:rgba(227,6,19,.55);box-shadow:0 0 0 4px rgba(227,6,19,.07)}
.contact-submit{min-height:54px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:18px;border:0;border-radius:999px;background:#e30613;color:#fff;font-size:13px;font-weight:700;transition:transform .2s ease,background .2s ease}.contact-submit:hover{background:#c8000c;transform:translateY(-2px)}.contact-submit span{font-size:19px}
.contact-quick-help{padding:100px 0;background:#f5f7f8}.contact-section-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:42px}.contact-section-heading h2{margin:0;font-size:clamp(36px,4vw,52px);line-height:1.04;letter-spacing:-.045em}.contact-section-heading>p{max-width:430px;margin:0;color:#727a82;font-size:13px;line-height:1.7}
.contact-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.contact-help-grid article{min-height:220px;padding:28px;border-radius:22px;background:#fff;border:1px solid #e8ebed}.contact-help-grid article>span{color:#e30613;font-size:10px;font-weight:800}.contact-help-grid h3{margin:42px 0 9px;font-size:20px;line-height:1.2}.contact-help-grid p{margin:0;color:#767e86;font-size:12px;line-height:1.7}
.contact-faq{padding:105px 0 115px;background:#fff}.contact-faq-layout{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:80px;align-items:start}.contact-faq-title{position:sticky;top:90px}.contact-faq-title h2{margin:0;font-size:clamp(38px,4vw,54px);line-height:1.03;letter-spacing:-.045em}.contact-faq-title p{max-width:400px;margin:20px 0 25px;color:#737b83;font-size:13px;line-height:1.7}.contact-faq-button{min-height:48px;padding:0 20px;display:inline-flex;align-items:center;border-radius:999px;background:#141a20;color:#fff;font-size:12px;font-weight:700}
.contact-faq-list{border-top:1px solid #e2e5e8}.contact-faq-list details{border-bottom:1px solid #e2e5e8}.contact-faq-list summary{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;color:#161c22;font-size:17px;font-weight:700}.contact-faq-list summary::-webkit-details-marker{display:none}.contact-faq-list summary span{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:#f3f4f5;color:#e30613;font-size:20px;transition:transform .2s ease}.contact-faq-list details[open] summary span{transform:rotate(45deg)}.contact-faq-list details p{max-width:720px;margin:-4px 0 28px;padding-right:60px;color:#727a82;font-size:13px;line-height:1.75}
@media(max-width:980px){.contact-layout,.contact-faq-layout{grid-template-columns:1fr;gap:48px}.contact-info,.contact-faq-title{position:static}.contact-help-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.contact-hero{padding:125px 0 65px}.contact-hero h1{font-size:44px}.contact-main,.contact-quick-help,.contact-faq{padding-top:72px;padding-bottom:78px}.contact-form-card{padding:24px;border-radius:22px}.contact-form-row,.contact-help-grid{grid-template-columns:1fr}.contact-section-heading{display:block}.contact-section-heading>p{margin-top:18px}.contact-help-grid article{min-height:190px}.contact-faq-list summary{min-height:74px;font-size:15px}.contact-faq-list details p{padding-right:0}}
/* =========================================================
   PORTFOLIO PAGE
========================================================= */

.portfolio-page {
    background: #ffffff;
    color: #121820;
}


/* =========================================================
   HERO
========================================================= */

.portfolio-page-hero {
    padding: 150px 0 92px;

    background:
        radial-gradient(
            circle at 83% 18%,
            rgba(227, 6, 19, 0.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f7f8f9 0%,
            #ffffff 70%
        );

    border-bottom: 1px solid #eceff2;
}

.portfolio-page-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    gap: 70px;

    align-items: end;
}

.portfolio-page-eyebrow {
    display: inline-flex;

    margin-bottom: 18px;

    color: #e30613;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.portfolio-page-hero h1 {
    max-width: 760px;

    margin: 0;

    font-size:
        clamp(
            52px,
            7vw,
            92px
        );

    line-height: 0.92;

    letter-spacing: -0.06em;
}

.portfolio-page-hero-copy > p {
    max-width: 650px;

    margin:
        28px
        0
        0;

    color: #69717a;

    font-size: 15px;
    line-height: 1.8;
}

.portfolio-page-hero-note {
    padding: 30px;

    border-radius: 24px;

    background: #141a20;

    color: #ffffff;
}

.portfolio-page-hero-note span,
.portfolio-page-hero-note strong {
    display: block;
}

.portfolio-page-hero-note span {
    margin-bottom: 8px;

    color: #ff5360;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.portfolio-page-hero-note strong {
    font-size: 18px;

    line-height: 1.35;
}

.portfolio-page-hero-note p {
    margin:
        16px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-size: 12px;

    line-height: 1.7;
}


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

.portfolio-section-heading {
    display: flex;

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

    gap: 50px;

    margin-bottom: 42px;
}

.portfolio-section-heading h2 {
    margin: 0;

    font-size:
        clamp(
            38px,
            4vw,
            56px
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.portfolio-section-heading > p {
    max-width: 450px;

    margin: 0;

    color: #747c84;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   PROJECT SHOWCASE
========================================================= */

.portfolio-showcase {
    padding:
        105px
        0
        115px;
}

.portfolio-masonry {
    display: grid;

    grid-template-columns:
        repeat(
            12,
            1fr
        );

    grid-auto-rows: 74px;

    gap: 18px;
}

.portfolio-project-card {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background: #eef1f3;
}

.portfolio-project-card-1 {
    grid-column: span 7;
    grid-row: span 6;
}

.portfolio-project-card-2 {
    grid-column: span 5;
    grid-row: span 6;
}

.portfolio-project-card-3 {
    grid-column: span 4;
    grid-row: span 5;
}

.portfolio-project-card-4 {
    grid-column: span 8;
    grid-row: span 5;
}

.portfolio-project-card-5,
.portfolio-project-card-6 {
    grid-column: span 6;
    grid-row: span 5;
}

.portfolio-project-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.45s
        ease;
}

.portfolio-project-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7, 10, 14, 0.82)
            0%,
            rgba(7, 10, 14, 0.15)
            48%,
            rgba(7, 10, 14, 0)
            70%
        );
}

.portfolio-project-card:hover img {
    transform:
        scale(
            1.035
        );
}

.portfolio-project-overlay {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 22px;

    z-index: 2;

    color: #ffffff;
}

.portfolio-project-overlay span {
    display: block;

    margin-bottom: 7px;

    color: #ff4c5c;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.portfolio-project-overlay h3 {
    margin:
        0
        0
        8px;

    font-size:
        clamp(
            20px,
            2.2vw,
            30px
        );

    line-height: 1.05;
}

.portfolio-project-overlay em {
    color:
        rgba(
            255,
            255,
            255,
            0.76
        );

    font-size: 10px;

    font-style: normal;
}


/* =========================================================
   CLIENT MARQUEE
========================================================= */

.portfolio-client-section {
    padding:
        100px
        0
        110px;

    overflow: hidden;

    background: #f5f7f8;
}

.portfolio-client-heading {
    max-width: 760px;

    margin-bottom: 50px;
}

.portfolio-client-heading h2 {
    margin: 0;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height: 0.98;

    letter-spacing: -0.055em;
}

.portfolio-client-heading p {
    max-width: 600px;

    margin:
        20px
        0
        0;

    color: #747c84;

    font-size: 13px;

    line-height: 1.7;
}


/* marquee viewport */

.client-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        10px
        0;
}


/* fade kiri kanan */

.client-marquee::before,
.client-marquee::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 110px;

    z-index: 3;

    pointer-events: none;
}

.client-marquee::before {
    left: 0;

    background:
        linear-gradient(
            to right,
            #f5f7f8,
            transparent
        );
}

.client-marquee::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            #f5f7f8,
            transparent
        );
}


/* moving track */

.client-marquee-track {
    display: flex;

    width: max-content;

    animation:
        phoenixClientMarquee
        40s
        linear
        infinite;

    will-change: transform;
}


/* one full set of logos */

.client-marquee-group {
    display: flex;

    align-items: center;

    gap: 22px;

    padding-right: 22px;

    flex-shrink: 0;
}


/* logo card */

.client-logo-card {
    width: 190px;
    height: 110px;

    flex:
        0
        0
        190px;

    display: flex;

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

    padding: 20px;

    border:
        1px
        solid
        #e3e7ea;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0
        8px
        22px
        rgba(
            18,
            24,
            32,
            0.035
        );

    transition:
        transform
        0.25s
        ease,
        box-shadow
        0.25s
        ease,
        border-color
        0.25s
        ease;
}

.client-logo-card:hover {
    transform:
        translateY(
            -5px
        );

    border-color:
        rgba(
            227,
            6,
            19,
            0.2
        );

    box-shadow:
        0
        16px
        34px
        rgba(
            18,
            24,
            32,
            0.08
        );
}

.client-logo-card img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 72px;

    object-fit: contain;

    filter:
        grayscale(
            100%
        );

    opacity: 0.78;

    transition:
        filter
        0.25s
        ease,
        opacity
        0.25s
        ease,
        transform
        0.25s
        ease;
}

.client-logo-card:hover img {
    filter:
        grayscale(
            0%
        );

    opacity: 1;

    transform:
        scale(
            1.05
        );
}


/* infinite looping */

@keyframes phoenixClientMarquee {

    from {
        transform:
            translateX(
                0
            );
    }

    to {
        transform:
            translateX(
                -50%
            );
    }

}


/* pause saat hover */

.client-marquee:hover
.client-marquee-track {
    animation-play-state: paused;
}


/* =========================================================
   PROCESS
========================================================= */

.portfolio-process {
    padding:
        105px
        0;
}

.portfolio-process-heading {
    margin-bottom: 35px;
}

.portfolio-process-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 16px;
}

.portfolio-process-grid article {
    min-height: 235px;

    padding: 28px;

    border:
        1px
        solid
        #e7eaed;

    border-radius: 22px;

    background: #ffffff;
}

.portfolio-process-grid article > span {
    color: #e30613;

    font-size: 10px;

    font-weight: 800;
}

.portfolio-process-grid h3 {
    margin:
        58px
        0
        10px;

    font-size: 21px;
}

.portfolio-process-grid p {
    margin: 0;

    color: #767e86;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.portfolio-page-cta {
    padding:
        0
        0
        110px;
}

.portfolio-page-cta-inner {
    min-height: 310px;

    padding: 50px;

    display: flex;

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

    gap: 40px;

    border-radius: 30px;

    background: #e30613;

    color: #ffffff;
}

.portfolio-page-cta-inner span {
    display: block;

    margin-bottom: 10px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.portfolio-page-cta-inner h2 {
    margin: 0;

    font-size:
        clamp(
            38px,
            4.5vw,
            62px
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.portfolio-page-cta-inner > a {
    min-height: 54px;

    padding:
        0
        23px;

    display: inline-flex;

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

    flex:
        0
        0
        auto;

    border-radius: 999px;

    background: #ffffff;

    color: #121820;

    font-size: 12px;

    font-weight: 800;

    transition:
        transform
        0.2s
        ease;
}

.portfolio-page-cta-inner > a:hover {
    transform:
        translateY(
            -2px
        );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .portfolio-page-hero-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .portfolio-masonry {
        grid-template-columns:
            repeat(
                2,
                1fr
            );

        grid-auto-rows: auto;
    }

    .portfolio-project-card,
    .portfolio-project-card-1,
    .portfolio-project-card-2,
    .portfolio-project-card-3,
    .portfolio-project-card-4,
    .portfolio-project-card-5,
    .portfolio-project-card-6 {
        grid-column: auto;
        grid-row: auto;

        aspect-ratio:
            4
            /
            3;
    }

    .portfolio-process-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .client-logo-card {
        width: 165px;
        height: 95px;

        flex-basis: 165px;
    }

    .client-logo-card img {
        max-height: 62px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .portfolio-page-hero {
        padding:
            125px
            0
            68px;
    }

    .portfolio-page-hero h1 {
        font-size: 48px;
    }

    .portfolio-showcase,
    .portfolio-client-section,
    .portfolio-process {
        padding-top: 75px;
        padding-bottom: 80px;
    }

    .portfolio-section-heading {
        display: block;
    }

    .portfolio-section-heading > p {
        margin-top: 18px;
    }

    .portfolio-masonry,
    .portfolio-process-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-client-heading {
        margin-bottom: 35px;
    }

    .client-logo-card {
        width: 145px;
        height: 85px;

        flex-basis: 145px;

        padding: 16px;
    }

    .client-logo-card img {
        max-height: 55px;
    }

    .client-marquee-track {
        animation-duration: 30s;
    }

    .client-marquee::before,
    .client-marquee::after {
        width: 45px;
    }

    .portfolio-page-cta {
        padding-bottom: 80px;
    }

    .portfolio-page-cta-inner {
        min-height: auto;

        padding:
            32px
            24px;

        display: block;
    }

    .portfolio-page-cta-inner > a {
        margin-top: 28px;
    }

}


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

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

    .client-marquee-track {
        animation-play-state: paused;
    }

    .portfolio-project-card img,
    .client-logo-card,
    .client-logo-card img {
        transition: none;
    }

}

/* =========================================================
   PRODUCT FILTER - MOBILE
========================================================= */

.catalog-mobile-tools {
    display: none;
}

@media (max-width: 760px) {

    .product-catalog-page {
        overflow: hidden;
    }

    .catalog-search {
        width: 100%;
        margin-bottom: 12px;
    }

    .catalog-search input {
        width: 100%;
        height: 52px;
        padding: 0 48px 0 17px;

        border-radius: 15px;

        font-size: 14px;
    }

    .catalog-mobile-tools {
        display: block;
        margin-bottom: 16px;
    }

    .catalog-mobile-filter-button {
        width: 100%;
        min-height: 50px;

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

        padding: 0 17px;

        border: 1px solid #e3e6e9;
        border-radius: 14px;

        background: #ffffff;
        color: #161c22;

        font-size: 13px;
        font-weight: 700;
    }

    .catalog-layout {
        display: block;
    }

    .catalog-sidebar {
        display: none;

        width: 100%;
        margin: 0 0 18px;
    }

    .catalog-sidebar.is-open {
        display: block;
    }

    .catalog-sidebar-inner {
        padding: 12px;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 9px;

        border: 1px solid #e5e8eb;
        border-radius: 18px;

        background: #f7f8f9;
    }

    .catalog-sidebar-inner h3 {
        grid-column: 1 / -1;

        margin: 2px 5px 8px;

        font-size: 13px;
    }

    .catalog-filter {
        width: 100%;
        min-height: 44px;

        padding: 0 12px;

        border: 1px solid #e3e6e9;
        border-radius: 12px;

        background: #ffffff;

        font-size: 11px;

        justify-content: flex-start;
    }

    .catalog-filter.active {
        border-color: #e30613;

        background: #e30613;
        color: #ffffff;
    }

    .catalog-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 12px;

        margin-bottom: 18px;
    }

    .catalog-topbar > span {
        font-size: 12px;
    }

    #catalogSort {
        width: 145px;
        height: 44px;

        padding: 0 12px;

        border-radius: 12px;

        font-size: 11px;
    }

    .catalog-product-grid {
        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }

    .catalog-product-card {
        min-width: 0;
    }

    .catalog-product-content {
        padding: 14px;
    }

    .catalog-product-content h2 {
        font-size: 15px;
    }

    .catalog-category {
        font-size: 8px;
    }

    .catalog-product-link {
        font-size: 10px;
    }

}

@media (max-width: 440px) {

    .catalog-product-grid {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar-inner {
        grid-template-columns: 1fr;
    }

}

.quotation-page{background:#fff;color:#121820}.quotation-hero{padding:150px 0 92px;background:radial-gradient(circle at 84% 16%,rgba(227,6,19,.08),transparent 28%),linear-gradient(135deg,#f7f8f9 0%,#fff 72%);border-bottom:1px solid #eceff2}.quotation-hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:70px;align-items:end}.quotation-eyebrow{display:inline-flex;margin-bottom:18px;color:#e30613;font-size:11px;font-weight:800;letter-spacing:.14em}.quotation-hero h1{max-width:820px;margin:0;font-size:clamp(52px,7vw,88px);line-height:.94;letter-spacing:-.055em}.quotation-hero-grid>div:first-child>p{max-width:680px;margin:28px 0 0;color:#6d757d;font-size:15px;line-height:1.8}.quotation-hero-card{padding:30px;border-radius:24px;background:#141a20;color:#fff}.quotation-hero-card>span,.quotation-hero-card>strong{display:block}.quotation-hero-card>span{margin-bottom:8px;color:#ff5360;font-size:9px;font-weight:800;letter-spacing:.12em}.quotation-hero-card>strong{font-size:24px;line-height:1.15}.quotation-hero-card>p{margin:18px 0 0;color:rgba(255,255,255,.7);font-size:12px;line-height:1.7}.quotation-form-section{padding:100px 0 115px}.quotation-form{display:grid;gap:24px}.quotation-block{padding:36px;border:1px solid #e6eaed;border-radius:26px;background:#f8f9fa}.quotation-block-heading{display:flex;align-items:flex-start;gap:18px;margin-bottom:28px}.quotation-block-heading>span{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:50%;background:#e30613;color:#fff;font-size:10px;font-weight:800}.quotation-block-heading h2{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.035em}.quotation-block-heading p{margin:7px 0 0;color:#7a8289;font-size:12px}.quotation-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}.quotation-field{display:grid;gap:8px}.quotation-field-full{grid-column:1/-1}.quotation-field label{color:#353c43;font-size:11px;font-weight:700}.quotation-field input,.quotation-field select,.quotation-field textarea{width:100%;border:1px solid #dfe4e8;border-radius:14px;outline:0;background:#fff;color:#141a20;font-family:inherit;font-size:13px;transition:border-color .2s ease,box-shadow .2s ease}.quotation-field input,.quotation-field select{height:54px;padding:0 15px}.quotation-field textarea{min-height:170px;padding:14px 15px;resize:vertical}.quotation-field input:focus,.quotation-field select:focus,.quotation-field textarea:focus{border-color:rgba(227,6,19,.55);box-shadow:0 0 0 4px rgba(227,6,19,.07)}.quotation-submit-area{padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:22px;background:#141a20}.quotation-consent{max-width:620px;display:flex;align-items:flex-start;gap:10px;color:rgba(255,255,255,.75);font-size:11px;line-height:1.6}.quotation-submit-button{min-height:54px;padding:0 24px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:16px;border:0;border-radius:999px;background:#e30613;color:#fff;font-size:12px;font-weight:800;cursor:pointer;transition:transform .2s ease,background .2s ease}.quotation-submit-button:hover{background:#c9000c;transform:translateY(-2px)}.quotation-status{min-height:20px;color:#69717a;font-size:12px}.quotation-benefits{padding:105px 0 115px;background:#f5f7f8}.quotation-benefits-heading{max-width:760px;margin-bottom:42px}.quotation-benefits-heading h2{margin:0;font-size:clamp(40px,5vw,66px);line-height:.98;letter-spacing:-.05em}.quotation-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.quotation-benefits-grid article{min-height:230px;padding:28px;border:1px solid #e5e9ec;border-radius:22px;background:#fff}.quotation-benefits-grid article>span{color:#e30613;font-size:10px;font-weight:800}.quotation-benefits-grid h3{margin:54px 0 10px;font-size:21px}.quotation-benefits-grid p{margin:0;color:#767e86;font-size:12px;line-height:1.7}@media(max-width:980px){.quotation-hero-grid{grid-template-columns:1fr;gap:45px}.quotation-benefits-grid{grid-template-columns:1fr 1fr}}@media(max-width:700px){.quotation-hero{padding:125px 0 70px}.quotation-hero h1{font-size:46px}.quotation-form-section,.quotation-benefits{padding-top:75px;padding-bottom:82px}.quotation-block{padding:24px;border-radius:22px}.quotation-grid,.quotation-benefits-grid{grid-template-columns:1fr}.quotation-field-full{grid-column:auto}.quotation-submit-area{padding:24px;display:block}.quotation-submit-button{width:100%;margin-top:20px}}

/* =========================================================
   ABOUT - REQUEST QUOTATION
========================================================= */

.about-quotation-cta {
    margin-top: 26px;
    margin-bottom: 34px;

    display: flex;
    align-items: center;

    gap: 18px;
}

.about-quotation-button {
    min-height: 50px;

    padding:
        0
        22px;

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

    gap: 12px;

    border-radius: 999px;

    background: #e30613;
    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.about-quotation-button:hover {
    background: #c9000c;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(227, 6, 19, 0.18);
}

.about-quotation-button span {
    font-size: 16px;
}

.about-quotation-cta small {
    max-width: 220px;

    color: #7d858d;

    font-size: 10px;

    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 700px) {

    .about-quotation-cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-top: 22px;
        margin-bottom: 30px;
    }

    .about-quotation-button {
        width: 100%;
    }

    .about-quotation-cta small {
        max-width: 100%;
    }

}

/* =========================================================
   BREADCRUMB
========================================================= */

.product-breadcrumb {
    padding-top: 110px;
    padding-bottom: 18px;

    background: #f7f8f9;
}

.product-breadcrumb nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    font-size: 11px;
}

.product-breadcrumb a {
    color: #737b83;

    transition: color 0.2s ease;
}

.product-breadcrumb a:hover {
    color: #e30613;
}

.product-breadcrumb span {
    color: #a1a7ad;
}

.product-breadcrumb span[aria-current="page"] {
    color: #161c22;
    font-weight: 700;
}

/* =========================================================
   PHOENIX 2026 — COMPACT SPACING & TYPOGRAPHY OVERRIDE
   Audit refinement added 2026-09-03
   Tujuan:
   - Mengurangi vertical whitespace berlebih
   - Menjaga hierarchy heading tetap kuat tapi tidak terlalu besar
   - Membuat desktop & mobile lebih padat dan konsisten
   - Tidak mengubah warna, animasi, routing, atau fungsi komponen
========================================================= */

/* =========================================================
   GLOBAL RHYTHM
========================================================= */

body {
    font-size: 15px;
    line-height: 1.65;
}

.phoenix-container {
    width: min(
        1200px,
        calc(100% - 48px)
    );
}

.section-label {
    margin-bottom: 8px;
}

.section-heading {
    gap: 42px;
    margin-bottom: 30px;
}

.section-heading h2 {
    font-size: clamp(
        32px,
        3vw,
        44px
    );

    line-height: 1.08;
}

.section-heading > p {
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   HOMEPAGE HERO
========================================================= */

.phoenix-hero {
    padding-top: 80px;
}

.hero-grid {
    min-height: 560px;
}

.hero-copy {
    padding:
        58px
        42px
        50px
        0;
}

.hero-eyebrow {
    margin-bottom: 16px;
}

.hero-copy h1 {
    font-size: clamp(
        42px,
        3.8vw,
        56px
    );

    line-height: 1.04;
}

.hero-description {
    margin-top: 20px;

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

.hero-actions {
    margin-top: 24px;
}

.hero-benefits {
    gap: 22px;
    margin-top: 32px;
}

.hero-visual {
    min-height: 560px;
}


/* =========================================================
   HOMEPAGE SECTIONS
========================================================= */

.trust-section {
    padding:
        20px
        0;
}

.products-section {
    padding:
        72px
        0
        78px;
}

.about-section {
    padding:
        76px
        0;
}

.about-grid {
    gap: 54px;
}

.about-image {
    min-height: 450px;
}

.about-content h2 {
    margin-bottom: 18px;

    font-size: clamp(
        34px,
        3.5vw,
        48px
    );

    line-height: 1.06;
}

.about-content > p {
    margin-bottom: 11px;

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

.about-quotation-cta {
    margin-top: 20px;
    margin-bottom: 24px;
}

.about-stats {
    margin-top: 24px;
    padding-top: 22px;
}

.about-stats strong {
    font-size: 25px;
}

.portfolio-section {
    padding:
        76px
        0;
}

.portfolio-home-grid {
    grid-template-rows:
        280px
        280px
        280px;
}

.portfolio-overlay h3 {
    font-size: 21px;
}


/* =========================================================
   JOOMLA FALLBACK PAGE
========================================================= */

.phoenix-component {
    padding:
        95px
        0
        60px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer-grid {
    gap: 42px;

    padding:
        54px
        0
        50px;
}

.footer-brand img {
    margin-bottom: 16px;
}

.footer-column h4 {
    margin-bottom: 14px;
}

.footer-bottom .phoenix-container {
    min-height: 54px;
}


/* =========================================================
   PRODUCT CATALOG PAGE
========================================================= */

.product-breadcrumb {
    padding-top: 92px;
    padding-bottom: 14px;
}

.product-page-hero {
    padding:
        38px
        0
        42px;
}

.product-page-hero h1 {
    margin-top: 10px;

    font-size: clamp(
        38px,
        4vw,
        54px
    );

    line-height: 1.04;
}

.product-page-hero p {
    margin-top: 14px;
    line-height: 1.65;
}

.product-catalog-page {
    padding:
        42px
        0
        68px;
}

.catalog-search {
    margin-bottom: 20px;
}

.catalog-search input {
    min-height: 52px;
}

.catalog-layout {
    gap: 28px;
}

.catalog-product-grid {
    gap:
        23px
        18px;
}

.catalog-product-image {
    height: 220px;
}

.catalog-product-content {
    padding-top: 10px;
}

.product-page-cta {
    padding:
        44px
        0;
}

.product-page-cta h2 {
    font-size: clamp(
        28px,
        3vw,
        39px
    );
}


/* =========================================================
   PRODUCT DETAIL PAGE
========================================================= */

.detail-breadcrumb {
    padding:
        92px
        0
        15px;
}

.detail-product-hero {
    padding:
        14px
        0
        64px;
}

.detail-product-grid {
    gap: 52px;
}

.detail-main-image {
    height: 500px;

    border-radius: 20px;
}

.detail-thumb {
    width: 76px;
    height: 76px;
}

.detail-product-info {
    padding-top: 12px;
}

.detail-product-category {
    margin-bottom: 10px;
}

.detail-product-info h1 {
    font-size: clamp(
        42px,
        4.5vw,
        58px
    );

    line-height: 1;
}

.detail-product-intro {
    margin-top: 20px;

    line-height: 1.68;
}

.detail-product-features {
    margin-top: 26px;
    padding-top: 22px;
}

.detail-feature {
    gap: 12px;
    margin-bottom: 17px;
}

.detail-product-actions {
    margin-top: 25px;
}

.detail-product-description {
    padding:
        68px
        0;
}

.detail-description-grid {
    gap: 58px;
}

.detail-description-grid h2,
.detail-showcase-heading h2 {
    font-size: clamp(
        32px,
        3.5vw,
        45px
    );

    line-height: 1.06;
}

.detail-description-copy p {
    margin-bottom: 14px;

    line-height: 1.7;
}

.detail-product-showcase {
    padding:
        70px
        0;
}

.detail-showcase-heading {
    margin-bottom: 28px;
}

.detail-showcase-card {
    height: 380px;
}

.detail-product-cta {
    padding:
        50px
        0;
}

.detail-product-cta-inner {
    gap: 34px;
}

.detail-product-cta h2 {
    font-size: clamp(
        30px,
        3.4vw,
        42px
    );
}


/* =========================================================
   PORTFOLIO PAGE
========================================================= */

.portfolio-page-hero {
    padding:
        118px
        0
        64px;
}

.portfolio-page-hero-grid {
    gap: 48px;
}

.portfolio-page-hero h1 {
    font-size: clamp(
        46px,
        5.5vw,
        72px
    );

    line-height: .96;
}

.portfolio-page-hero-copy > p {
    margin-top: 20px;

    line-height: 1.65;
}

.portfolio-showcase,
.portfolio-client-section,
.portfolio-process {
    padding-top: 74px;
    padding-bottom: 78px;
}

.portfolio-section-heading {
    margin-bottom: 30px;
}

.portfolio-client-heading {
    margin-bottom: 30px;
}

.portfolio-page-cta {
    padding-bottom: 72px;
}


/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-hero {
    padding:
        118px
        0
        62px;
}

.contact-hero h1 {
    font-size: clamp(
        44px,
        5.4vw,
        70px
    );

    line-height: .98;
}

.contact-main,
.contact-quick-help,
.contact-faq {
    padding-top: 74px;
    padding-bottom: 78px;
}

.contact-layout,
.contact-faq-layout {
    gap: 52px;
}

.contact-form-card {
    padding: 30px;
}

.contact-section-heading {
    margin-bottom: 30px;
}

.contact-help-grid article {
    min-height: 175px;
}

.contact-faq-list summary {
    min-height: 68px;

    font-size: 16px;
}

.contact-faq-list details p {
    margin-bottom: 22px;

    line-height: 1.65;
}


/* =========================================================
   QUOTATION PAGE
========================================================= */

.quotation-hero {
    padding:
        118px
        0
        64px;
}

.quotation-hero-grid {
    gap: 48px;
}

.quotation-hero h1 {
    font-size: clamp(
        46px,
        5.4vw,
        72px
    );

    line-height: .96;
}

.quotation-hero-grid > div:first-child > p {
    margin-top: 20px;

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

.quotation-hero-card {
    padding: 26px;
}

.quotation-form-section {
    padding:
        76px
        0
        84px;
}

.quotation-form {
    gap: 20px;
}

.quotation-block {
    padding: 28px;

    border-radius: 22px;
}

.quotation-block-heading {
    gap: 15px;
    margin-bottom: 22px;
}

.quotation-block-heading h2 {
    font-size: clamp(
        25px,
        2.6vw,
        34px
    );
}

.quotation-grid {
    gap:
        15px
        18px;
}

.quotation-field input,
.quotation-field select {
    height: 50px;
}

.quotation-field textarea {
    min-height: 145px;
}

.quotation-submit-area {
    padding:
        22px
        26px;
}

.quotation-benefits {
    padding:
        76px
        0
        82px;
}

.quotation-benefits-heading {
    margin-bottom: 30px;
}

.quotation-benefits-heading h2 {
    font-size: clamp(
        36px,
        4.2vw,
        52px
    );

    line-height: 1;
}

.quotation-benefits-grid article {
    min-height: 190px;

    padding: 24px;
}

.quotation-benefits-grid h3 {
    margin:
        36px
        0
        9px;

    font-size: 19px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .hero-grid {
        min-height: auto;
    }

    .hero-copy {
        padding:
            55px
            0
            35px;
    }

    .hero-visual {
        min-height: 400px;
    }

    .about-grid {
        gap: 38px;
    }

    .about-image {
        min-height: 420px;
    }

    .detail-product-grid {
        gap: 34px;
    }

    .detail-main-image {
        height: 460px;
    }

    .portfolio-page-hero-grid,
    .quotation-hero-grid {
        gap: 34px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    body {
        font-size: 14px;
    }

    .phoenix-container {
        width: calc(100% - 28px);
    }

    .section-heading {
        display: block;

        margin-bottom: 24px;
    }

    .section-heading > p {
        margin-top: 12px;
    }

    .section-heading h2 {
        font-size: 30px;
    }

    .phoenix-hero {
        padding-top: 72px;
    }

    .hero-copy {
        padding:
            42px
            0
            28px;
    }

    .hero-copy h1 {
        font-size: 34px;
    }

    .hero-description {
        margin-top: 16px;

        font-size: 14px;
    }

    .hero-actions {
        margin-top: 20px;
    }

    .hero-benefits {
        gap: 15px;
        margin-top: 25px;
    }

    .hero-visual {
        min-height: 330px;
    }

    .products-section,
    .about-section,
    .portfolio-section {
        padding:
            54px
            0;
    }

    .about-grid {
        gap: 28px;
    }

    .about-image {
        min-height: 330px;
    }

    .about-content h2 {
        font-size: 34px;
        margin-bottom: 15px;
    }

    .about-quotation-cta {
        margin-top: 17px;
        margin-bottom: 20px;
    }

    .about-stats {
        margin-top: 20px;
        padding-top: 18px;
    }

    .portfolio-home-grid {
        grid-auto-rows: 250px;
    }

    .footer-grid {
        padding:
            44px
            0
            38px;
    }

    .product-breadcrumb,
    .detail-breadcrumb {
        padding-top: 84px;
        padding-bottom: 12px;
    }

    .product-page-hero {
        padding:
            28px
            0
            34px;
    }

    .product-page-hero h1 {
        font-size: 36px;
    }

    .product-catalog-page {
        padding:
            34px
            0
            54px;
    }

    .detail-product-hero {
        padding-bottom: 48px;
    }

    .detail-main-image {
        height: 340px;
    }

    .detail-product-info h1 {
        font-size: 38px;
    }

    .detail-product-intro {
        margin-top: 16px;
    }

    .detail-product-features {
        margin-top: 22px;
        padding-top: 18px;
    }

    .detail-product-description,
    .detail-product-showcase {
        padding:
            52px
            0;
    }

    .detail-description-grid {
        gap: 24px;
    }

    .detail-description-grid h2,
    .detail-showcase-heading h2 {
        font-size: 32px;
    }

    .detail-showcase-card {
        height: 300px;
    }

    .detail-product-cta {
        padding:
            42px
            0;
    }

    .detail-product-cta h2 {
        font-size: 32px;
    }

    .portfolio-page-hero,
    .contact-hero,
    .quotation-hero {
        padding:
            100px
            0
            48px;
    }

    .portfolio-page-hero h1,
    .contact-hero h1,
    .quotation-hero h1 {
        font-size: 40px;
        line-height: 1;
    }

    .portfolio-showcase,
    .portfolio-client-section,
    .portfolio-process,
    .contact-main,
    .contact-quick-help,
    .contact-faq,
    .quotation-form-section,
    .quotation-benefits {
        padding-top: 54px;
        padding-bottom: 58px;
    }

    .contact-layout,
    .contact-faq-layout {
        gap: 32px;
    }

    .contact-form-card {
        padding: 22px;
    }

    .contact-help-grid article {
        min-height: 160px;
    }

    .contact-faq-list summary {
        min-height: 60px;
        font-size: 14px;
    }

    .quotation-block {
        padding: 22px;
    }

    .quotation-block-heading {
        margin-bottom: 18px;
    }

    .quotation-block-heading h2 {
        font-size: 26px;
    }

    .quotation-submit-area {
        padding: 20px;
    }

    .quotation-benefits-grid article {
        min-height: 165px;
    }

    .quotation-benefits-grid h3 {
        margin-top: 28px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 440px) {

    .hero-copy h1 {
        font-size: 31px;
    }

    .portfolio-page-hero h1,
    .contact-hero h1,
    .quotation-hero h1 {
        font-size: 36px;
    }

    .detail-product-info h1 {
        font-size: 34px;
    }

    .detail-main-image {
        height: 300px;
    }

    .catalog-product-image {
        height: 235px;
    }

}

/* =========================================================
   PHOENIX 2026 — PHASE 1 HOMEPAGE POLISH
   Added after spacing audit
========================================================= */

/* ACCESSIBILITY / INTERACTION */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(227, 6, 19, .22);
    outline-offset: 3px;
}

/* NAV ACTIVE STATE */
.phoenix-nav-left a.is-active,
.phoenix-nav-right a.is-active {
    opacity: 1;
}

.phoenix-nav-left a.is-active::after,
.phoenix-nav-right a.is-active::after {
    width: 100%;
}

/* FIX HERO IMAGE HOVER POSITION JUMP */
.hero-visual:hover .hero-image {
    transform:
        translate(-50%, -50%)
        scale(1.025) !important;
}

/* HERO — stronger but cleaner hierarchy */
.hero-description {
    max-width: 500px;
}

.btn-primary,
.btn-secondary {
    min-height: 48px;
}

.btn-secondary {
    border-color: rgba(31, 37, 44, .22);
    background: rgba(255,255,255,.78);
}

.hero-benefits {
    padding-top: 2px;
}

.benefit-item {
    min-width: 145px;
}

/* TRUST STRIP */
.trust-section p {
    max-width: 720px;
    margin-inline: auto;
    color: #69717a;
    font-size: 11px;
    letter-spacing: .035em;
}

/* PRODUCT CAROUSEL */
.homepage-product-track {
    padding-bottom: 14px;
}

.homepage-product-track .product-card {
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17,24,39,.07);
}

.homepage-product-track .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(17,24,39,.12);
}

/* ABOUT */
.about-content {
    max-width: 580px;
}

.about-stats > div {
    min-width: 0;
}

.about-stats > div:not(:last-child) {
    border-right: 1px solid #dde2e5;
}

.about-stats span {
    display: block;
    margin-top: 3px;
}

/* PORTFOLIO */
.homepage-portfolio-topline {
    display: flex;
    justify-content: flex-end;
    margin: -10px 0 18px;
}

.homepage-portfolio-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #e30613;
    font-size: 11px;
    font-weight: 800;
}

.homepage-portfolio-link span {
    font-size: 16px;
    transition: transform .2s ease;
}

.homepage-portfolio-link:hover span {
    transform: translateX(3px);
}

.portfolio-home-card {
    box-shadow: 0 8px 26px rgba(17,24,39,.08);
}

.portfolio-overlay {
    left: 22px;
    right: 22px;
    bottom: 20px;
}

/* CTA OFFICE — reduce excessive footprint and improve balance */
.cta-office-grid {
    min-height: 440px;
}

.cta-office-copy {
    padding:
        56px
        58px
        56px
        max(48px, calc((100vw - 1200px) / 2));
}

.cta-office-copy h2 {
    max-width: 560px;
    margin-bottom: 14px;
    font-size: clamp(36px, 4.2vw, 54px);
    line-height: 1;
    letter-spacing: -1.5px;
}

.cta-office-copy p {
    max-width: 540px;
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.65;
}

.cta-office-label {
    margin-bottom: 9px;
    font-size: 11px;
}

.cta-office-button {
    min-height: 48px;
    padding: 0 22px;
}

/* FOOTER */
.footer-brand p {
    line-height: 1.65;
}

.footer-column a {
    transition: color .2s ease, transform .2s ease;
}

.footer-column a:hover {
    transform: translateX(2px);
}

/* MOBILE HOMEPAGE POLISH */
@media (max-width: 700px) {

    .hero-copy {
        text-align: left;
    }

    .hero-actions {
        gap: 10px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

    .hero-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .benefit-item {
        min-width: 0;
    }

    .about-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .about-stats > div {
        padding: 0 10px;
    }

    .about-stats > div:first-child {
        padding-left: 0;
    }

    .about-stats > div:last-child {
        padding-right: 0;
    }

    .about-stats strong {
        font-size: 20px;
    }

    .about-stats span {
        font-size: 9px;
        line-height: 1.35;
    }

    .homepage-portfolio-topline {
        justify-content: flex-start;
        margin-top: -4px;
    }

    .cta-office-grid {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .cta-office-copy {
        padding:
            46px
            20px;
    }

    .cta-office-copy h2 {
        font-size: 36px;
    }

    .cta-office-copy p {
        font-size: 14px;
    }

    .cta-office-visual {
        min-height: 300px;
    }

}

@media (max-width: 440px) {

    .hero-benefits {
        grid-template-columns: 1fr;
    }

    .about-stats {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .about-stats > div {
        padding: 0 !important;
        border-right: 0 !important;
    }

}

/* =========================================================
   PHOENIX 2026 — PHASE 2 PRODUCT / DETAIL POLISH
========================================================= */

/* PRODUCT CATALOG CARD */
.catalog-product-card {
    position: relative;
    min-width: 0;
    padding-bottom: 2px;
}

.catalog-product-image {
    border: 1px solid #e8ecef;
    box-shadow: 0 6px 18px rgba(17,24,39,.045);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.catalog-product-card:hover .catalog-product-image {
    transform: translateY(-3px);
    border-color: rgba(227,6,19,.16);
    box-shadow: 0 14px 30px rgba(17,24,39,.09);
}

.catalog-product-content h2 a {
    transition: color .2s ease;
}

.catalog-product-card:hover .catalog-product-content h2 a {
    color: #e30613;
}

.catalog-product-link {
    position: relative;
}

.catalog-product-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: #e30613;
    transition: width .2s ease;
}

.catalog-product-link:hover::after {
    width: 100%;
}

/* CATALOG CTA */
.product-page-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.product-page-cta-primary,
.product-page-cta-secondary {
    min-height: 46px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.product-page-cta-primary {
    background: #fff;
    color: #111820;
}

.product-page-cta-secondary {
    border: 1px solid rgba(255,255,255,.48);
    background: transparent;
    color: #fff;
}

/* DETAIL HERO */
.detail-product-info {
    position: sticky;
    top: 92px;
}

.detail-product-actions {
    align-items: center;
}

.detail-tertiary-link {
    color: #69717a;
    font-size: 11px;
    font-weight: 700;
    transition: color .2s ease;
}

.detail-tertiary-link:hover {
    color: #e30613;
}

.detail-secondary-button {
    background: #fff;
}

/* RELATED PRODUCTS */
.detail-related-products {
    padding: 68px 0 72px;
    background: #f7f8f9;
}

.detail-related-heading {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.detail-related-heading h2 {
    margin: 0;
    max-width: 620px;
    color: #151b21;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.detail-related-heading > a {
    flex: 0 0 auto;
    color: #e30613;
    font-size: 11px;
    font-weight: 800;
}

.detail-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.detail-related-card {
    overflow: hidden;
    border: 1px solid #e4e8eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(17,24,39,.04);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.detail-related-card:hover {
    transform: translateY(-4px);
    border-color: rgba(227,6,19,.16);
    box-shadow: 0 16px 34px rgba(17,24,39,.09);
}

.detail-related-image {
    height: 210px;
    overflow: hidden;
    background: #eef1f3;
}

.detail-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.detail-related-card:hover .detail-related-image img {
    transform: scale(1.035);
}

.detail-related-content {
    padding: 16px 17px 18px;
}

.detail-related-content > span {
    color: #8a9198;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.detail-related-content h3 {
    margin: 5px 0 10px;
    color: #151b21;
    font-size: 18px;
}

.detail-related-content small {
    color: #e30613;
    font-size: 10px;
    font-weight: 800;
}

/* DETAIL BOTTOM CTA */
.detail-product-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-product-cta-primary,
.detail-product-cta-secondary {
    min-height: 46px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.detail-product-cta-primary {
    background: #fff;
    color: #111820;
}

.detail-product-cta-secondary {
    border: 1px solid rgba(255,255,255,.48);
    background: transparent;
    color: #fff;
}

/* MOBILE */
@media (max-width: 950px) {
    .detail-product-info {
        position: static;
    }

    .detail-related-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 700px) {
    .product-page-cta-actions,
    .detail-product-cta-actions {
        width: 100%;
    }

    .product-page-cta-primary,
    .product-page-cta-secondary,
    .detail-product-cta-primary,
    .detail-product-cta-secondary {
        width: 100%;
    }

    .detail-related-products {
        padding: 52px 0 56px;
    }

    .detail-related-heading {
        display: block;
        margin-bottom: 22px;
    }

    .detail-related-heading > a {
        display: inline-block;
        margin-top: 13px;
    }

    .detail-related-grid {
        grid-template-columns: 1fr;
    }

    .detail-related-image {
        height: 250px;
    }
}

/* =========================================================
   PHOENIX 2026 — PHASE 3 MOBILE UX / RESPONSIVE AUDIT
========================================================= */

/* Prevent accidental horizontal overflow */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

/* Better touch targets */
@media (hover: none) and (pointer: coarse) {

    a,
    button,
    input,
    select,
    textarea {
        -webkit-tap-highlight-color: transparent;
    }

    .btn-primary,
    .btn-secondary,
    .about-quotation-button,
    .catalog-mobile-filter-button,
    .detail-primary-button,
    .detail-secondary-button,
    .quotation-submit-button,
    .product-page-cta-primary,
    .product-page-cta-secondary,
    .detail-product-cta-primary,
    .detail-product-cta-secondary {
        min-height: 48px;
    }

}

/* =========================================================
   MOBILE NAVBAR
========================================================= */

@media (max-width: 760px) {

    .phoenix-header {
        padding-top: 8px;
    }

    .phoenix-nav-shell,
    .phoenix-header.is-scrolled .phoenix-nav-shell {
        width: calc(100% - 20px);
        height: 54px;
        padding: 0 14px 0 16px;
        border-radius: 18px;
    }

    .phoenix-center-logo img,
    .phoenix-header.is-scrolled .phoenix-center-logo img {
        width: 132px;
        height: 32px;
    }

    .promindo-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .promindo-mobile-menu {
        width: calc(100% - 20px);
        margin-top: 8px;
        padding: 10px;
        border-radius: 18px;
    }

    .promindo-mobile-menu a {
        min-height: 48px;
        padding: 0 14px;
        font-size: 12px;
    }

    .promindo-mobile-menu .mobile-wa-link {
        margin-top: 6px;
    }

}

/* =========================================================
   HOMEPAGE MOBILE
========================================================= */

@media (max-width: 700px) {

    .phoenix-hero {
        padding-top: 66px;
    }

    .hero-copy {
        padding-top: 34px;
    }

    .hero-eyebrow {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .hero-copy h1 {
        font-size: clamp(31px, 9vw, 38px);
        line-height: 1.02;
        letter-spacing: -.04em;
    }

    .hero-description {
        max-width: none;
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.6;
    }

    .hero-actions {
        margin-top: 18px;
    }

    .hero-visual {
        min-height: 290px;
    }

    .hero-image {
        width: 94% !important;
        height: 94% !important;
        left: 50% !important;
    }

    .trust-section {
        padding: 17px 0;
    }

    .trust-section p {
        font-size: 10px;
        line-height: 1.55;
    }

    .homepage-product-track .product-card {
        flex-basis: 84%;
        border-radius: 16px;
    }

    .homepage-product-track {
        gap: 12px;
        margin-right: -12px;
        padding-right: 12px;
    }

    .about-image {
        min-height: 290px;
        border-radius: 18px;
    }

    .about-content h2 {
        font-size: 31px;
    }

    .about-content > p {
        font-size: 13px;
        line-height: 1.6;
    }

    .about-quotation-button {
        min-height: 48px;
    }

    .portfolio-home-grid {
        grid-auto-rows: 220px;
        gap: 12px;
    }

    .portfolio-home-card {
        border-radius: 16px;
    }

    .portfolio-overlay {
        left: 16px;
        right: 16px;
        bottom: 15px;
    }

    .portfolio-overlay h3 {
        font-size: 18px;
    }

    .cta-office-copy {
        padding: 38px 16px;
    }

    .cta-office-copy h2 {
        font-size: 32px;
    }

    .cta-office-visual {
        min-height: 250px;
    }

}

/* =========================================================
   PRODUCT CATALOG MOBILE
========================================================= */

@media (max-width: 760px) {

    .product-breadcrumb {
        padding-top: 76px;
    }

    .product-page-hero {
        padding-top: 22px;
    }

    .product-page-hero h1 {
        font-size: 32px;
    }

    .product-page-hero p {
        font-size: 13px;
        line-height: 1.6;
    }

    .catalog-search {
        position: sticky;
        top: 72px;
        z-index: 30;
        padding-top: 6px;
        background: #fff;
    }

    .catalog-search input {
        height: 50px;
        min-height: 50px;
        border-radius: 13px;
        font-size: 13px;
    }

    .catalog-mobile-tools {
        position: sticky;
        top: 128px;
        z-index: 29;
        padding-bottom: 8px;
        background: #fff;
    }

    .catalog-mobile-filter-button {
        min-height: 46px;
        border-radius: 12px;
        font-size: 12px;
    }

    .catalog-sidebar.is-open {
        margin-top: 2px;
    }

    .catalog-sidebar-inner {
        border-radius: 14px;
    }

    .catalog-topbar {
        margin-top: 6px;
        margin-bottom: 14px;
    }

    #catalogSort {
        min-height: 42px;
    }

    .catalog-product-grid {
        gap: 18px 12px;
    }

    .catalog-product-image {
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    .catalog-product-content h2 {
        font-size: 15px;
        line-height: 1.25;
    }

    .catalog-product-link {
        font-size: 10px;
    }

}

@media (max-width: 440px) {

    .catalog-product-grid {
        grid-template-columns: 1fr;
    }

    .catalog-product-image {
        aspect-ratio: 16 / 10;
    }

}

/* =========================================================
   PRODUCT DETAIL MOBILE
========================================================= */

@media (max-width: 700px) {

    .detail-breadcrumb {
        padding-top: 76px;
    }

    .detail-product-grid {
        gap: 24px;
    }

    .detail-main-image {
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .detail-thumbnails {
        gap: 8px;
        margin-top: 10px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .detail-thumbnails::-webkit-scrollbar {
        display: none;
    }

    .detail-thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        border-radius: 10px;
    }

    .detail-product-category {
        font-size: 9px;
    }

    .detail-product-info h1 {
        font-size: 34px;
        line-height: 1.02;
    }

    .detail-product-intro {
        font-size: 13px;
        line-height: 1.6;
    }

    .detail-feature {
        grid-template-columns: 30px 1fr;
        gap: 10px;
    }

    .detail-feature-icon {
        width: 28px;
        height: 28px;
    }

    .detail-feature strong {
        font-size: 12px;
    }

    .detail-feature p {
        font-size: 10px;
        line-height: 1.55;
    }

    .detail-product-actions {
        gap: 9px;
    }

    .detail-tertiary-link {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding: 8px 0;
    }

    .detail-related-image {
        height: auto;
        aspect-ratio: 4 / 3;
    }

}

/* =========================================================
   CONTACT / QUOTATION MOBILE
========================================================= */

@media (max-width: 700px) {

    .contact-form-card,
    .quotation-block {
        border-radius: 18px;
    }

    .contact-form-row,
    .quotation-grid {
        gap: 12px;
    }

    .contact-form-card input,
    .contact-form-card select,
    .contact-form-card textarea,
    .quotation-field input,
    .quotation-field select,
    .quotation-field textarea {
        font-size: 16px;
    }

    .quotation-field input,
    .quotation-field select {
        height: 48px;
    }

    .quotation-field textarea {
        min-height: 130px;
    }

    .quotation-submit-button {
        min-height: 50px;
    }

    .contact-help-grid article {
        min-height: 145px;
    }

}

/* =========================================================
   PORTFOLIO MOBILE
========================================================= */

@media (max-width: 700px) {

    .portfolio-page-hero h1 {
        font-size: 38px;
    }

    .portfolio-masonry {
        gap: 12px;
    }

    .portfolio-project-card,
    .portfolio-project-card-1,
    .portfolio-project-card-2,
    .portfolio-project-card-3,
    .portfolio-project-card-4,
    .portfolio-project-card-5,
    .portfolio-project-card-6 {
        border-radius: 16px;
    }

    .client-logo-card {
        width: 132px;
        height: 76px;
        flex-basis: 132px;
        padding: 12px;
        border-radius: 14px;
    }

    .client-logo-card img {
        max-height: 48px;
    }

    .portfolio-process-grid article {
        min-height: 185px;
        padding: 22px;
        border-radius: 18px;
    }

    .portfolio-process-grid h3 {
        margin-top: 36px;
        font-size: 18px;
    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .phoenix-container {
        width: calc(100% - 22px);
    }

    .hero-copy h1 {
        font-size: 29px;
    }

    .product-page-hero h1,
    .detail-product-info h1 {
        font-size: 31px;
    }

    .portfolio-page-hero h1,
    .contact-hero h1,
    .quotation-hero h1 {
        font-size: 34px;
    }

    .about-content h2,
    .section-heading h2 {
        font-size: 28px;
    }

}

/* =========================================================
   PHOENIX 2026 — PHASE 3.1
   RELATED PRODUCTS COMPACT FIX
========================================================= */

.detail-related-products {
    padding: 54px 0 58px !important;
    background: #f7f8f9 !important;
}

.detail-related-products .phoenix-container {
    width: min(1200px, calc(100% - 48px)) !important;
}

.detail-related-heading {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
}

.detail-related-heading > div {
    min-width: 0;
}

.detail-related-heading .detail-section-label {
    margin-bottom: 7px !important;
    font-size: 9px !important;
}

.detail-related-heading h2 {
    margin: 0 !important;
    max-width: 560px !important;
    font-size: clamp(28px, 2.8vw, 38px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
}

.detail-related-heading > a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #e30613 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.detail-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.detail-related-card {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e4e8eb !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(17,24,39,.045) !important;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}

.detail-related-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(227,6,19,.18) !important;
    box-shadow: 0 12px 26px rgba(17,24,39,.09) !important;
}

.detail-related-image {
    width: 100% !important;
    height: 155px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #eef1f3 !important;
}

.detail-related-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

.detail-related-content {
    padding: 13px 14px 15px !important;
}

.detail-related-content > span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #8a9198 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.detail-related-content h3 {
    margin: 0 0 7px !important;
    color: #151b21 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
}

.detail-related-content small {
    display: inline-block !important;
    color: #e30613 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {

    .detail-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .detail-related-image {
        height: 170px !important;
    }

}

@media (max-width: 700px) {

    .detail-related-products {
        padding: 46px 0 50px !important;
    }

    .detail-related-products .phoenix-container {
        width: calc(100% - 28px) !important;
    }

    .detail-related-heading {
        display: block !important;
        margin-bottom: 20px !important;
    }

    .detail-related-heading h2 {
        font-size: 28px !important;
    }

    .detail-related-heading > a {
        margin-top: 10px !important;
    }

    .detail-related-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .detail-related-card {
        display: grid !important;
        grid-template-columns: 125px minmax(0, 1fr) !important;
        align-items: stretch !important;
        border-radius: 14px !important;
    }

    .detail-related-image {
        width: 125px !important;
        height: 100% !important;
        min-height: 105px !important;
    }

    .detail-related-content {
        padding: 12px 13px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .detail-related-content h3 {
        font-size: 15px !important;
    }

}

@media (max-width: 390px) {

    .detail-related-card {
        grid-template-columns: 105px minmax(0, 1fr) !important;
    }

    .detail-related-image {
        width: 105px !important;
    }

}

/* =========================================================
   PHOENIX QUOTATION BACKEND STATES
========================================================= */

.quotation-honeypot {
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.quotation-submit-button:disabled {
    opacity: .62;
    cursor: wait;
}

.quotation-submit-button.is-loading span {
    animation: phoenixQuotationArrow .8s ease-in-out infinite alternate;
}

.quotation-status.is-success {
    color: #15803d;
    font-weight: 700;
}

.quotation-status.is-error {
    color: #c1121f;
    font-weight: 700;
}

.quotation-success-whatsapp {
    display: inline-flex;
    margin-left: 4px;
    color: #128c7e;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@keyframes phoenixQuotationArrow {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(4px);
    }
}

/* Phoenix quotation anti-spam honeypot */
.quotation-honeypot {
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.quotation-honeypot input,
.quotation-honeypot label {
    position: absolute !important;
    left: -99999px !important;
}
/* =========================================
   NAVBAR — REMOVE CLICK / FOCUS BOX
========================================= */

.phoenix-header a:focus,
.phoenix-header a:focus-visible,
.phoenix-nav a:focus,
.phoenix-nav a:focus-visible,
.phoenix-logo:focus,
.phoenix-logo:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.phoenix-header a {
    -webkit-tap-highlight-color: transparent;
}
/* =========================================================
   PHOENIX NAVBAR — REMOVE BLACK CLICK / FOCUS BOX
========================================================= */

.phoenix-header a,
.phoenix-header button,
.phoenix-nav a,
.phoenix-nav button,
.phoenix-logo,
.phoenix-logo a {
    -webkit-tap-highlight-color: transparent !important;
}

.phoenix-header a:focus,
.phoenix-header a:focus-visible,
.phoenix-header a:active,
.phoenix-header button:focus,
.phoenix-header button:focus-visible,
.phoenix-header button:active,
.phoenix-nav a:focus,
.phoenix-nav a:focus-visible,
.phoenix-nav a:active,
.phoenix-nav button:focus,
.phoenix-nav button:focus-visible,
.phoenix-nav button:active,
.phoenix-logo:focus,
.phoenix-logo:focus-visible,
.phoenix-logo:active,
.phoenix-logo a:focus,
.phoenix-logo a:focus-visible,
.phoenix-logo a:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}