@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #071d61;
    --red: #e42b31;
    --gold: #c7a14c;
    --ink: #17213a;
    --muted: #66718a;
    --line: #dfe5ef;
    --soft: #f5f7fb;
    --white: #fff;
    --radius: 20px;
    --shadow: 0 18px 48px rgba(4, 25, 80, .13);
    --shadow2: 0 8px 24px rgba(4, 25, 80, .08);
    --header: 82px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font: 16px/1.65 "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    overflow-x: hidden
}

body.lock {
    overflow: hidden
}

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

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

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

button {
    cursor: pointer
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto
}

.sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

/* HEADER: no top information bar */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(7, 29, 97, .1)
}

.admin-bar .header {
    top: 32px
}

@media screen and (max-width:782px) {
    .admin-bar .header {
        top: 46px
    }
}

@media screen and (max-width:600px) {
    .admin-bar .header {
        top: 0
    }
}

.header-inner {
    min-height: var(--header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.brand {
    display: inline-flex;
    align-items: center
}

.brand img {
    height: 76px;
    width: auto
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 16px;
    font-weight: 800;
    color: var(--navy)
}

.desktop-nav a {
    position: relative;
    padding: 29px 0 24px
}

.desktop-nav a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 17px;
    height: 2px;
    background: linear-gradient(90deg, var(--red), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: .2s
}

.desktop-nav a:hover:after,
.desktop-nav a.active:after {
    transform: scaleX(1)
}

.lang {
    border: 1px solid var(--gold);
    background: #fff;
    color: var(--navy);
    border-radius: 999px;
    padding: 8px 13px;
    font-weight: 900
}

.lang:hover {
    background: var(--gold);
    color: #fff
}

/* mobile menu works with native <details>, even without JS */
.mobile-menu {
    display: none;
    position: relative
}

.mobile-menu summary {
    list-style: none;
    width: 40px;
    height: 40px;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer
}

.mobile-menu summary::-webkit-details-marker {
    display: none
}

.bars,
.bars:before,
.bars:after {
    width: 26px;
    height: 3px;
    background: var(--navy);
    border-radius: 999px;
    display: block;
    position: relative;
    transition: .22s
}

.bars:before,
.bars:after {
    content: "";
    position: absolute;
    left: 0
}

.bars:before {
    top: -8px
}

.bars:after {
    top: 8px
}

.mobile-menu[open] .bars {
    background: transparent
}

.mobile-menu[open] .bars:before {
    top: 0;
    transform: rotate(45deg);
    background: var(--navy);
}

.mobile-menu[open] .bars:after {
    top: 0;
    transform: rotate(-45deg);
    background: var(--navy);
}

.mobile-panel {
    display: none;
    position: fixed;
    z-index: 1100;
    top: calc(var(--header) + 8px);
    left: 14px;
    right: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(4, 25, 80, .24);
    padding: 10px;
    max-height: calc(100vh - var(--header) - 28px);
    overflow: auto
}

.mobile-menu[open]~.mobile-panel {
    display: block
}

.mobile-panel a,
.mobile-panel button {
    width: 100%;
    border: 0;
    background: #fff;
    color: var(--navy);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 16px;
    border-radius: 12px;
    font-weight: 850;
    text-align: left
}

.mobile-panel a:hover,
.mobile-panel a.active,
.mobile-panel button:hover {
    background: var(--soft)
}

.mobile-panel a b {
    color: var(--red)
}

.overlay {
    display: none;
    position: fixed;
    z-index: 1050;
    inset: var(--header) 0 0;
    background: rgba(3, 15, 53, .5);
    backdrop-filter: blur(2px)
}

.mobile-menu[open]+.overlay {
    display: block
}

/* Routing */
.page-in {
    animation: pagein .35s ease
}

@keyframes pagein {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: all .6s cubic-bezier(.16, 1, .3, 1)
}

/* Common */
.section {
    padding: 88px 0
}

.section-sm {
    padding: 62px 0
}

.alt {
    background: var(--soft)
}

.navy {
    background: linear-gradient(135deg, var(--navy), var(--navy));
    color: #fff
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase
}

.kicker:before {
    content: "";
    width: 25px;
    height: 2px;
    background: var(--red)
}

.title {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--navy);
    font-size: clamp(30px, 4.2vw, 45px);
    line-height: 1.13;
    letter-spacing: -.025em;
    margin: 12px 0 19px
}

.navy .title {
    color: #fff
}

.lead {
    font-size: 19px;
    color: #2f3a54;
    max-width: 800px
}

.navy .lead {
    color: rgba(255, 255, 255, .82)
}

.muted {
    color: var(--muted)
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
    align-items: center
}

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

.grid4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px
}

.stack {
    display: grid;
    gap: 24px
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    overflow: hidden
}

.pad {
    padding: 29px
}

.visual {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 9px;
    padding: 13px 20px;
    font-weight: 900;
    transition: .22s
}

.btn:hover {
    transform: translateY(-2px)
}

.primary {
    background: var(--red);
    color: #fff;
    box-shadow: 0 10px 24px rgba(228, 43, 49, .24)
}

.dark {
    background: var(--navy);
    color: #fff
}

.light {
    background: #fff;
    color: var(--navy)
}

.outline {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .65)
}

.actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 28px
}

.text-link {
    color: var(--red);
    font-weight: 900
}

.chip {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 850
}

.reveal {
    opacity: 1;
    transform: none
}

/* Hero */
.hero {
    min-height: 660px;
    display: flex;
    align-items: center;
    position: relative;
    color: #fff;
    background-image: linear-gradient(90deg, rgba(2, 14, 52, .94), rgba(5, 30, 89, .73) 45%, rgba(5, 30, 89, .15) 78%), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCI+CjxkZWZzPgogPGxpbmVhckdyYWRpZW50IGlkPSJiZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiMwNjE2NGYiLz48c3RvcCBvZmZzZXQ9Ii41OCIgc3RvcC1jb2xvcj0iIzBiM2I4NiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBiMWI0ZCIvPjwvbGluZWFyR3JhZGllbnQ+CiA8bGluZWFyR3JhZGllbnQgaWQ9ImdsYXNzIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agc3RvcC1jb2xvcj0iI2RmZWVmZiIgc3RvcC1vcGFjaXR5PSIuOSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzVjODdjNCIgc3RvcC1vcGFjaXR5PSIuMyIvPjwvbGluZWFyR3JhZGllbnQ+CiA8bGluZWFyR3JhZGllbnQgaWQ9ImdvbGQiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwIj48c3RvcCBzdG9wLWNvbG9yPSIjZjVlMGE3Ii8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iI2M4YTI0ZCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdkNWQxZCIvPjwvbGluZWFyR3JhZGllbnQ+CiA8ZmlsdGVyIGlkPSJibHVyIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyNiIvPjwvZmlsdGVyPgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgZmlsbD0idXJsKCNiZykiLz4KPGNpcmNsZSBjeD0iMTI2MCIgY3k9IjE3MCIgcj0iMjEwIiBmaWxsPSIjMjg0ZjlhIiBvcGFjaXR5PSIuMjgiIGZpbHRlcj0idXJsKCNibHVyKSIvPgo8Y2lyY2xlIGN4PSIxMDQwIiBjeT0iNTcwIiByPSIyNzAiIGZpbGw9IiMwZTY3YWEiIG9wYWNpdHk9Ii4yIiBmaWx0ZXI9InVybCgjYmx1cikiLz4KPHBhdGggZD0iTTc2MCA3NzBDOTYwIDYxMCAxMTkwIDU4MCAxNjAwIDU3MFY5MDBINTQwWiIgZmlsbD0iIzA3MTMzOSIgb3BhY2l0eT0iLjkiLz4KPHBhdGggZD0iTTg0MCA4NTBDMTAzMCA2NTAgMTI1MCA2NDAgMTYwMCA2NzAiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnb2xkKSIgc3Ryb2tlLXdpZHRoPSI4IiBvcGFjaXR5PSIuOTUiLz4KPGcgb3BhY2l0eT0iLjk0Ij4KIDxyZWN0IHg9Ijg4MCIgeT0iMzMwIiB3aWR0aD0iOTQiIGhlaWdodD0iMzYwIiByeD0iOSIgZmlsbD0idXJsKCNnbGFzcykiLz4KIDxyZWN0IHg9Ijk5MiIgeT0iMjU1IiB3aWR0aD0iMTM1IiBoZWlnaHQ9IjQzNSIgcng9IjEyIiBmaWxsPSJ1cmwoI2dsYXNzKSIvPgogPHJlY3QgeD0iMTE1MCIgeT0iMzc1IiB3aWR0aD0iMTA1IiBoZWlnaHQ9IjMxNSIgcng9IjkiIGZpbGw9InVybCgjZ2xhc3MpIi8+CiA8cmVjdCB4PSIxMjc4IiB5PSIzMDAiIHdpZHRoPSIxNTAiIGhlaWdodD0iMzkwIiByeD0iMTIiIGZpbGw9InVybCgjZ2xhc3MpIi8+CiA8cmVjdCB4PSIxNDUwIiB5PSI0MjAiIHdpZHRoPSIxMTAiIGhlaWdodD0iMjcwIiByeD0iOSIgZmlsbD0idXJsKCNnbGFzcykiLz4KPC9nPgo8ZyBzdHJva2U9IiNkOGU5ZmYiIHN0cm9rZS1vcGFjaXR5PSIuMzYiPgogPHBhdGggZD0iTTkwNSAzNTVWNjYwTTkzMiAzNTVWNjYwTTEwMTkgMjgwVjY2ME0xMDYwIDI4MFY2NjBNMTEwMCAyODBWNjYwTTExNzUgNDAwVjY2ME0xMjE1IDQwMFY2NjBNMTMxMCAzMjVWNjYwTTEzNTAgMzI1VjY2ME0xMzkwIDMyNVY2NjBNMTQ3OCA0NDVWNjYwTTE1MjAgNDQ1VjY2MCIvPgogPHBhdGggZD0iTTg4MCAzOTBIOTc0TTg4MCA0NTBIOTc0TTg4MCA1MTBIOTc0TTg4MCA1NzBIOTc0TTk5MiAzMzBIMTEyN005OTIgNDEwSDExMjdNOTkyIDQ5MEgxMTI3TTk5MiA1NzBIMTEyN00xMjc4IDM2MEgxNDI4TTEyNzggNDUwSDE0MjhNMTI3OCA1NDBIMTQyOCIvPgo8L2c+CjxnIGZpbGw9IiNkNWE2NGIiPgogPGNpcmNsZSBjeD0iOTI1IiBjeT0iNTA1IiByPSI0Ii8+PGNpcmNsZSBjeD0iMTA1NSIgY3k9IjQ0NSIgcj0iNCIvPjxjaXJjbGUgY3g9IjEzNjAiIGN5PSI0MjAiIHI9IjQiLz48Y2lyY2xlIGN4PSIxNTAwIiBjeT0iNTMwIiByPSI0Ii8+CjwvZz4KPHBhdGggZD0iTTAgNzUwQzI2MCA2OTAgNDIwIDczMCA2NTAgNzkwQzkwMCA4NTUgMTE2MCA4NDAgMTYwMCA3MzVWOTAwSDBaIiBmaWxsPSIjMDQxMDMzIi8+CjxwYXRoIGQ9Ik0wIDc5NUMyNzAgNzUwIDUxMCA3OTAgNzIwIDgzNUM5OTAgODkzIDEyNjAgODYwIDE2MDAgNzkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlNzJiMmYiIHN0cm9rZS13aWR0aD0iNCIgb3BhY2l0eT0iLjkiLz4KPHBhdGggZD0iTTAgODE1QzMwMCA3ODAgNTQwIDgyMCA3NjAgODU1QzEwMDAgODk1IDEyOTAgODc1IDE2MDAgODIwIiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGEyNGQiIHN0cm9rZS13aWR0aD0iMyIgb3BhY2l0eT0iLjkiLz4KPC9zdmc+");
    background-size: cover;
    background-position: center
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--navy))
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 780px;
    padding: 88px 0
}

.hero-badge {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em
}

.hero h1 {
    font: 700 clamp(46px, 6vw, 65px)/1.04 Georgia, "Times New Roman", serif;
    letter-spacing: -.035em;
    margin: 18px 0 22px
}

.hero p {
    font-size: 16px;
    color: rgba(255, 255, 255, .88);
    max-width: 680px
}

.hero-tags {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 24px
}

.hero-tags span {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(3, 15, 53, .28);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 13px
}

/* Home */
.logo-card {
    height: 100%;
    display: flex;
    flex-direction: column
}

.logo-card .scene {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover
}

.logo-card .body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.brand-logo {
    height: 82px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    margin-bottom: 12px
}

.logo-card h3 {
    font: 700 30px/1.2 Georgia, serif;
    color: var(--navy);
    margin: 5px 0 9px
}

.logo-card p {
    flex: 1
}

.solution {
    height: 100%;
    padding: 27px;
    border-top: 4px solid var(--gold)
}

.iconbox {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--navy), var(--navy));
    color: #fff;
    font-weight: 900
}

.solution h3 {
    color: var(--navy);
    font-size: 18px;
    margin: 17px 0 7px
}

.value {
    height: 100%;
    padding: 25px 18px;
    text-align: center
}

.value .num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    font-weight: 900;
    margin: 0 auto 12px
}

.value h3 {
    font-size: 16px;
    color: var(--navy);
    margin: 0
}

.why {
    display: grid;
    gap: 15px
}

.why-item {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px
}

.why-item .n {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--gold);
    display: grid;
    place-items: center;
    color: var(--navy);
    font-weight: 900
}

.why-item h3 {
    color: var(--navy);
    font-size: 17px;
    margin: 1px 0 4px
}

.why-item p {
    margin: 0
}

.cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-radius: 25px;
    background: linear-gradient(135deg, var(--navy), var(--navy));
    padding: 44px;
    color: #fff;
    box-shadow: var(--shadow)
}

.cta h2 {
    font: 700 clamp(31px, 4vw, 43px)/1.15 Georgia, serif;
    margin: 0 0 7px
}

.cta p {
    margin: 0;
    color: rgba(255, 255, 255, .82)
}

/* Page hero */
.page-hero {
    padding: 100px 0 82px;
    color: #fff;
    background-image: linear-gradient(100deg, rgba(3, 18, 65, .95), rgba(3, 18, 65, .58)), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDc4MCI+CjxkZWZzPgogPGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+PHN0b3Agc3RvcC1jb2xvcj0iI2Y3ZjlmZCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2U5ZWVmOCIvPjwvbGluZWFyR3JhZGllbnQ+CiA8bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBzdG9wLWNvbG9yPSIjMTczZDg2Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDcxZDYxIi8+PC9saW5lYXJHcmFkaWVudD4KIDxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPjxzdG9wIHN0b3AtY29sb3I9IiNlNmM2NzEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNhODc5MjgiLz48L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9Ijc4MCIgcng9IjM2IiBmaWxsPSJ1cmwoI2EpIi8+CjxyZWN0IHg9IjYxMCIgeT0iODAiIHdpZHRoPSI0NjAiIGhlaWdodD0iNjEwIiByeD0iMjgiIGZpbGw9InVybCgjYikiLz4KPGcgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjEyIj48Y2lyY2xlIGN4PSIxMDIwIiBjeT0iMTMwIiByPSI3MCIvPjxjaXJjbGUgY3g9IjY4MCIgY3k9IjYyMCIgcj0iMTEwIi8+PC9nPgo8cmVjdCB4PSI2OTAiIHk9IjE3MCIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzNTAiIHJ4PSIxOCIgZmlsbD0iI2ZmZiIvPgo8cmVjdCB4PSI3MzUiIHk9IjIyNSIgd2lkdGg9IjIxMCIgaGVpZ2h0PSIxOCIgcng9IjkiIGZpbGw9IiNjYWQ2ZWIiLz4KPHJlY3QgeD0iNzM1IiB5PSIyNzUiIHdpZHRoPSIxNzAiIGhlaWdodD0iMTQiIHJ4PSI3IiBmaWxsPSIjZGJlM2YwIi8+CjxyZWN0IHg9IjczNSIgeT0iMzE1IiB3aWR0aD0iMjEwIiBoZWlnaHQ9IjE0IiByeD0iNyIgZmlsbD0iI2RiZTNmMCIvPgo8cmVjdCB4PSI3MzUiIHk9IjM1NSIgd2lkdGg9IjE0NSIgaGVpZ2h0PSIxNCIgcng9IjciIGZpbGw9IiNkYmUzZjAiLz4KPGNpcmNsZSBjeD0iNzU1IiBjeT0iNDMwIiByPSI0NSIgZmlsbD0iIzA3MWQ2MSIvPgo8cGF0aCBkPSJNNzM1IDQzMGwxNSAxNSAyOC0zNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTg0MCA0MzBoMTA1IiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cmVjdCB4PSIxMTUiIHk9IjE1MCIgd2lkdGg9IjM5MCIgaGVpZ2h0PSI0MzAiIHJ4PSIyNCIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZGJlM2YwIiBzdHJva2Utd2lkdGg9IjMiLz4KPHJlY3QgeD0iMTY1IiB5PSIyMTAiIHdpZHRoPSIyOTAiIGhlaWdodD0iMjEwIiByeD0iMTgiIGZpbGw9IiNlZWYzZmIiLz4KPHBhdGggZD0iTTE5MCAzOTBMMjc1IDMwMGw3MCA1NSA4NS0xMTUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzA3MWQ2MSIgc3Ryb2tlLXdpZHRoPSIxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxjaXJjbGUgY3g9IjI3NSIgY3k9IjMwMCIgcj0iMTMiIGZpbGw9IiNlNzJiMmYiLz48Y2lyY2xlIGN4PSIzNDUiIGN5PSIzNTUiIHI9IjEzIiBmaWxsPSIjYzhhMjRkIi8+PGNpcmNsZSBjeD0iNDMwIiBjeT0iMjQwIiByPSIxMyIgZmlsbD0iIzA3MWQ2MSIvPgo8cmVjdCB4PSIxNjUiIHk9IjQ2NSIgd2lkdGg9IjIxMCIgaGVpZ2h0PSIxNCIgcng9IjciIGZpbGw9IiNjYmQ2ZTciLz4KPHJlY3QgeD0iMTY1IiB5PSI1MDUiIHdpZHRoPSIxNjAiIGhlaWdodD0iMTQiIHJ4PSI3IiBmaWxsPSIjZGJlM2YwIi8+CjxwYXRoIGQ9Ik01MjAgNjUwQzYwMCA2MDUgNjkwIDYxMCA3NzUgNjY1IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNzJiMmYiIHN0cm9rZS13aWR0aD0iNCIvPgo8cGF0aCBkPSJNNDM1IDY4MEM1NzAgNjAwIDcyMCA2MTAgODYwIDY5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ1cmwoI2cpIiBzdHJva2Utd2lkdGg9IjciLz4KPC9zdmc+");
    background-size: cover;
    background-position: center
}

.page-hero.eco {
    background-image: linear-gradient(100deg, rgba(3, 18, 65, .95), rgba(3, 18, 65, .55)), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDc4MCI+CjxkZWZzPgogPGxpbmVhckdyYWRpZW50IGlkPSJza3kiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBzdG9wLWNvbG9yPSIjZWFmM2ZmIi8+PHN0b3Agb2Zmc2V0PSIuNjUiIHN0b3AtY29sb3I9IiNiZGQ0ZWYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4ZWIzZGMiLz48L2xpbmVhckdyYWRpZW50PgogPGxpbmVhckdyYWRpZW50IGlkPSJnbGFzcyIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiNkZmYxZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ZDc5YjEiLz48L2xpbmVhckdyYWRpZW50PgogPGxpbmVhckdyYWRpZW50IGlkPSJnb2xkIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCI+PHN0b3Agc3RvcC1jb2xvcj0iI2YxZDY4ZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlkNzUyYSIvPjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNzgwIiByeD0iMzYiIGZpbGw9InVybCgjc2t5KSIvPgo8Y2lyY2xlIGN4PSI5NDAiIGN5PSIxNjAiIHI9Ijk1IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuNjUiLz4KPGcgb3BhY2l0eT0iLjk2Ij4KIDxyZWN0IHg9IjExMCIgeT0iMjkwIiB3aWR0aD0iMTUwIiBoZWlnaHQ9IjMzMCIgcng9IjgiIGZpbGw9IiMyMDRiOGEiLz4KIDxyZWN0IHg9IjI4MCIgeT0iMjEwIiB3aWR0aD0iMTkwIiBoZWlnaHQ9IjQxMCIgcng9IjkiIGZpbGw9InVybCgjZ2xhc3MpIi8+CiA8cmVjdCB4PSI0OTAiIHk9IjMzMCIgd2lkdGg9IjEzMCIgaGVpZ2h0PSIyOTAiIHJ4PSI4IiBmaWxsPSIjMjg1OTk5Ii8+CiA8cmVjdCB4PSI2NTAiIHk9IjE1NSIgd2lkdGg9IjIxMCIgaGVpZ2h0PSI0NjUiIHJ4PSIxMSIgZmlsbD0idXJsKCNnbGFzcykiLz4KIDxyZWN0IHg9Ijg4NSIgeT0iMjY1IiB3aWR0aD0iMTY1IiBoZWlnaHQ9IjM1NSIgcng9IjkiIGZpbGw9IiMxYjQ3ODYiLz4KPC9nPgo8ZyBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIuNDIiIHN0cm9rZS13aWR0aD0iMyI+CiA8cGF0aCBkPSJNMTU1IDMyMFY2MDBNMjEwIDMyMFY2MDBNMzI1IDI0MFY2MDBNMzg1IDI0MFY2MDBNNTM1IDM2MFY2MDBNNzAwIDE5MFY2MDBNNzYwIDE5MFY2MDBNODIwIDE5MFY2MDBNOTMwIDMwMFY2MDBNOTk1IDMwMFY2MDAiLz4KIDxwYXRoIGQ9Ik0xMTAgMzYwSDI2ME0xMTAgNDMwSDI2ME0xMTAgNTAwSDI2ME0yODAgMzAwSDQ3ME0yODAgMzkwSDQ3ME0yODAgNDgwSDQ3ME02NTAgMjYwSDg2ME02NTAgMzcwSDg2ME02NTAgNDgwSDg2ME04ODUgMzYwSDEwNTBNODg1IDQ1MEgxMDUwIi8+CjwvZz4KPHBhdGggZD0iTTAgNTkwQzIwMCA1NDAgNDEwIDU1MCA2MDAgNjEwQzgwMCA2NzUgMTAwMCA2NjUgMTIwMCA1OTBWNzgwSDBaIiBmaWxsPSIjMDcxZDYxIi8+CjxwYXRoIGQ9Ik0wIDY1MEMyMzAgNjAwIDQyMCA2MTUgNjEwIDY2NUM4MDAgNzE1IDk5MCA3MDUgMTIwMCA2NDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnb2xkKSIgc3Ryb2tlLXdpZHRoPSIxMCIvPgo8cGF0aCBkPSJNMCA2OTBDMjYwIDY1MCA0NTAgNjYwIDY0MCA3MDVDODUwIDc1NSAxMDMwIDczMCAxMjAwIDY4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTcyYjJmIiBzdHJva2Utd2lkdGg9IjUiLz4KPC9zdmc+")
}

.page-hero.news {
    background-image: linear-gradient(100deg, rgba(3, 18, 65, .95), rgba(3, 18, 65, .55)), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDc4MCI+CjxkZWZzPgogPGxpbmVhckdyYWRpZW50IGlkPSJiZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiMwNzFkNjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxNzRmOTgiLz48L2xpbmVhckdyYWRpZW50PgogPGxpbmVhckdyYWRpZW50IGlkPSJnb2xkIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCI+PHN0b3Agc3RvcC1jb2xvcj0iI2YyZGE5MCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2E0NzcyOCIvPjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNzgwIiByeD0iMzYiIGZpbGw9InVybCgjYmcpIi8+CjxjaXJjbGUgY3g9IjEwMjAiIGN5PSIxNDAiIHI9IjE4MCIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjA1Ii8+CjxyZWN0IHg9IjEzNSIgeT0iMTIwIiB3aWR0aD0iOTMwIiBoZWlnaHQ9IjU0MCIgcng9IjMwIiBmaWxsPSIjZmZmIi8+CjxyZWN0IHg9IjE5MCIgeT0iMTgwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjI2MCIgcng9IjE4IiBmaWxsPSIjZTllZmY4Ii8+CjxwYXRoIGQ9Ik0yMzAgMzkwbDgwLTkwIDY1IDUwIDEwMC0xMjAgNTUgNzUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzA3MWQ2MSIgc3Ryb2tlLXdpZHRoPSIxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxjaXJjbGUgY3g9IjMxMCIgY3k9IjMwMCIgcj0iMTIiIGZpbGw9IiNlNzJiMmYiLz48Y2lyY2xlIGN4PSIzNzUiIGN5PSIzNTAiIHI9IjEyIiBmaWxsPSIjYzhhMjRkIi8+PGNpcmNsZSBjeD0iNDc1IiBjeT0iMjMwIiByPSIxMiIgZmlsbD0iIzA3MWQ2MSIvPgo8cmVjdCB4PSI2MjAiIHk9IjE5MCIgd2lkdGg9IjM2MCIgaGVpZ2h0PSIyNCIgcng9IjEyIiBmaWxsPSIjMDcxZDYxIi8+CjxyZWN0IHg9PSI2MjAiIHk9IjI0NSIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIxNiIgcng9IjgiIGZpbGw9IiNjOGQ1ZTgiLz4KPHJlY3QgeD0iNjIwIiB5PSIyODUiIHdpZHRoPSIzNDAiIGhlaWdodD0iMTYiIHJ4PSI4IiBmaWxsPSIjZDhlMWVlIi8+CjxyZWN0IHg9IjYyMCIgeT0iMzI1IiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE2IiByeD0iOCIgZmlsbD0iI2Q4ZTFlZSIvPgo8cmVjdCB4PSIxOTAiIHk9IjUwMCIgd2lkdGg9Ijc5MCIgaGVpZ2h0PSIxOCIgcng9IjkiIGZpbGw9IiNjN2Q1ZTgiLz4KPHJlY3QgeD0iMTkwIiB5PSI1NDUiIHdpZHRoPSI2NDAiIGhlaWdodD0iMTgiIHJ4PSI5IiBmaWxsPSIjZDhlMWVlIi8+CjxyZWN0IHg9IjE5MCIgeT0iNTkwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjE4IiByeD0iOSIgZmlsbD0idXJsKCNnb2xkKSIvPgo8cGF0aCBkPSJNMCA3MjBDMzEwIDY1MCA2MDAgNzIwIDEyMDAgNjMwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlNzJiMmYiIHN0cm9rZS13aWR0aD0iNSIvPgo8L3N2Zz4=")
}

.page-hero.contact {
    background-image: linear-gradient(100deg, rgba(3, 18, 65, .95), rgba(3, 18, 65, .55)), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDc4MCI+CjxkZWZzPgogPGxpbmVhckdyYWRpZW50IGlkPSJiZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiNmNmY4ZmMiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNkY2U2ZjUiLz48L2xpbmVhckdyYWRpZW50PgogPGxpbmVhckdyYWRpZW50IGlkPSJuYXYiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBzdG9wLWNvbG9yPSIjMTIzYzg2Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDYxYjU4Ii8+PC9saW5lYXJHcmFkaWVudD4KIDxsaW5lYXJHcmFkaWVudCBpZD0iZ29sZCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPjxzdG9wIHN0b3AtY29sb3I9IiNmMmQ4ODgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5ZDc0MjUiLz48L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9Ijc4MCIgcng9IjM2IiBmaWxsPSJ1cmwoI2JnKSIvPgo8cmVjdCB4PSI5MCIgeT0iOTAiIHdpZHRoPSIxMDIwIiBoZWlnaHQ9IjYwMCIgcng9IjM0IiBmaWxsPSIjZmZmIi8+CjxyZWN0IHg9IjkwIiB5PSI5MCIgd2lkdGg9IjMzMCIgaGVpZ2h0PSI2MDAiIHJ4PSIzNCIgZmlsbD0idXJsKCNuYXYpIi8+CjxjaXJjbGUgY3g9IjI1NSIgY3k9IjI0MCIgcj0iOTUiIGZpbGw9IiNmZmYiIG9wYWNpdHk9Ii4xIi8+CjxwYXRoIGQ9Ik0xNzAgMjgwaDE3ME0yMTAgMjIwaDkwTTI1NSAxNTB2MjYwIiBzdHJva2U9InVybCgjZ29sZCkiIHN0cm9rZS13aWR0aD0iMTYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTc1IDI4MGwtNTUgOTBoMTEwek0zMzUgMjgwbC01NSA5MGgxMTB6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyMCAzOTBoMTEwTTI4MCAzOTBoMTEwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cmVjdCB4PSI1MDAiIHk9IjE2MCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI4MCIgcng9IjE2IiBmaWxsPSIjZWVmM2ZhIi8+CjxyZWN0IHg9IjU0MCIgeT0iMTkwIiB3aWR0aD0iMjUwIiBoZWlnaHQ9IjE4IiByeD0iOSIgZmlsbD0iI2M3ZDVlOCIvPgo8cmVjdCB4PSI1MDAiIHk9IjI4NSIgd2lkdGg9IjIzMCIgaGVpZ2h0PSIyNTAiIHJ4PSIxOCIgZmlsbD0iI2YxZjVmYiIvPgo8cmVjdCB4PSI3NzAiIHk9IjI4NSIgd2lkdGg9IjIzMCIgaGVpZ2h0PSIyNTAiIHJ4PSIxOCIgZmlsbD0iI2YxZjVmYiIvPgo8ZyBmaWxsPSIjMDcxZDYxIj4KIDxyZWN0IHg9IjU0NSIgeT0iMzQwIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiLz48cmVjdCB4PSI1NDUiIHk9IjM5MCIgd2lkdGg9IjExMCIgaGVpZ2h0PSIxNiIgcng9IjgiLz48cmVjdCB4PSI1NDUiIHk9IjQzMCIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNiIgcng9IjgiLz4KIDxjaXJjbGUgY3g9Ijg4NSIgY3k9IjM3NSIgcj0iNzAiLz4KPC9nPgo8cGF0aCBkPSJNODUwIDM3NWg3ME04ODUgMzQwdjcwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cmVjdCB4PSI1MDAiIHk9IjU3NSIgd2lkdGg9IjUwMCIgaGVpZ2h0PSIzMiIgcng9IjE2IiBmaWxsPSJ1cmwoI2dvbGQpIi8+Cjwvc3ZnPg==")
}

.page-hero h1 {
    font: 700 clamp(44px, 6vw, 63px)/1.05 Georgia, serif;
    margin: 18px 0
}

.crumb {
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
    margin-top: 15px;
}

.crumb a {
    color: var(--gold);
    transition: .3s;
    font-weight: 500;
}

.crumb a:hover {
    color: #fff;
}

.info-card {
    height: 100%;
    padding: 32px;
    border-top: 4px solid var(--gold)
}

.info-card h2 {
    font: 700 31px/1.2 Georgia, serif;
    color: var(--navy);
    margin: 11px 0
}

.fact-list {
    display: grid;
    gap: 13px
}

.fact {
    display: grid;
    grid-template-columns: 195px 1fr;
    gap: 15px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line)
}

.fact b {
    color: var(--navy)
}

.note {
    padding: 17px 19px;
    border-left: 4px solid var(--gold);
    background: #fff9e9;
    border-radius: 0 12px 12px 0;
    color: #54431f
}

/* Ecosystem + brand pages */
.brand-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow2)
}

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

.brand-scene-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 350px;
}

.brand-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-copy {
    padding: 40px
}

.brand-copy .brand-logo {
    height: 92px;
    max-width: 245px
}

.brand-copy .title {
    font-size: 40px
}

.service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0
}

.service-list div {
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
    color: var(--navy);
    font-weight: 800
}

.process {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px
}

.step {
    padding: 24px 20px;
    height: 100%
}

.step:before {
    counter-increment: step;
    content: counter(step);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    font-weight: 900;
    margin-bottom: 14px
}

.step h3 {
    color: var(--navy);
    font-size: 17px;
    margin: 0 0 5px
}

/* News */
.tools {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 11px;
    margin-bottom: 17px
}

.input,
select,
textarea {
    width: 100%;
    border: 1px solid #cbd3df;
    border-radius: 10px;
    padding: 13px 14px;
    background: #fff;
    color: var(--ink);
    outline: none
}

.input:focus,
select:focus,
textarea:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(7, 29, 97, .08)
}

.filters {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 28px
}

.filter {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    border-radius: 999px;
    padding: 9px 15px;
    font-weight: 850
}

.filter.active,
.filter:hover {
    background: var(--navy);
    color: #fff
}

.news-card {
    display: flex;
    flex-direction: column;
    height: 100%
}

.news-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    height: auto
}

.news-card .body {
    padding: 23px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.tag {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase
}

.news-card h3 {
    font: 700 22px/1.27 Georgia, serif;
    color: var(--navy);
    margin: 8px 0 9px
}

.news-card p {
    flex: 1;
    margin-top: 0
}

.meta {
    color: var(--muted);
    font-size: 13px
}

/* Contact */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 30px
}

.contact-card {
    padding: 23px
}

.contact-card strong {
    display: block;
    color: var(--navy);
    margin-bottom: 5px
}

.contact-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 30px;
    align-items: stretch;
}

.form-card {
    padding: 31px
}

.form {
    display: grid;
    gap: 14px
}

.form2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

textarea {
    min-height: 130px;
    resize: vertical
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px
}

.check input {
    margin-top: 5px
}

.honeypot {
    position: absolute !important;
    left: -9999px !important
}

.map {
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow2);
    background: var(--soft)
}

.map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0
}

.map-foot {
    padding: 15px;
    background: #fff;
    border-top: 1px solid var(--line)
}

.newsletter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    background: #fff;
    color: var(--ink);
    border-radius: 20px;
    padding: 29px
}

.newsletter h3 {
    font: 700 28px/1.2 Georgia, serif;
    color: var(--navy);
    margin: 0 0 4px
}

.newsletter p {
    font-size: 16px;
    margin: 0;
}

.newsletter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: start
}

/* Footer */
.footer {
    background: #fff;
    color: var(--ink);
    padding: 55px 0 0;
    border-top: 2px solid var(--navy);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.3fr;
    gap: 40px
}

.footer-nav-col {
    justify-self: center;
}

.footer h4 {
    color: var(--navy);
    margin: 0 0 16px;
    font-size: 20px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.footer-links {
    display: grid;
    gap: 12px
}

.footer-links a {
    color: var(--ink);
    transition: .2s;
    display: inline-block
}

.footer-links a:hover {
    color: var(--navy);
    transform: translateX(5px)
}

.footer-bottom {
    background: var(--navy);
    margin-top: 40px;
    padding: 10px 0;
}

.copy {
    font-size: 14px;
    color: #fff;
}

.floating {
    position: fixed;
    z-index: 900;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 10px
}

.float {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    overflow: hidden;
    text-decoration: none;
    animation: float-pulse 2s infinite
}

.float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.fb {
    background: #1877f2
}

.call {
    background: var(--red)
}

.zalo {
    background: #1675e8
}

.backtotop {
    background: var(--gold);
    color: #fff;
    animation: none
}

@keyframes float-pulse {
    0% {
        box-shadow: 0 10px 24px rgba(0, 0, 0, .22), 0 0 0 0 var(--navy)
    }

    70% {
        box-shadow: 0 10px 24px rgba(0, 0, 0, .22), 0 0 0 15px transparent
    }

    100% {
        box-shadow: 0 10px 24px rgba(0, 0, 0, .22), 0 0 0 0 transparent
    }
}

.toast {
    position: fixed;
    z-index: 1200;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 135px);
    background: var(--navy);
    color: #fff;
    border-radius: 12px;
    padding: 13px 18px;
    box-shadow: var(--shadow);
    transition: .3s;
    max-width: min(92vw, 620px);
    text-align: center
}

.toast.show {
    transform: translate(-50%, 0)
}

/* Single Post Layout */
.single-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

.widget {
    margin-bottom: 30px;
}

.widget-title {
    font: 700 22px/1.27 Georgia, serif;
    color: var(--navy);
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gold);
}

.widget-form.navy {
    background: var(--navy, #071d61);
    color: #fff;
    border: none;
}

.widget-form.navy h3 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 20px;
}

.widget-form.navy p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    font-size: 14px;
}

.widget-form-wrapper .fluentform .ff-el-form-control {
    border: none !important;
    background: #fff !important;
    color: #333 !important;
    border-radius: 6px;
    width: 100% !important;
}

.widget-form-wrapper .fluentform label {
    color: #fff !important;
}

.widget-form-wrapper .fluentform {
    margin-bottom: 0 !important;
}

.widget-form-wrapper .fluentform .ff-btn-submit {
    background-color: var(--red, #e42b31) !important;
    border-color: var(--red, #e42b31) !important;
    color: #fff !important;
    border-radius: 6px;
    font-weight: 600;
    width: 100% !important;
    margin-top: 5px;
}

/* Force form fields to stack vertically */
.widget-form-wrapper .fluentform form,
.widget-form-wrapper .fluentform .ff-t-container {
    display: flex !important;
    flex-direction: column !important;
}

.widget-form-wrapper .fluentform .ff-t-column,
.widget-form-wrapper .fluentform .ff-el-group {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.single-featured-image img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius, 12px);
    margin-bottom: 30px;
    display: block;
}

.single-content img {
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.single-content h2,
.single-content h3 {
    color: var(--navy);
    font-family: Georgia, serif;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.single-content p {
    margin-bottom: 1.5em;
    line-height: 1.7;
}

.single-content ul,
.single-content ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.single-content li {
    margin-bottom: 0.5em;
}

.single-content blockquote {
    border-left: 4px solid var(--gold);
    padding-left: 20px;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--navy);
    font-size: 1.1em;
}

.single-content figure {
    margin-bottom: 1.5em;
}

.single-content a {
    color: var(--red);
    text-decoration: underline;
}

@media(max-width:980px) {
    :root {
        --header: 76px
    }

    .footer-nav-col {
        justify-self: start;
    }

    .desktop-nav {
        display: none
    }

    .mobile-menu {
        display: block
    }

    .brand img {
        height: 58px
    }

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

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

    .single-layout,
    .brand-detail,
    .brand-detail.reverse {
        grid-template-columns: 1fr
    }

    .brand-detail.reverse .brand-scene {
        order: 0
    }

    .brand-detail.reverse .brand-copy {
        order: 1
    }

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

    .contact-layout {
        grid-template-columns: 1fr
    }

    .contact-cards {
        grid-template-columns: 1fr
    }

    .newsletter {
        grid-template-columns: 1fr
    }

    .newsletter-form {
        grid-template-columns: 1fr 1fr auto
    }
}

@media(max-width:720px) {
    .container {
        width: min(100% - 28px, 1180px)
    }

    .section {
        padding: 66px 0
    }

    .section-sm {
        padding: 50px 0
    }

    .grid2,
    .grid3,
    .footer-grid {
        grid-template-columns: 1fr
    }

    .grid4 {
        grid-template-columns: 1fr
    }

    .hero {
        min-height: 700px;
        background-image: linear-gradient(180deg, rgba(2, 14, 52, .95), rgba(5, 30, 89, .72) 55%, rgba(5, 30, 89, .18)), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCI+CjxkZWZzPgogPGxpbmVhckdyYWRpZW50IGlkPSJiZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiMwNjE2NGYiLz48c3RvcCBvZmZzZXQ9Ii41OCIgc3RvcC1jb2xvcj0iIzBiM2I4NiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBiMWI0ZCIvPjwvbGluZWFyR3JhZGllbnQ+CiA8bGluZWFyR3JhZGllbnQgaWQ9ImdsYXNzIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agc3RvcC1jb2xvcj0iI2RmZWVmZiIgc3RvcC1vcGFjaXR5PSIuOSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzVjODdjNCIgc3RvcC1vcGFjaXR5PSIuMyIvPjwvbGluZWFyR3JhZGllbnQ+CiA8bGluZWFyR3JhZGllbnQgaWQ9ImdvbGQiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwIj48c3RvcCBzdG9wLWNvbG9yPSIjZjVlMGE3Ii8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iI2M4YTI0ZCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdkNWQxZCIvPjwvbGluZWFyR3JhZGllbnQ+CiA8ZmlsdGVyIGlkPSJibHVyIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyNiIvPjwvZmlsdGVyPgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgZmlsbD0idXJsKCNiZykiLz4KPGNpcmNsZSBjeD0iMTI2MCIgY3k9IjE3MCIgcj0iMjEwIiBmaWxsPSIjMjg0ZjlhIiBvcGFjaXR5PSIuMjgiIGZpbHRlcj0idXJsKCNibHVyKSIvPgo8Y2lyY2xlIGN4PSIxMDQwIiBjeT0iNTcwIiByPSIyNzAiIGZpbGw9IiMwZTY3YWEiIG9wYWNpdHk9Ii4yIiBmaWx0ZXI9InVybCgjYmx1cikiLz4KPHBhdGggZD0iTTc2MCA3NzBDOTYwIDYxMCAxMTkwIDU4MCAxNjAwIDU3MFY5MDBINTQwWiIgZmlsbD0iIzA3MTMzOSIgb3BhY2l0eT0iLjkiLz4KPHBhdGggZD0iTTg0MCA4NTBDMTAzMCA2NTAgMTI1MCA2NDAgMTYwMCA2NzAiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnb2xkKSIgc3Ryb2tlLXdpZHRoPSI4IiBvcGFjaXR5PSIuOTUiLz4KPGcgb3BhY2l0eT0iLjk0Ij4KIDxyZWN0IHg9Ijg4MCIgeT0iMzMwIiB3aWR0aD0iOTQiIGhlaWdodD0iMzYwIiByeD0iOSIgZmlsbD0idXJsKCNnbGFzcykiLz4KIDxyZWN0IHg9Ijk5MiIgeT0iMjU1IiB3aWR0aD0iMTM1IiBoZWlnaHQ9IjQzNSIgcng9IjEyIiBmaWxsPSJ1cmwoI2dsYXNzKSIvPgogPHJlY3QgeD0iMTE1MCIgeT0iMzc1IiB3aWR0aD0iMTA1IiBoZWlnaHQ9IjMxNSIgcng9IjkiIGZpbGw9InVybCgjZ2xhc3MpIi8+CiA8cmVjdCB4PSIxMjc4IiB5PSIzMDAiIHdpZHRoPSIxNTAiIGhlaWdodD0iMzkwIiByeD0iMTIiIGZpbGw9InVybCgjZ2xhc3MpIi8+CiA8cmVjdCB4PSIxNDUwIiB5PSI0MjAiIHdpZHRoPSIxMTAiIGhlaWdodD0iMjcwIiByeD0iOSIgZmlsbD0idXJsKCNnbGFzcykiLz4KPC9nPgo8ZyBzdHJva2U9IiNkOGU5ZmYiIHN0cm9rZS1vcGFjaXR5PSIuMzYiPgogPHBhdGggZD0iTTkwNSAzNTVWNjYwTTkzMiAzNTVWNjYwTTEwMTkgMjgwVjY2ME0xMDYwIDI4MFY2NjBNMTEwMCAyODBWNjYwTTExNzUgNDAwVjY2ME0xMjE1IDQwMFY2NjBNMTMxMCAzMjVWNjYwTTEzNTAgMzI1VjY2ME0xMzkwIDMyNVY2NjBNMTQ3OCA0NDVWNjYwTTE1MjAgNDQ1VjY2MCIvPgogPHBhdGggZD0iTTg4MCAzOTBIOTc0TTg4MCA0NTBIOTc0TTg4MCA1MTBIOTc0TTg4MCA1NzBIOTc0TTk5MiAzMzBIMTEyN005OTIgNDEwSDExMjdNOTkyIDQ5MEgxMTI3TTk5MiA1NzBIMTEyN00xMjc4IDM2MEgxNDI4TTEyNzggNDUwSDE0MjhNMTI3OCA1NDBIMTQyOCIvPgo8L2c+CjxnIGZpbGw9IiNkNWE2NGIiPgogPGNpcmNsZSBjeD0iOTI1IiBjeT0iNTA1IiByPSI0Ii8+PGNpcmNsZSBjeD0iMTA1NSIgY3k9IjQ0NSIgcj0iNCIvPjxjaXJjbGUgY3g9IjEzNjAiIGN5PSI0MjAiIHI9IjQiLz48Y2lyY2xlIGN4PSIxNTAwIiBjeT0iNTMwIiByPSI0Ii8+CjwvZz4KPHBhdGggZD0iTTAgNzUwQzI2MCA2OTAgNDIwIDczMCA2NTAgNzkwQzkwMCA4NTUgMTE2MCA4NDAgMTYwMCA3MzVWOTAwSDBaIiBmaWxsPSIjMDQxMDMzIi8+CjxwYXRoIGQ9Ik0wIDc5NUMyNzAgNzUwIDUxMCA3OTAgNzIwIDgzNUM5OTAgODkzIDEyNjAgODYwIDE2MDAgNzkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlNzJiMmYiIHN0cm9rZS13aWR0aD0iNCIgb3BhY2l0eT0iLjkiLz4KPHBhdGggZD0iTTAgODE1QzMwMCA3ODAgNTQwIDgyMCA3NjAgODU1QzEwMDAgODk1IDEyOTAgODc1IDE2MDAgODIwIiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGEyNGQiIHN0cm9rZS13aWR0aD0iMyIgb3BhY2l0eT0iLjkiLz4KPC9zdmc+");
        background-position: 64% center
    }

    .hero-content {
        padding: 65px 0 120px
    }

    .hero h1 {
        font-size: clamp(40px, 12vw, 56px)
    }

    .hero p {
        font-size: 17px
    }

    .hero-tags {
        display: none
    }

    .page-hero {
        padding: 80px 0 63px
    }

    .brand-copy {
        padding: 27px
    }

    .brand-scene {
        min-height: 280px
    }

    .service-list {
        grid-template-columns: 1fr
    }

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

    .cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 31px
    }

    .fact {
        grid-template-columns: 1fr;
        gap: 3px
    }

    .tools {
        grid-template-columns: 1fr
    }

    .form2 {
        grid-template-columns: 1fr
    }

    .newsletter-form {
        grid-template-columns: 1fr
    }

    .map iframe {
        height: 340px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    border-radius: 8px;
    padding: 0 15px;
    font-weight: 850;
    transition: .3s;
}

.pagination .page-numbers.current,
.pagination .page-numbers:not(.dots):hover {
    background: var(--navy);
    color: #fff;
}

.pagination .page-numbers.dots {
    border: none;
    background: transparent;
    padding: 0;
    min-width: 20px;
}

/* Fluent Form Styling */
.form-card .fluentform {
    font-family: inherit;
}

.form-card .fluentform .ff-el-group {
    margin-bottom: 20px;
}

.form-card .fluentform .ff-el-input--label {
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 8px;
    font-size: 15px;
}

.form-card .fluentform .ff-el-form-control {
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s;
    background: #fff;
    width: 100%;
    color: #333;
}

.form-card .fluentform .ff-el-form-control:focus {
    border-color: var(--navy);
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 25, 115, 0.1);
}

.form-card .fluentform textarea.ff-el-form-control {
    height: 120px;
    resize: vertical;
}

.map-card {
    padding: 31px;
    display: flex;
    flex-direction: column;
}

.map-card .map {
    flex: 1;
    min-height: 300px;
}

.form-card .fluentform .ff-btn-submit {
    background: var(--navy) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(7, 29, 97, 0.3) !important;
    text-transform: uppercase;
}

.form-card .fluentform .ff-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(7, 29, 97, 0.4) !important;
    filter: brightness(0.85);
}

.form-card .fluentform .ff-el-form-check-label {
    font-size: 14px;
    color: #555;
    margin-left: 8px;
}

.form-card .form-footer-note {
    font-size: 12px;
    color: #888;
    margin-top: 15px;
    line-height: 1.5;
}

/* Custom CSS for Newsletter Fluent Form */
.newsletter .fluentform {
    font-family: inherit;
}

.newsletter .fluentform .ff-el-form-control {
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    height: 48px;
}

.newsletter .fluentform .ff-el-form-control:focus {
    border-color: var(--navy);
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 25, 115, 0.1);
}

.newsletter .fluentform .ff-btn-submit {
    background: var(--navy) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 0 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s;
}

.newsletter .fluentform .ff-btn-submit:hover {
    filter: brightness(0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(2, 25, 115, 0.3) !important;
}

/* Fluent Form Success/Error Messages */
.fluentform .ff-message-success,
.fluentform .ff_message_success {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-top: 15px !important;
    text-align: center;
}

.fluentform .error-text {
    color: var(--red) !important;
    font-size: 13px !important;
    margin-top: 5px !important;
}

.newsletter .fluentform .ff-el-form-check-label {
    font-size: 13px;
    color: #555;
    margin-left: 8px;
}

/* Căn chỉnh header (Search, Langs, Mobile menu) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 1024px) {
    .header-actions {
        margin-left: auto;
    }
}

.header-lang ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-lang img {
    width: 36px;
    height: 26px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.header-search-toggle {
    background: transparent;
    border: none;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--navy);
}

.header-search-toggle svg {
    width: 25px;
    height: 25px;
}

/* Mobile Responsive Fixes for Contact Page & Newsletter */
@media (max-width: 768px) {

    .contact-layout,
    .contact-cards,
    .newsletter,
    .newsletter-form,
    .footer-grid,
    .service-list,
    .process,
    .tools,
    .single-layout,
    .form2 {
        grid-template-columns: 1fr !important;
    }

    .footer-nav-col {
        justify-self: start;
    }
}