/* =========================================================
WIN ASIA GROUP — PREMIUM CORPORATE WEBSITE
site.css
Premium Black / Red / White Corporate Theme
========================================================= */

/* =========================================================
RESET
========================================================= */

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

:root {

/* -------------------------------------------------------
BRAND COLOURS
------------------------------------------------------- */

--black: #080808;
--black-2: #111111;
--black-3: #1a1a1a;

--red-dark: #8f1d1d;
--red: #e53935;
--red-bright: #ff4d4d;
--red-deep: #a91f1f;
--red-light: #ff5a56;
--red-soft: #f4d5d4;

--white: #ffffff;
--cream: #f7f9fb;
--light: #eef3f6;

--line: #dce5eb;
--line-dark: rgba(255, 255, 255, .12);

--text: #17202a;
--text-dark: #101418;

--muted: #627381;
--muted-dark: #465560;
--muted-light: #aebdc8;

--success: #157347;
--error: #b42318;

/* -------------------------------------------------------
COMPATIBILITY VARIABLES
------------------------------------------------------- */

--navy: var(--black);
--navy-2: var(--black-2);
--navy-3: var(--black-3);

--orange: var(--red);
--orange-dark: var(--red-deep);

--blue: var(--red);
--cyan: var(--red);

/* -------------------------------------------------------
SHADOWS
------------------------------------------------------- */

--shadow-sm:
0 8px 25px rgba(8, 8, 8, .06);

--shadow-md:
0 20px 55px rgba(8, 8, 8, .10);

--shadow-lg:
0 30px 80px rgba(8, 8, 8, .16);

/* -------------------------------------------------------
RADIUS
------------------------------------------------------- */

--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 10px;
}

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

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}

body {
margin: 0;

font-family:
Manrope,
Arial,
sans-serif;

color: var(--text);

background: var(--cream);

line-height: 1.65;

overflow-x: hidden;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
font-family:
Manrope,
Arial,
sans-serif;
}

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

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

button,
input,
textarea,
select {
border-radius: 0;
}

button {
cursor: pointer;
}

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

p {
color: var(--muted);
}

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

::selection {
background: var(--red);
color: var(--white);
}

/* =========================================================
ACCESSIBILITY
========================================================= */

:focus-visible {
outline: 2px solid var(--red);
outline-offset: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--red);
outline-offset: 3px;
}

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

.site-header {
position: fixed;

top: 0;
left: 0;
right: 0;

width: 100%;
height: 82px;

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

padding: 0 5vw;

z-index: 1000;

color: var(--white);

background: rgba(8, 8, 8, .88);

border-bottom:
1px solid rgba(255, 255, 255, .08);

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

transition:
height .3s ease,
background .3s ease,
box-shadow .3s ease;
}

.site-header.scrolled {
height: 70px;

background:
rgba(5, 5, 5, .96);

box-shadow:
0 8px 35px rgba(0, 0, 0, .35);
}

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

/*
The actual logo PNG is intentionally NOT edited.

The logo window controls the visible area while the
original image is enlarged slightly inside it.

This helps when the PNG contains extra empty space
around the actual WIN ASIA GROUP artwork.
*/

.brand {
display: inline-flex;

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

width: 255px;
height: 70px;

flex-shrink: 0;

position: relative;

overflow: hidden;

text-decoration: none;

line-height: 0;

color: var(--white);

z-index: 5;
}

/*
IMPORTANT:
This is the actual logo image.

The HTML should use:

/assets/Images/LOGO%20WAG%201-01.png
*/

.brand-logo {
    width: 225px;
    height: 65px;
    transform: scale(1.30);
}

.brand:hover .brand-logo {
transform: scale(1.35);

opacity: .98;

box-shadow:
0 5px 18px rgba(0, 0, 0, .18);
}

/* ---------------------------------------------------------
SCROLLED HEADER LOGO
--------------------------------------------------------- */

.site-header.scrolled .brand {
width: 235px;
height: 60px;
}

.site-header.scrolled .brand-logo {
width: 235px;
height: 60px;

transform: scale(1.30);
}

/* ---------------------------------------------------------
HIDE OLD TEXT BRAND ELEMENTS
--------------------------------------------------------- */

.brand b,
.brand small {
display: none;
}

/*
The old CSS-generated three-bar logo is intentionally
removed. Do NOT add .brand-mark styles back.
*/

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

.main-nav {
display: flex;

align-items: center;

gap: 26px;

font-size: 11px;

font-weight: 800;

letter-spacing: .075em;

text-transform: uppercase;
}

.main-nav > a {
position: relative;

display: inline-flex;

align-items: center;

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

opacity: .92;

transition:
opacity .2s ease,
color .2s ease,
transform .2s ease;
}

.main-nav > a:not(.nav-cta)::after {
content: "";

position: absolute;

left: 0;
right: 0;

bottom: -9px;

height: 1px;

background: var(--red);

transform:
scaleX(0);

transform-origin: center;

transition:
transform .25s ease;
}

.main-nav > a:hover,
.main-nav > a.active {
opacity: 1;

color: var(--red);
}

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

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

.nav-cta {
padding: 12px 18px;

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

border-radius:
var(--radius-sm);

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

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

.nav-cta:hover {
background: var(--red);

border-color: var(--red);

color: var(--white) !important;

transform:
translateY(-2px);
}

/* =========================================================
MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
display: none;

width: 44px;
height: 44px;

background: transparent;

border: 0;

padding: 8px;

margin: 0;

color: var(--white);
}

.menu-toggle span {
display: block;

width: 25px;
height: 2px;

background: var(--white);

margin: 5px 0;

border-radius: 2px;

transition:
transform .25s ease,
opacity .25s ease;
}

.menu-toggle.active span:nth-child(1) {
transform:
translateY(7px)
rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
transform:
translateY(-7px)
rotate(-45deg);
}

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

.hero {
min-height: 100vh;

position: relative;

overflow: hidden;

background: var(--black);

color: var(--white);

display: flex;

align-items: center;

isolation: isolate;
}

.hero-bg {
position: absolute;

inset: 0;

background:
linear-gradient(
90deg,
rgba(8, 8, 8, .97) 0%,
rgba(8, 8, 8, .84) 36%,
rgba(8, 8, 8, .56) 68%,
rgba(8, 8, 8, .40) 100%
),
url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?auto=format&fit=crop&w=2200&q=85')
center / cover;

transform: scale(1.04);

animation:
heroZoom 14s ease-in-out infinite alternate;

will-change: transform;
}

.hero::before {
content: "";

position: absolute;

inset: 0;

z-index: 1;

background:
radial-gradient(
circle at 76% 46%,
rgba(229, 57, 53, .16),
transparent 29%
),
radial-gradient(
circle at 90% 85%,
rgba(198, 40, 40, .10),
transparent 25%
);

pointer-events: none;
}

.hero::after {
content: "";

position: absolute;

inset: auto 0 0;

height: 32%;

z-index: 2;

background:
linear-gradient(
transparent,
rgba(8, 8, 8, .94)
);

pointer-events: none;
}

.hero-content {
position: relative;

z-index: 5;

padding-top: 100px;
padding-bottom: 80px;
}

/* =========================================================
EYEBROW
========================================================= */

.eyebrow {
font-size: 10px;

letter-spacing: .22em;

font-weight: 900;

color: var(--red);

display: flex;

gap: 10px;

align-items: center;

margin-bottom: 22px;

text-transform: uppercase;
}

.eyebrow span {
width: 28px;
height: 1px;

background: var(--red);

display: inline-block;

box-shadow:
0 0 12px rgba(229, 57, 53, .45);
}

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

.hero h1,
.page-hero h1,
.trade-hero h1 {
font-size:
clamp(50px, 7vw, 94px);

line-height: .99;

letter-spacing: -.058em;

margin: 0;

max-width: 900px;

font-weight: 800;
}

.hero h1 em,
.page-hero h1 em,
.trade-hero h1 em,
.trade-band h2 em,
.trade-note h2 em {
font-style: normal;

color: var(--red);
}

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

.hero p {
font-size: 18px;

max-width: 620px;

color: #d6d6d6;

margin: 30px 0;
}

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

.hero-actions {
display: flex;

gap: 12px;

flex-wrap: wrap;
}

.btn {
display: inline-flex;

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

gap: 13px;

padding: 15px 22px;

min-height: 48px;

border-radius: var(--radius-sm);

font-weight: 900;

font-size: 10px;

letter-spacing: .10em;

text-transform: uppercase;

border: 1px solid transparent;

transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease,
border-color .25s ease,
color .25s ease;
}

.btn-primary {
background: var(--red);

color: var(--white);

box-shadow:
0 10px 30px rgba(198, 40, 40, .16);
}

.btn-primary:hover {
transform: translateY(-3px);

background: var(--red-light);

box-shadow:
0 18px 38px rgba(198, 40, 40, .28);
}

.btn-ghost {
border-color:
rgba(255, 255, 255, .32);

color: var(--white);

background:
rgba(255, 255, 255, .025);
}

.btn-ghost:hover {
border-color:
rgba(255, 255, 255, .75);

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

transform: translateY(-3px);
}

.btn-light {
background: var(--white);

color: var(--black);
}

.btn-light:hover {
transform: translateY(-3px);

box-shadow:
0 15px 35px rgba(0, 0, 0, .16);
}

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

.hero-meta {
display: flex;

gap: 0;

margin-top: 68px;

border-top:
1px solid rgba(255, 255, 255, .16);

width: min(650px, 100%);
}

.hero-meta div {
padding: 18px 35px 0 0;

margin-right: 35px;

border-right:
1px solid rgba(255, 255, 255, .13);
}

.hero-meta div:last-child {
border-right: 0;
}

.hero-meta b {
display: block;

font-size: 12px;

letter-spacing: .15em;
}

.hero-meta span {
font-size: 9px;

color: #91a2b2;

letter-spacing: .04em;
}

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

.hero-orbit {
position: absolute;

right: 4%;
top: 27%;

z-index: 3;

width: 370px;
height: 370px;

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

border-radius: 50%;

opacity: .65;

animation:
orbitFloat 8s ease-in-out infinite;

will-change: transform;
}

.hero-orbit::before,
.hero-orbit::after {
content: "";

position: absolute;

border-radius: 50%;

border:
1px solid rgba(229, 57, 53, .22);
}

.hero-orbit::before {
inset: 32px;
}

.hero-orbit::after {
inset: 68px;
}

.orbit-globe {
position: absolute;

inset: 88px;

border-radius: 50%;

display: grid;

place-items: center;

font-size: 145px;

color:
rgba(229, 57, 53, .34);

text-shadow:
0 0 55px rgba(229, 57, 53, .45);
}

/* =========================================================
ORBIT NODES
========================================================= */

.node {
position: absolute;

font-size: 8px;

letter-spacing: .18em;

color: #dce8f1;

white-space: nowrap;
}

.n1 {
left: -24px;
top: 48%;
}

.n2 {
right: -12px;
top: 18%;
}

.n3 {
right: 5px;
bottom: 13%;
}

/* =========================================================
ROUTE GRAPHICS
========================================================= */

.route {
position: absolute;

z-index: 2;

border:
1px solid rgba(229, 57, 53, .30);

border-radius: 50%;

width: 900px;
height: 360px;

transform: rotate(-22deg);

right: -250px;
top: 42%;

animation:
routeDrift 12s ease-in-out infinite alternate;

pointer-events: none;
}

.route-b {
width: 720px;
height: 260px;

transform: rotate(14deg);

top: 54%;
right: -120px;

border-color:
rgba(198, 40, 40, .30);

animation-delay: -3s;
}

.route-c {
width: 1200px;
height: 480px;

transform: rotate(-8deg);

top: 24%;
right: -480px;

border-color:
rgba(255, 255, 255, .10);

animation-delay: -6s;
}

/* =========================================================
SCROLL CUE
========================================================= */

.scroll-cue {
position: absolute;

bottom: 26px;
left: 42px;

font-size: 8px;

letter-spacing: .20em;

z-index: 6;

color: #9eb1c1;

text-transform: uppercase;
}

.scroll-cue span {
margin-left: 12px;

color: var(--red);
}

/* =========================================================
TRUST STRIP
========================================================= */

.trust-strip {
background: var(--black-2);

color: var(--white);

overflow: hidden;

border-top:
1px solid rgba(255, 255, 255, .08);

border-bottom:
1px solid rgba(255, 255, 255, .08);
}

.marquee {
display: flex;

justify-content: center;

min-width: max-content;
}

.marquee span {
padding: 18px 32px;

font-size: 9px;

letter-spacing: .18em;

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

font-weight: 800;
}

.marquee b {
color: var(--red);

margin-left: 28px;
}

/* =========================================================
GENERAL SECTIONS
========================================================= */

.section {
padding: 120px 0;

position: relative;
}

.section-head {
max-width: 760px;

margin-bottom: 55px;
}

.section-head h2,
.quote-cta h2 {
font-size:
clamp(38px, 5vw, 66px);

line-height: 1.04;

letter-spacing: -.048em;

margin: 0 0 18px;

color: var(--black);

font-weight: 800;
}

.section-head p {
max-width: 620px;

font-size: 15px;
}

.two-col {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 90px;

align-items: center;
}

/* =========================================================
ABOUT / VISUAL PANELS
========================================================= */

.about-visual,
.visual-panel {
height: 530px;

position: relative;

background:
linear-gradient(
145deg,
#111111,
#8f1d1d
);

overflow: hidden;

box-shadow: var(--shadow-md);
}

.about-visual::before,
.visual-panel::before {
content: "";

position: absolute;

inset: 0;

background:
url('https://images.unsplash.com/photo-1524522173746-f628baad3644?auto=format&fit=crop&w=1400&q=80')
center / cover;

mix-blend-mode: luminosity;

opacity: .38;

transform: scale(1.03);

transition:
transform .8s ease;
}

.about-visual:hover::before,
.visual-panel:hover::before {
transform: scale(1.08);
}

.about-visual::after,
.visual-panel::after {
content: "";

position: absolute;

inset: 0;

background:
linear-gradient(
180deg,
rgba(8, 8, 8, .05),
rgba(8, 8, 8, .60)
);
}

.visual-grid {
position: absolute;

inset: 0;

z-index: 2;

background-image:
linear-gradient(
rgba(255, 255, 255, .08) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, .08) 1px,
transparent 1px
);

background-size: 48px 48px;

mask-image:
linear-gradient(
90deg,
#000,
transparent
);

-webkit-mask-image:
linear-gradient(
90deg,
#000,
transparent
);
}

.visual-caption {
position: absolute;

z-index: 4;

bottom: 25px;
left: 25px;

color: var(--white);

font-size: 8px;

letter-spacing: .18em;

text-transform: uppercase;
}

.visual-caption b {
color: var(--red);

margin-left: 35px;
}

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

.lead {
font-size: 19px;

color: #344657;

line-height: 1.6;
}

.text-link {
display: inline-flex;

align-items: center;

gap: 9px;

margin-top: 24px;

font-size: 10px;

font-weight: 900;

letter-spacing: .10em;

text-transform: uppercase;

color: var(--red);

transition:
color .2s ease,
gap .2s ease;
}

.text-link:hover {
color: var(--red-deep);

gap: 13px;
}

.quote-line {
border-left:
2px solid var(--red);

padding: 5px 0 5px 22px;

font-size: 14px;

margin-top: 32px;

color: #334454;
}

/* =========================================================
SERVICES
========================================================= */

.service-grid {
display: grid;

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

gap: 15px;
}

.service-card {
position: relative;

background: var(--white);

padding: 28px 24px 25px;

min-height: 310px;

border:
1px solid #e3e9ee;

transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

overflow: hidden;
}

.service-card::after {
content: "";

position: absolute;

width: 150px;
height: 150px;

right: -75px;
top: -75px;

border-radius: 50%;

background:
rgba(198, 40, 40, .045);

transition:
transform .45s ease;
}

.service-card::before {
content: "";

position: absolute;

left: 0;
bottom: 0;

width: 100%;
height: 3px;

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

transform: scaleX(0);

transform-origin: left;

transition:
transform .35s ease;
}

.service-card:hover {
transform: translateY(-8px);

border-color: #d5e0e7;

box-shadow:
var(--shadow-md);
}

.service-card:hover::before {
transform: scaleX(1);
}

.service-card:hover::after {
transform: scale(2.1);
}

.service-no {
position: relative;

z-index: 2;

font-size: 9px;

color: #8a9aa8;

letter-spacing: .14em;
}

.service-icon {
position: relative;

z-index: 2;

font-size: 29px;

color: var(--red);

margin: 35px 0 25px;

transition:
transform .35s ease,
color .35s ease;
}

.service-card:hover .service-icon {
transform: translateY(-3px);

color: var(--red-deep);
}

.service-card h3 {
position: relative;

z-index: 2;

font-size: 18px;

line-height: 1.25;

margin: 0 0 12px;
}

.service-card p {
position: relative;

z-index: 2;

font-size: 11px;

line-height: 1.7;
}

.service-card a {
position: absolute;

z-index: 3;

bottom: 22px;

font-size: 8px;

font-weight: 900;

letter-spacing: .13em;

text-transform: uppercase;

color: var(--red);
}

.service-card a span {
color: var(--red);

transition:
margin-left .2s ease;
}

.service-card a:hover span {
margin-left: 4px;
}

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

.process-section {
background: var(--light);
}

.journey {
display: grid;

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

gap: 18px;

position: relative;
}

.journey-line {
position: absolute;

top: 35px;

left: 10%;
right: 10%;

height: 1px;

background:
linear-gradient(
90deg,
#cbd6df,
var(--red),
var(--red-bright),
#cbd6df
);
}

.journey-step {
position: relative;

z-index: 1;
}

.journey-step b {
width: 70px;
height: 70px;

border:
1px solid #cbd6df;

border-radius: 50%;

background: var(--light);

display: grid;

place-items: center;

font-size: 9px;

color: var(--red);

font-weight: 900;

letter-spacing: .08em;

transition:
background .3s ease,
border-color .3s ease,
color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}

.journey-step:hover b {
background: var(--black);

border-color: var(--black);

color: var(--red);

transform: translateY(-5px);

box-shadow:
0 12px 30px rgba(8, 8, 8, .16);
}

.journey-step strong {
display: block;

margin-top: 25px;

font-size: 13px;

letter-spacing: .10em;
}

.journey-step p {
font-size: 10px;

max-width: 180px;
}

/* =========================================================
DARK / VISION
========================================================= */

.dark-section {
background:
radial-gradient(
circle at 85% 20%,
rgba(198, 40, 40, .20),
transparent 30%
),
var(--black);

color: var(--white);

padding: 110px 0;

position: relative;

overflow: hidden;
}

.dark-section::after {
content: "";

position: absolute;

right: -250px;
bottom: -300px;

width: 650px;
height: 650px;

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

border-radius: 50%;
}

.dark-section .section-head h2 {
color: var(--white);
}

.dark-section .section-head p {
color: #aebdc8;
}

.vision-grid {
display: grid;

grid-template-columns:
1fr 1.3fr;

gap: 100px;

align-items: center;
}

.vision-copy {
font-size:
clamp(25px, 3vw, 42px);

line-height: 1.2;

color: #dce6ed;

letter-spacing: -.025em;
}

/* =========================================================
TRADING
========================================================= */

.trade-band {
background:
linear-gradient(
120deg,
#8f1d1d,
#3b0b0b
);

color: var(--white);

overflow: hidden;

position: relative;
}

.trade-band-inner {
min-height: 520px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 50px;

position: relative;

z-index: 2;
}

.trade-band::after {
content: "";

position: absolute;

right: -120px;
top: 50%;

width: 650px;
height: 650px;

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

border-radius: 50%;

transform:
translateY(-50%);
}

.trade-band::before {
content: "";

position: absolute;

right: 70px;
top: 50%;

width: 430px;
height: 430px;

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

border-radius: 50%;

transform:
translateY(-50%);
}

.trade-band h2 {
font-size:
clamp(48px, 6vw, 78px);

line-height: 1.02;

margin: 0;

letter-spacing: -.055em;
}

.trade-band p {
color: #f1dede;

max-width: 600px;
}

.trade-band .btn {
margin-top: 18px;
}

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

.page-hero {
padding: 190px 0 90px;

background:
radial-gradient(
circle at 80% 20%,
rgba(198, 40, 40, .22),
transparent 32%
),
var(--black);

color: var(--white);

position: relative;

overflow: hidden;
}

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

position: absolute;

right: -180px;
top: -260px;

width: 650px;
height: 650px;

border:
1px solid rgba(229, 57, 53, .18);

border-radius: 50%;
}

.page-hero::after {
content: "";

position: absolute;

right: -80px;
bottom: -280px;

width: 650px;
height: 650px;

border:
1px solid rgba(229, 57, 53, .13);

border-radius: 50%;
}

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

font-size: 17px;

color: #c7d6e1;

position: relative;

z-index: 2;
}

.page-hero.compact {
padding-bottom: 110px;
}

/* =========================================================
SERVICE DETAIL
========================================================= */

.service-hero {
min-height: 580px;
}

.service-detail-visual {
height: 500px;

background: var(--black-2);

position: relative;

overflow: hidden;

box-shadow:
var(--shadow-md);
}

.service-detail-visual::before {
content: "";

position: absolute;

inset: 0;

background:
url('https://images.unsplash.com/photo-1494412685616-a5d310fbb07d?auto=format&fit=crop&w=1400&q=80')
center / cover;

opacity: .45;

transform: scale(1.03);

transition:
transform .8s ease;
}

.service-detail-visual:hover::before {
transform: scale(1.08);
}

.service-detail-visual::after {
content: "";

position: absolute;

inset: 0;

background:
linear-gradient(
180deg,
transparent 35%,
rgba(8, 8, 8, .75)
);
}

.service-detail-visual span {
position: absolute;

z-index: 4;

bottom: 25px;
left: 25px;

color: var(--white);

font-size: 8px;

letter-spacing: .20em;

text-transform: uppercase;
}

.detail-grid {
position: absolute;

inset: 0;

z-index: 2;

background:
linear-gradient(
90deg,
transparent 49.8%,
rgba(255, 255, 255, .18) 50%,
transparent 50.2%
),
linear-gradient(
transparent 49.8%,
rgba(255, 255, 255, .18) 50%,
transparent 50.2%
);

background-size: 60px 60px;
}

.check-list {
display: grid;

gap: 16px;

margin-top: 30px;
}

.check-list span {
padding: 16px 0;

border-bottom:
1px solid #dbe3e9;

font-size: 12px;

color: #697987;
}

.check-list b {
color: var(--text);

margin-left: 20px;
}

/* =========================================================
TRADE PAGE
========================================================= */

.trade-hero {
min-height: 760px;

padding: 190px 0 100px;

background:
radial-gradient(
circle at 75% 50%,
rgba(198, 40, 40, .22),
transparent 34%
),
var(--black);

color: var(--white);

position: relative;

overflow: hidden;
}

.trade-hero p {
max-width: 600px;

font-size: 18px;

color: #cbd8e2;
}

.trade-map {
position: absolute;

right: 6%;
top: 18%;

width: 560px;
height: 560px;

border:
1px solid rgba(229, 57, 53, .24);

border-radius: 50%;

animation:
mapFloat 9s ease-in-out infinite;

will-change: transform;
}

.trade-map::after {
content: "";

position: absolute;

inset: 35px;

border-radius: 50%;

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

.map-ring {
position: absolute;

border:
1px solid rgba(229, 57, 53, .15);

border-radius: 50%;
}

.r1 {
inset: 60px;
}

.r2 {
inset: 150px;
}

.map-node {
position: absolute;

width: 11px;
height: 11px;

background: var(--red);

border-radius: 50%;

box-shadow:
0 0 0 8px rgba(229, 57, 53, .10),
0 0 25px rgba(229, 57, 53, .35);

animation:
nodePulse 2.8s ease-in-out infinite;
}

.map-node.a {
left: 22%;
top: 60%;
}

.map-node.b {
left: 55%;
top: 34%;

animation-delay: .7s;
}

.map-node.c {
right: 17%;
bottom: 23%;

animation-delay: 1.4s;
}

.map-line {
position: absolute;

height: 1px;

background:
linear-gradient(
90deg,
var(--red),
rgba(229, 57, 53, .05)
);

transform-origin: left;

box-shadow:
0 0 12px rgba(229, 57, 53, .20);
}

.l1 {
left: 23%;
top: 61%;

width: 230px;

transform:
rotate(-33deg);
}

.l2 {
left: 56%;
top: 35%;

width: 180px;

transform:
rotate(32deg);
}

.trade-note {
max-width: 800px;
}

.trade-note h2 {
font-size:
clamp(45px, 6vw, 75px);

line-height: 1.03;

letter-spacing: -.05em;
}

.trade-note p {
font-size: 18px;

max-width: 650px;
}

.shipment-flow {
padding: 30px 0;
}

.shipment-flow h2 {
font-size:
clamp(32px, 5vw, 65px);

line-height: 1.15;

color: var(--white);
}

/* =========================================================
COMPANY VALUES
========================================================= */

.values-grid {
display: grid;

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

gap: 15px;
}

.value-card {
background: var(--white);

border:
1px solid #e0e7ec;

padding: 35px;

min-height: 210px;

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

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

border-color: #d2dee6;

box-shadow:
var(--shadow-sm);
}

.value-card span {
font-size: 9px;

color: var(--red);

letter-spacing: .15em;

font-weight: 900;
}

.value-card h3 {
font-size: 18px;

margin: 30px 0 8px;
}

.value-card p {
font-size: 11px;
}

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

.cta-band {
background: #f0f4f6;

padding: 70px 0;

border-top:
1px solid #e2e9ee;

border-bottom:
1px solid #e2e9ee;
}

.cta-band .container {
display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;
}

.cta-band h2 {
font-size: 38px;

margin: 0;

letter-spacing: -.035em;
}

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

.contact-grid,
.quote-grid {
display: grid;

grid-template-columns:
.75fr 1.25fr;

gap: 70px;

align-items: start;
}

.contact-card {
background: var(--white);

border:
1px solid #e1e8ed;

padding: 35px;

margin-bottom: 15px;

transition:
box-shadow .3s ease,
transform .3s ease;
}

.contact-card:hover {
transform: translateY(-3px);

box-shadow:
var(--shadow-sm);
}

.contact-card .eyebrow {
margin-bottom: 18px;
}

.contact-card > a {
display: block;

font-size: 21px;

font-weight: 700;

margin: 9px 0;

color: var(--black-2);

transition:
color .2s ease;
}

.contact-card > a:hover {
color: var(--red-deep);
}

/* =========================================================
FORMS
========================================================= */

.form-card {
background: var(--white);

border:
1px solid #dfe7ec;

padding: 40px;

box-shadow:
0 20px 60px rgba(8, 8, 8, .08);
}

.form-card label {
display: block;

font-size: 9px;

font-weight: 900;

letter-spacing: .08em;

text-transform: uppercase;

margin-bottom: 17px;

color: #566775;
}

.form-card input,
.form-card textarea,
.form-card select {
display: block;

width: 100%;

border:
1px solid #d7e0e6;

background: #fbfcfd;

padding: 14px;

margin-top: 7px;

font: inherit;

font-size: 13px;

outline: 0;

color: var(--text);

transition:
border-color .2s ease,
box-shadow .2s ease,
background .2s ease;
}

.form-card input:hover,
.form-card textarea:hover,
.form-card select:hover {
border-color: #c4d2dc;
}

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
border-color: var(--red);

background: var(--white);

box-shadow:
0 0 0 3px rgba(229, 57, 53, .08);
}

.form-card textarea {
min-height: 130px;

resize: vertical;
}

.form-card input::placeholder,
.form-card textarea::placeholder {
color: #9aa8b2;
}

.form-row {
display: grid;

grid-template-columns:
1fr 1fr;

gap: 15px;
}

.form-result {
margin-top: 16px;

font-size: 12px;
}

.form-result.success {
color: var(--success);
}

.form-result.error {
color: var(--error);
}

.form-card button:disabled {
opacity: .65;

cursor: wait;
}

/* =========================================================
QUOTE PAGE
========================================================= */

.quote-page {
padding: 180px 0 120px;

background:
radial-gradient(
circle at 80% 20%,
rgba(198, 40, 40, .08),
transparent 30%
),
var(--light);
}

.quote-grid > div:first-child {
padding-top: 30px;
}

.quote-grid h1 {
font-size:
clamp(45px, 6vw, 78px);

line-height: 1.02;

letter-spacing: -.05em;

margin: 0;
}

.quote-grid h1 em {
font-style: normal;

color: var(--red);
}

.quote-grid > div > p {
font-size: 17px;

max-width: 540px;
}

.quote-side {
display: flex;

gap: 0;

margin-top: 55px;
}

.quote-side span {
padding: 12px 18px;

border:
1px solid #ccd7df;

font-size: 8px;

letter-spacing: .15em;
}

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

.footer {
background: var(--black);

color: var(--white);

padding: 80px 0 25px;
}

.footer-grid {
display: grid;

grid-template-columns:
1.6fr .8fr 1.2fr 1fr;

gap: 50px;
}

.footer h4 {
font-size: 9px;

letter-spacing: .18em;

color: var(--red);

text-transform: uppercase;

margin: 0 0 20px;
}

.footer-grid > div:not(:first-child) a {
display: block;

color: var(--muted-light);

font-size: 10px;

margin: 10px 0;

transition:
color .2s ease,
padding-left .2s ease;
}

.footer-grid > div:not(:first-child) a:hover {
color: var(--white);

padding-left: 3px;
}

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

color: var(--muted-light);

font-size: 11px;
}

.footer-brand .muted {
opacity: .65;
}

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

margin-top: 55px;

padding-top: 22px;

display: flex;

justify-content: space-between;

color: #718391;

font-size: 8px;

letter-spacing: .08em;
}

/* =========================================================
REVEAL ANIMATION
========================================================= */

.reveal {
transform: translateY(25px);
}

html.js-ready .reveal {
opacity: 0;

transition:
opacity .75s ease,
transform .75s cubic-bezier(.22, .61, .36, 1);
}

html.js-ready .reveal.visible {
opacity: 1;

transform: none;
}

/* =========================================================
ANIMATIONS
========================================================= */

@keyframes heroZoom {

from {
transform: scale(1.04);
}

to {
transform: scale(1.09);
}

}

@keyframes orbitFloat {

0%,
100% {
transform:
translateY(0)
rotate(0deg);
}

50% {
transform:
translateY(-12px)
rotate(2deg);
}

}

@keyframes routeDrift {

from {
transform:
rotate(-22deg)
translate3d(0, 0, 0);
}

to {
transform:
rotate(-19deg)
translate3d(-20px, 8px, 0);
}

}

@keyframes mapFloat {

0%,
100% {
transform:
translateY(0);
}

50% {
transform:
translateY(-12px);
}

}

@keyframes nodePulse {

0%,
100% {
box-shadow:
0 0 0 8px rgba(229, 57, 53, .10),
0 0 25px rgba(229, 57, 53, .25);
}

50% {
box-shadow:
0 0 0 14px rgba(229, 57, 53, .03),
0 0 35px rgba(229, 57, 53, .40);
}

}

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

@media (max-width: 1100px) {

.site-header {
padding:
0 25px;
}

.brand {
width: 225px;
height: 65px;
}

.brand-logo {
width: 225px;
height: 65px;

```
transform:
  scale(1.30);
```

}

.site-header.scrolled .brand {
width: 215px;
height: 57px;
}

.site-header.scrolled .brand-logo {
width: 215px;
height: 57px;

```
transform:
  scale(1.28);
```

}

.main-nav {
gap: 16px;

```
font-size: 10px;
```

}

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

.hero-orbit {
opacity: .28;

```
right: -80px;
```

}

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

.vision-grid {
gap: 50px;
}

.trade-map {
right: -80px;

```
opacity: .55;
```

}

}

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

@media (max-width: 760px) {

html {
scroll-padding-top: 72px;
}

.container {
width:
min(
calc(100% - 32px),
600px
);
}

/* -------------------------------------------------------
HEADER
------------------------------------------------------- */

.site-header {
height: 72px;

```
padding: 0 18px;
```

}

.site-header.scrolled {
height: 66px;
}

.brand {
width: 195px;
height: 56px;

```
max-width:
  calc(100% - 55px);
```

}

.brand-logo {
width: 195px;
height: 56px;

```
transform:
  scale(1.27);
```

}

.site-header.scrolled .brand {
width: 185px;
height: 51px;
}

.site-header.scrolled .brand-logo {
width: 185px;
height: 51px;

```
transform:
  scale(1.25);
```

}

/* -------------------------------------------------------
MOBILE MENU
------------------------------------------------------- */

.menu-toggle {
display: block;

```
flex-shrink: 0;
```

}

.main-nav {
position: absolute;

```
left: 12px;
right: 12px;

top:
  calc(100% - 1px);

background:
  rgba(8, 8, 8, .98);

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

display: none;

flex-direction: column;

align-items: stretch;

gap: 0;

padding: 18px;

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

box-shadow:
  0 20px 50px rgba(0, 0, 0, .35);
```

}

.main-nav.open {
display: flex;
}

.main-nav > a {
padding: 11px 9px;

```
opacity: .9;
```

}

.main-nav > a:not(.nav-cta)::after {
display: none;
}

.main-nav > a:hover,
.main-nav > a.active {
color: var(--red);
}

.nav-cta {
text-align: center;

```
margin-top: 8px;
```

}

/* -------------------------------------------------------
HERO
------------------------------------------------------- */

.hero {
min-height: 760px;
}

.hero-bg {
background:
linear-gradient(
90deg,
rgba(8, 8, 8, .96),
rgba(8, 8, 8, .78)
),
url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?auto=format&fit=crop&w=1400&q=80')
center / cover;
}

.hero-content {
padding-top: 90px;

```
padding-bottom: 70px;
```

}

.hero h1 {
font-size:
clamp(
46px,
14vw,
62px
);

```
max-width: 100%;
```

}

.hero p {
font-size: 15px;

```
margin: 24px 0;
```

}

.hero-actions {
width: 100%;
}

.hero-actions .btn {
width: 100%;
}

.hero-meta {
margin-top: 45px;
}

.hero-meta div {
padding-right: 12px;

```
margin-right: 12px;
```

}

.hero-meta b {
font-size: 10px;
}

.hero-meta span {
font-size: 8px;
}

.hero-orbit {
display: none;
}

.route {
right: -500px;

```
opacity: .45;
```

}

.route-b {
right: -420px;
}

.route-c {
right: -700px;
}

.scroll-cue {
left: 18px;
}

/* -------------------------------------------------------
TRUST STRIP
------------------------------------------------------- */

.marquee {
justify-content: flex-start;
}

.marquee span {
padding: 16px 22px;

```
font-size: 8px;
```

}

.marquee b {
margin-left: 20px;
}

/* -------------------------------------------------------
SECTIONS
------------------------------------------------------- */

.section {
padding: 80px 0;
}

.section-head {
margin-bottom: 38px;
}

.section-head h2,
.quote-cta h2 {
font-size:
clamp(
38px,
12vw,
54px
);
}

.two-col,
.contact-grid,
.quote-grid,
.vision-grid {
grid-template-columns: 1fr;

```
gap: 40px;
```

}

/* -------------------------------------------------------
VISUAL PANELS
------------------------------------------------------- */

.about-visual,
.visual-panel,
.service-detail-visual {
height: 380px;
}

.lead {
font-size: 17px;
}

/* -------------------------------------------------------
SERVICES
------------------------------------------------------- */

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

```
gap: 12px;
```

}

.service-card {
min-height: 290px;
}

/* -------------------------------------------------------
PROCESS
------------------------------------------------------- */

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

```
gap: 30px;
```

}

.journey-line {
left: 35px;

```
top: 35px;
bottom: 35px;

width: 1px;

height: auto;

right: auto;

background:
  linear-gradient(
    180deg,
    #cbd6df,
    var(--red),
    var(--red-bright),
    #cbd6df
  );
```

}

.journey-step {
display: grid;

```
grid-template-columns:
  70px 1fr;

column-gap: 20px;
```

}

.journey-step b {
grid-row: span 2;
}

.journey-step strong {
margin-top: 8px;
}

.journey-step p {
grid-column: 2;

```
margin: 0;
```

}

/* -------------------------------------------------------
TRADING
------------------------------------------------------- */

.trade-band-inner,
.cta-band .container {
display: block;

```
padding-top: 80px;

padding-bottom: 80px;
```

}

.trade-band h2 {
font-size:
clamp(
46px,
13vw,
66px
);
}

.trade-band .btn {
margin-top: 30px;
}

.trade-band::after {
right: -330px;

```
width: 600px;
height: 600px;
```

}

.trade-band::before {
right: -220px;
}

/* -------------------------------------------------------
TRADE PAGE
------------------------------------------------------- */

.trade-map {
width: 500px;
height: 500px;

```
right: -250px;
top: 30%;

opacity: .25;
```

}

.trade-hero {
min-height: 720px;

```
padding-top: 150px;
```

}

.trade-hero h1 {
font-size:
clamp(
48px,
13vw,
66px
);
}

.trade-hero p {
font-size: 15px;
}

/* -------------------------------------------------------
VALUES
------------------------------------------------------- */

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

.value-card {
min-height: 190px;
}

/* -------------------------------------------------------
FORMS
------------------------------------------------------- */

.form-row {
grid-template-columns: 1fr;
}

.form-card {
padding: 25px;
}

.contact-card {
padding: 27px;
}

/* -------------------------------------------------------
FOOTER
------------------------------------------------------- */

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

```
gap: 35px;
```

}

.footer-brand {
grid-column: 1 / -1;
}

.footer-bottom {
display: block;
}

.footer-bottom span {
display: block;

```
margin: 7px 0;
```

}

/* -------------------------------------------------------
PAGE HERO
------------------------------------------------------- */

.page-hero {
padding-top: 150px;
}

.page-hero h1 {
font-size:
clamp(
48px,
13vw,
65px
);
}

/* -------------------------------------------------------
QUOTE PAGE
------------------------------------------------------- */

.quote-page {
padding-top: 145px;
}

.quote-grid h1 {
font-size:
clamp(
46px,
13vw,
68px
);
}

.quote-side {
flex-wrap: wrap;
}

.quote-side span {
flex: 1 1 45%;
}

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

.cta-band h2 {
font-size: 32px;

```
margin-bottom: 25px;
```

}

.cta-band .btn {
width: 100%;
}

}

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

@media (max-width: 480px) {

.brand {
width: 180px;
height: 50px;
}

.brand-logo {
width: 180px;
height: 50px;

```
transform:
  scale(1.24);
```

}

.site-header.scrolled .brand {
width: 170px;
height: 46px;
}

.site-header.scrolled .brand-logo {
width: 170px;
height: 46px;

```
transform:
  scale(1.22);
```

}

}

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

@media (max-width: 420px) {

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

.site-header {
padding:
0 13px;
}

.brand {
width: 165px;
height: 46px;
}

.brand-logo {
    width: 225px;
    height: 65px;
    transform: scale(1.30);
}

.site-header.scrolled .brand {
width: 155px;
height: 43px;
}

.site-header.scrolled .brand-logo {
width: 155px;
height: 43px;

```
transform:
  scale(1.19);
```

}

.hero {
min-height: 720px;
}

.hero h1 {
font-size: 44px;
}

.hero-meta {
display: grid;

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

}

.hero-meta div {
padding-right: 8px;

```
margin-right: 8px;
```

}

.hero-meta b {
font-size: 9px;
}

.hero-meta span {
font-size: 7px;
}

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

.footer-brand {
grid-column: auto;
}

.quote-side span {
flex: 1 1 100%;
}

}

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

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

html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration:
.01ms !important;

```
animation-iteration-count:
  1 !important;

transition-duration:
  .01ms !important;
```

}

html.js-ready .reveal,
html.js-ready .reveal.visible {
opacity: 1;

```
transform: none;

transition: none;
```

}

.btn,
.service-card,
.value-card,
.journey-step b {
transition: none;
}

}

/* =========================================================
PRINT
========================================================= */

@media print {

.site-header,
.menu-toggle,
.hero-orbit,
.route,
.scroll-cue,
.trade-map {
display: none !important;
}

body {
background: #ffffff;

```
color: #000000;
```

}

.hero,
.dark-section,
.trade-band,
.trade-hero,
.page-hero {
background: #ffffff !important;

```
color: #000000 !important;
```

}

.hero h1,
.page-hero h1,
.trade-hero h1,
.section-head h2 {
color: #000000 !important;
}

.hero p,
.page-hero p,
.trade-hero p {
color: #333333 !important;
}

}

/* =========================================================
WIN ASIA GROUP — FINAL CAPABILITY CARD CORRECTIONS
Hide card numbers and preserve the image-led design
========================================================= */

.capabilities-grid .service-no {
display: none !important;
}

/* Keep service images visible and correctly sized */
.capabilities-grid .capability-image-link {
position: relative;
display: block;
flex: 0 0 220px;
width: 100%;
height: 220px;
overflow: hidden;
background: #252525;
}

.capabilities-grid .capability-image-link img.capability-image {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: cover;
object-position: center;
opacity: 1;
visibility: visible;
}

/* Responsive layout */
@media (max-width: 1100px) {
.capabilities-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 600px) {
.capabilities-grid {
grid-template-columns: minmax(0, 1fr);
}

```
.capabilities-grid .capability-image-link {
    flex-basis: 230px;
    height: 230px;
}
```

}

/* =========================================================
   WIN ASIA GROUP — HEADER COLOUR UPDATE ONLY
   Original logo position, dimensions, spacing, and behaviour
   remain controlled by the existing stylesheet.
   ========================================================= */

.site-header,
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    color: #111111;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Keep the original logo visible and in its original position. */
.site-header .brand {
    display: inline-flex;
    color: #111111;
}

.site-header .brand-logo {
    display: block;
}

/* Black navigation labels; retain the existing hover effect. */
.site-header .main-nav > a {
    color: #111111;
}

.site-header .main-nav > a:hover,
.site-header .main-nav > a.active,
.site-header .main-nav > a:focus-visible {
    color: var(--red);
}

/* Keep the quote button's existing shape and spacing, recoloured for contrast. */
.site-header .main-nav > a.nav-cta {
    color: #111111;
    background: rgba(0, 0, 0, 0.035);
    border-color: rgba(0, 0, 0, 0.22);
}

.site-header .main-nav > a.nav-cta:hover,
.site-header .main-nav > a.nav-cta:focus-visible {
    color: #ffffff !important;
    background: var(--red);
    border-color: var(--red);
}

/* Black hamburger lines on the white header. */
.site-header .menu-toggle {
    color: #111111;
}

.site-header .menu-toggle span {
    background: #111111;
}

/* Keep the existing mobile-menu layout; only recolour it. */
@media (max-width: 760px) {
    .site-header .main-nav {
        background: #ffffff;
        border-top-color: rgba(0, 0, 0, 0.10);
    }

    .site-header .main-nav > a {
        color: #111111;
        border-bottom-color: #eeeeee;
    }

    .site-header .main-nav > a:hover,
    .site-header .main-nav > a.active {
        color: var(--red);
        background: #f8f8f8;
    }

    .site-header .main-nav > a.nav-cta {
        background: #111111;
        color: #ffffff !important;
        border-color: #111111;
    }

    .site-header .main-nav > a.nav-cta:hover {
        background: var(--red);
        color: #ffffff !important;
        border-color: var(--red);
    }
}


/* =========================================================
   WIN ASIA GROUP — HEADER LOGO + COMPANY NAME FIX
   Keeps the existing header/navigation layout and behaviour.
   The full logo is shown without stretching or cropping.
   ========================================================= */

.site-header,
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #111111;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.06);
}

.site-header .brand,
.site-header.scrolled .brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 330px;
    max-width: 38vw;
    height: 70px;
    overflow: visible;
    flex: 0 0 auto;
    color: #111111;
    line-height: 1.15;
    text-decoration: none;
}

.site-header .brand-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 62px;
    flex: 0 0 92px;
    overflow: hidden;
}

.site-header .brand-logo,
.site-header.scrolled .brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
    opacity: 1;
}

.site-header .brand:hover .brand-logo {
    transform: none !important;
    opacity: 1;
}

.site-header .brand-company-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    white-space: nowrap;
    line-height: 1.12;
    color: #111111;
}

.site-header .brand-company-name strong {
    display: block;
    margin: 0;
    color: #111111;
    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 800;
    letter-spacing: -0.045em;
}

.site-header .brand-company-name small {
    display: block;
    margin: 0;
    color: #333333;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.site-header .main-nav > a {
    color: #171717;
}

.site-header .main-nav > a:hover,
.site-header .main-nav > a.active,
.site-header .main-nav > a:focus-visible {
    color: var(--red);
}

.site-header .main-nav > a.nav-cta {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
}

.site-header .main-nav > a.nav-cta:hover,
.site-header .main-nav > a.nav-cta:focus-visible {
    color: #ffffff !important;
    background: var(--red-deep);
    border-color: var(--red-deep);
}

.site-header .menu-toggle span {
    background: #171717;
}

@media (max-width: 1100px) {
    .site-header .brand,
    .site-header.scrolled .brand {
        width: 280px;
        max-width: 32vw;
        gap: 9px;
    }

    .site-header .brand-logo-wrap {
        width: 78px;
        flex-basis: 78px;
        height: 56px;
    }

    .site-header .brand-company-name strong {
        font-size: 16px;
    }

    .site-header .brand-company-name small {
        font-size: 9px;
    }
}

@media (max-width: 760px) {
    .site-header,
    .site-header.scrolled {
        height: 72px;
        padding: 0 16px;
    }

    .site-header .brand,
    .site-header.scrolled .brand {
        width: auto;
        max-width: calc(100% - 60px);
        height: 62px;
        gap: 8px;
    }

    .site-header .brand-logo-wrap {
        width: 68px;
        height: 52px;
        flex-basis: 68px;
    }

    .site-header .brand-company-name strong {
        font-size: 15px;
        letter-spacing: -0.035em;
    }

    .site-header .brand-company-name small {
        font-size: 8px;
        letter-spacing: 0.16em;
    }

    .site-header .main-nav {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.10);
        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.14);
    }

    .site-header .main-nav > a {
        color: #171717;
        border-bottom-color: #eeeeee;
    }

    .site-header .main-nav > a:hover,
    .site-header .main-nav > a.active {
        color: var(--red);
        background: #f8f8f8;
    }

    .site-header .main-nav > a.nav-cta {
        background: var(--red);
        color: #ffffff !important;
        border-color: var(--red);
    }
}

@media (max-width: 360px) {
    .site-header .brand-logo-wrap {
        width: 58px;
        flex-basis: 58px;
    }

    .site-header .brand-company-name strong {
        font-size: 13px;
    }
}