/* =========================================================
   POE POE & PHYO THANDAR TUN FAMILY
   JAPANESE CORPORATE HEADER
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {
    --jp-navy: #101a30;
    --jp-navy-light: #182642;

    --jp-red: #d71920;
    --jp-red-dark: #b51218;

    --jp-green: #087f45;

    --jp-ivory: #faf8f2;
    --jp-paper: #f4f1e8;

    --jp-text: #20242b;
    --jp-muted: #6d727b;

    --jp-line: rgba(16, 26, 48, 0.12);
    --jp-line-dark: rgba(16, 26, 48, 0.18);

    --jp-white: #ffffff;
}


/* =========================================================
   HEADER BASE
   ========================================================= */

.jp-header {
    position: relative;

    width: 100%;

    background: var(--jp-white);

    color: var(--jp-text);

    font-family:
        "Inter",
        "Noto Sans",
        Arial,
        sans-serif;

    z-index: 1000;
}

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


/* =========================================================
   BRAND AREA
   ========================================================= */

.jp-brand-area {
    position: relative;

    width: 100%;

    background:
        linear-gradient(100deg,
            #ffffff 0%,
            #ffffff 52%,
            #faf8f2 100%);

    border-bottom: 1px solid var(--jp-line);

    overflow: hidden;
}


/*
   Very subtle Japanese-inspired background
*/

.jp-brand-area::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    border: 1px solid rgba(215, 25, 32, 0.035);

    box-shadow:
        0 0 0 30px rgba(215, 25, 32, 0.018),
        0 0 0 60px rgba(215, 25, 32, 0.012);

    pointer-events: none;
}


/*
   Small decorative red line
*/

.jp-brand-area::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 180px;
    height: 2px;

    background:
        linear-gradient(90deg,
            transparent,
            var(--jp-red));

    opacity: 0.7;

    pointer-events: none;
}


/* =========================================================
   BRAND CONTAINER
   ========================================================= */

.jp-brand-container {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
}


/* =========================================================
   LEFT SIDE : BRAND
   ========================================================= */

.jp-brand {

    display: flex;

    align-items: center;

    gap: 18px;

    min-width: 0;

    color: var(--jp-text);

    text-decoration: none;

    flex: 1 1 auto;
}

.jp-brand:hover {
    color: var(--jp-text);
}


/* =========================================================
   LOGO
   ========================================================= */

.jp-logo {

    flex: 0 0 auto;

    width: 105px;
    height: 105px;

    display: flex;

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

.jp-logo img {

    display: block;

    width: 105px;
    height: 105px;

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

    object-fit: contain;
}


/* =========================================================
   BRAND TEXT
   ========================================================= */

.jp-brand-text {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1.2;
}


/* =========================================================
   JAPANESE SLOGAN
   ========================================================= */

.jp-brand-japanese {

    margin-bottom: 7px;

    color: var(--jp-navy);

    font-family:
        "Shippori Mincho",
        "Noto Serif JP",
        "Yu Mincho",
        serif;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.5;

    letter-spacing: 0.1em;

    white-space: nowrap;
}

.jp-brand-japanese span {
    color: var(--jp-red);
}


/* =========================================================
   COMPANY NAME
   ========================================================= */

.jp-brand-name {

    color: var(--jp-navy);

    font-family:
        "Shippori Mincho",
        "Noto Serif",
        "Yu Mincho",
        serif;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.35;

    letter-spacing: 0.01em;

    white-space: nowrap;
}


/* =========================================================
   AGENCY NAME
   ========================================================= */

.jp-brand-agency {

    margin-top: 7px;

    color: var(--jp-muted);

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 10px;

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 0.22em;

    white-space: nowrap;
}


/* =========================================================
   RIGHT SIDE : CONTACT + LANGUAGE
   ========================================================= */

.jp-header-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    gap: 10px;

    min-width: 320px;
}


/* =========================================================
   CONTACT ITEM
   ========================================================= */

.jp-header-contact {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--jp-text);

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.jp-header-contact:hover {

    color: var(--jp-red);

    transform: translateY(-1px);
}


/* =========================================================
   CONTACT ICON
   ========================================================= */

.jp-contact-icon {

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    display: flex;

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

    border: 1px solid var(--jp-line-dark);

    color: var(--jp-red);

    background: rgba(250, 248, 242, 0.6);

    font-size: 12px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.jp-header-contact:hover .jp-contact-icon {

    background: rgba(215, 25, 32, 0.05);

    border-color: rgba(215, 25, 32, 0.3);
}


/* =========================================================
   CONTACT TEXT
   ========================================================= */

.jp-header-contact>span:last-child {

    display: flex;

    flex-direction: column;

    color: var(--jp-navy);

    font-family:
        "Inter",
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.45;
}


/* Small label */

.jp-header-contact small {

    display: block;

    margin-bottom: 2px;

    color: var(--jp-muted);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.16em;
}


/* =========================================================
   LANGUAGE AREA
   ========================================================= */

.jp-header-language {

    flex: 0 0 auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    padding-left: 24px;

    border-left: 1px solid var(--jp-line-dark);
}


/* Language title */

.jp-language-label {

    color: var(--jp-muted);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.16em;
}


/* =========================================================
   LANGUAGE SWITCH
   ========================================================= */

.jp-header-language .jp-lang-switch {

    display: flex;

    align-items: center;

    height: auto;
}


/* Language link */

.jp-header-language .jp-lang-switch a {

    position: relative;

    display: block;

    height: auto;

    padding: 0 9px;

    color: var(--jp-muted);

    text-decoration: none;

    font-family:
        "Inter",
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.5;

    letter-spacing: 0.04em;

    transition: color 0.2s ease;
}


/* First item */

.jp-header-language .jp-lang-switch a:first-child {
    padding-left: 0;
}


/* Divider */

.jp-header-language .jp-lang-switch a+a {

    border-left: 1px solid var(--jp-line-dark);

}


/* Hover */

.jp-header-language .jp-lang-switch a:hover {

    color: var(--jp-red);

}


/* Active */

.jp-header-language .jp-lang-switch a.is-active {

    color: var(--jp-red);

}


/* Underline */

.jp-header-language .jp-lang-switch a::after {

    content: "";

    position: absolute;

    left: 9px;
    right: 9px;

    bottom: -5px;

    height: 2px;

    background: var(--jp-red);

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 0.2s ease;
}

.jp-header-language .jp-lang-switch a:first-child::after {

    left: 0;
    right: 9px;

}

.jp-header-language .jp-lang-switch a.is-active::after,
.jp-header-language .jp-lang-switch a:hover::after {

    transform: scaleX(1);

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.jp-nav {

    position: relative;

    width: 100%;

    background: #fff;

    border-bottom: 1px solid var(--jp-line);

    box-shadow:
        0 4px 18px rgba(16, 26, 48, 0.045);
}


/* Nav container */

.jp-nav-container {

    min-height: 68px;

    display: flex;

    align-items: center;

    width: 100%;
}


/* =========================================================
   NAV LINKS
   ========================================================= */

.jp-links {

    display: flex;

    align-items: stretch;

    width: 100%;

    list-style: none;

    margin: 0;

    padding: 0;
}


/* Each item */

.jp-links>li {

    position: relative;

    flex: 1 1 0;

    min-width: 0;

    border-left: 1px solid var(--jp-line);
}

.jp-links>li:last-child {

    border-right: 1px solid var(--jp-line);

}


/* =========================================================
   NAV LINK
   ========================================================= */

.jp-links .jp-link {

    position: relative;

    width: 100%;

    height: 68px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    padding: 0 12px;

    color: var(--jp-text);

    background: transparent;

    text-decoration: none;

    font-family:
        "Shippori Mincho",
        "Noto Serif JP",
        "Yu Mincho",
        serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.25;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* English */

.jp-link-en {

    display: block;

    color: #9297a0;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    transition: color 0.2s ease;
}


/* =========================================================
   NAV HOVER
   ========================================================= */

.jp-links .jp-link:hover {

    color: var(--jp-red);

    background:
        rgba(215, 25, 32, 0.025);
}

.jp-links .jp-link:hover .jp-link-en {

    color: var(--jp-red);

}


/* =========================================================
   ACTIVE NAV
   ========================================================= */

.jp-links .jp-link.is-active {

    color: var(--jp-red);

    background:
        rgba(215, 25, 32, 0.025);
}

.jp-links .jp-link.is-active .jp-link-en {

    color: var(--jp-red);

}


/* Active red line */

.jp-links .jp-link.is-active::after {

    content: "";

    position: absolute;

    left: 18px;
    right: 18px;

    bottom: 0;

    height: 3px;

    background: var(--jp-red);
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.jp-nav .dropdown-menu {

    position: absolute;

    margin-top: 0;

    padding: 0;

    min-width: 235px;

    border: 1px solid var(--jp-line);

    border-top: 3px solid var(--jp-red);

    border-radius: 0;

    background: #fff;

    box-shadow:
        0 14px 35px rgba(16, 26, 48, 0.12);
}


/* Dropdown item */

.jp-nav .dropdown-item {

    position: relative;

    display: block;

    width: 100%;

    padding: 13px 18px;

    color: var(--jp-text);

    background: #fff;

    border-bottom: 1px solid rgba(16, 26, 48, 0.07);

    font-family:
        "Noto Sans JP",
        "Inter",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.5;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease;
}

.jp-nav .dropdown-item:last-child {

    border-bottom: none;

}


/* Dropdown hover */

.jp-nav .dropdown-item:hover,
.jp-nav .dropdown-item:focus {

    color: var(--jp-red);

    background: var(--jp-ivory);

    padding-left: 22px;

}


/* Active dropdown */

.jp-nav .dropdown-item.jp-dropdown-active {

    color: var(--jp-red);

    font-weight: 600;

    background: rgba(215, 25, 32, 0.025);

}


/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

.jp-nav .dropdown-toggle::after {

    margin-left: 5px;

    vertical-align: 0.1em;

    border-top-color: currentColor;

    opacity: 0.65;

}


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

.jp-contact-cta {

    flex: 0 0 auto;

    margin-left: 16px;
}


/* Contact button */

.jp-contact-button {

    min-width: 145px;

    height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 20px;

    border: 1px solid var(--jp-navy);

    background: var(--jp-navy);

    color: #fff;

    text-decoration: none;

    font-family:
        "Noto Sans JP",
        "Inter",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

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


/* Icon */

.jp-contact-button i {

    font-size: 12px;

}


/* Hover */

.jp-contact-button:hover {

    color: #fff;

    background: var(--jp-red);

    border-color: var(--jp-red);

    transform: translateY(-1px);

}


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

.jp-toggler {

    width: 44px;
    height: 40px;

    flex: 0 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin-left: auto;

    padding: 0;

    border: 1px solid var(--jp-line-dark);

    border-radius: 0;

    background: #fff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.jp-toggler:hover {

    border-color: var(--jp-red);

    background: var(--jp-ivory);

}

.jp-toggler:focus {

    outline: none;

    box-shadow: none;

}


/* Hamburger */

.jp-toggler span {

    display: block;

    width: 20px;

    height: 2px;

    background: var(--jp-navy);

    transition:
        background-color 0.2s ease;
}

.jp-toggler span:nth-child(2) {

    width: 14px;

    margin-left: 6px;

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {
    .jp-brand-container {
        min-height: 150px;

    }
    .jp-logo,
    .jp-logo img {

        width: 110px;
        height: 110px;

    }

    .jp-brand-japanese {

        font-size: 19px;

    }

    .jp-brand-name {

        font-size: 22px;

    }

    .jp-brand-agency {

        font-size: 10px;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199.98px) {

    .jp-brand-container {

        gap: 25px;

    }

    .jp-header-right {

        gap: 18px;

    }

    .jp-header-contact>span:last-child {

        font-size: 10px;

    }

    .jp-brand-name {

        font-size: 18px;

    }

    .jp-brand-japanese {

        font-size: 16px;

    }

    .jp-brand-agency {

        font-size: 9px;

    }

    .jp-links .jp-link {

        padding-left: 8px;
        padding-right: 8px;

        font-size: 13px;

    }

    .jp-link-en {

        font-size: 7px;

    }

    .jp-contact-button {

        min-width: 120px;

        padding-left: 14px;
        padding-right: 14px;

    }

}


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

@media (max-width: 991.98px) {

    /* -----------------------------------------------------
       Brand
       ----------------------------------------------------- */

    .jp-brand-container {

        min-height: 112px;

        flex-wrap: wrap;

        gap: 15px;

        padding-top: 15px;
        padding-bottom: 15px;

    }


    /* Logo */

    .jp-logo,
    .jp-logo img {

        width: 78px;
        height: 78px;

    }

    .jp-brand {

        gap: 12px;

    }


    /* Text */

    .jp-brand-japanese {

        margin-bottom: 4px;

        font-size: 13px;

        letter-spacing: 0.06em;

    }

    .jp-brand-name {

        font-size: 15px;

    }

    .jp-brand-agency {

        margin-top: 5px;

        font-size: 8px;

        letter-spacing: 0.14em;

    }


    /* -----------------------------------------------------
       Right side
       ----------------------------------------------------- */

    .jp-header-right {

        width: 100%;

        justify-content: flex-end;

        padding-top: 10px;

        border-top: 1px solid var(--jp-line);

    }


    /* Hide contact on tablet */

    .jp-header-contact {

        display: none;

    }


    /* Language */

    .jp-header-language {

        flex-direction: row;

        align-items: center;

        gap: 10px;

        padding-left: 0;

        border-left: none;

    }


    /* -----------------------------------------------------
       Navigation
       ----------------------------------------------------- */

    .jp-nav-container {

        min-height: 60px;

        flex-wrap: wrap;

    }


    /* Mobile toggle */

    .jp-toggler {

        display: flex;

    }


    /* Collapse */

    .jp-nav .navbar-collapse {

        width: 100%;

        flex-basis: 100%;

    }


    /* Links */

    .jp-links {

        flex-direction: column;

        width: 100%;

        margin-top: 12px;

        border-top: 1px solid var(--jp-line);

    }


    .jp-links>li {

        flex: none;

        width: 100%;

        border-left: none;

        border-right: none !important;

        border-bottom: 1px solid var(--jp-line);

    }


    /* Link */

    .jp-links .jp-link {

        width: 100%;

        height: auto;

        min-height: 52px;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        gap: 10px;

        padding: 12px 15px;

        font-size: 14px;

        white-space: normal;

    }


    /* English */

    .jp-link-en {

        font-size: 8px;

    }


    /* Active */

    .jp-links .jp-link.is-active {

        background:
            rgba(215, 25, 32, 0.04);

    }


    .jp-links .jp-link.is-active::after {

        left: 0;
        right: auto;

        top: 0;
        bottom: 0;

        width: 3px;

        height: auto;

    }


    /* -----------------------------------------------------
       Dropdown
       ----------------------------------------------------- */

    .jp-nav .dropdown-menu {

        position: static !important;

        width: 100%;

        min-width: 0;

        margin: 0;

        transform: none !important;

        border-top: 1px solid var(--jp-line);

        border-right: none;

        border-bottom: none;

        border-left: 3px solid var(--jp-red);

        border-radius: 0;

        box-shadow: none;

    }


    .jp-nav .dropdown-item {

        padding: 12px 18px;

    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .jp-contact-cta {

        width: 100%;

        margin: 10px 0 15px;

    }

    .jp-contact-button {

        width: 100%;

    }

}


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

@media (max-width: 767.98px) {

    .jp-brand-container {

        min-height: auto;

    }


    .jp-brand {

        width: 100%;

    }


    .jp-header-right {

        justify-content: flex-start;

    }


    .jp-header-language {

        margin-left: auto;

        margin-right: 0;

    }

}


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

@media (max-width: 575.98px) {


    .jp-brand-container {

        padding-top: 13px;
        padding-bottom: 13px;

    }


    .jp-logo,
    .jp-logo img {

        width: 64px;
        height: 64px;

    }

    .jp-brand {

        gap: 9px;

    }


    .jp-brand-japanese {

        font-size: 10px;

        letter-spacing: 0.03em;

    }

    .jp-brand-name {

        font-size: 12px;

        line-height: 1.3;

    }

    .jp-brand-agency {

        margin-top: 4px;

        font-size: 6px;

        letter-spacing: 0.08em;

    }


    /* -----------------------------------------------------
       Language
       ----------------------------------------------------- */

    .jp-header-language {

        width: 100%;

        justify-content: flex-end;

    }


    .jp-language-label {

        font-size: 7px;

    }

    .jp-header-language .jp-lang-switch a {

        font-size: 11px;

    }


    /* -----------------------------------------------------
       Navigation
       ----------------------------------------------------- */

    .jp-nav-container {

        min-height: 56px;

    }

    .jp-toggler {

        width: 42px;
        height: 38px;

    }


    /* -----------------------------------------------------
       Contact CTA
       ----------------------------------------------------- */

    .jp-contact-button {

        height: 44px;

        font-size: 12px;

    }

}


/* =========================================================
   EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width: 380px) {

    .jp-logo,
    .jp-logo img {

        width: 56px;
        height: 56px;

    }

    .jp-brand {

        gap: 7px;

    }

    .jp-brand-japanese {

        font-size: 9px;

    }

    .jp-brand-name {

        font-size: 11px;

    }

    .jp-brand-agency {

        font-size: 5px;

    }

}