/* ═══════════════════════════════════════════════════════
   KIA × FIFA — Stylesheet
   ═══════════════════════════════════════════════════════ */

/* ─── FONTS ────────────────────────────────────────────── */
@font-face {
    font-family: 'Kia Signature';
    src: url('./assets/fonts/KiaSignatureOTFLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Kia Signature';
    src: url('./assets/fonts/KiaSignatureOTFRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Kia Signature';
    src: url('./assets/fonts/KiaSignatureOTFBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* ─── BASE ─────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { font-size: 16px; scroll-behavior: smooth }
body { font-family: 'Kia Signature', sans-serif; background: #fff; color: #1a1a1a; overflow-x: hidden }
img, video { display: block; max-width: 100% }
a { text-decoration: none; color: inherit }
::-webkit-scrollbar { width: 3px }
::-webkit-scrollbar-thumb { background: #1a1a1a }

/* ─── NAV ──────────────────────────────────────────────── */
#nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 500;
    height: 64px; display: flex; align-items: center;
    justify-content: space-between; padding: 0 40px;
    background: transparent; transition: background .3s, box-shadow .3s;
}
#nav.solid { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08) }
#nav.solid .nav-link { color: #1a1a1a }
#nav.solid .nav-logo img.nav-logo--black { display: block }
#nav.solid .nav-logo img.nav-logo--white { display: none }
.nav-logo { width: 100px; height: auto }
.nav-logo img { width: 100%; height: auto; display: block }
.nav-logo img.nav-logo--black { display: none }
.nav-center { display: flex; gap: 40px }
.nav-link { font-size: .88rem; letter-spacing: .02em; color: #fff; position: relative; padding: 4px 0; transition: color .3s }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .3s }
.nav-link:hover::after { transform: scaleX(1) }
.nav-right { display: flex; align-items: center; gap: 24px }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    display: block; width: 22px; height: 2px; background: #fff;
    position: relative; transition: background .3s, transform .3s, opacity .3s
}
.nav-toggle span::before,
.nav-toggle span::after { content: ''; position: absolute; transition: transform .3s, opacity .3s }
.nav-toggle span::before { top: -6px }
.nav-toggle span::after  { top:  6px }
/* Hamburger → X when open */
#nav.open .nav-toggle span { background: transparent }
#nav.open .nav-toggle span::before { transform: translateY(6px)  rotate(45deg);  background: #1a1a1a }
#nav.open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); background: #1a1a1a }
#nav.solid .nav-toggle span,
#nav.solid .nav-toggle span::before,
#nav.solid .nav-toggle span::after { background: #1a1a1a }

/* ─── HERO ─────────────────────────────────────────────── */
#hero {
    position: relative; height: 100vh; min-height: 640px;
    overflow: hidden; display: flex; align-items: flex-start;
}
#hero-video, #hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
#hero-img { display: none }
.hero-grad {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.4) 100%);
}
.hero-text { position: relative; z-index: 2; padding: 160px 60px 0 }
.hero-eyebrow {
    font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.85); margin-bottom: 12px;
    opacity: 0; transform: translateY(20px); animation: fadeUp .6s .3s forwards;
}
.hero-h1 {
    font-size: clamp(4rem, 8vw, 7.5rem); font-weight: 700; line-height: .95;
    letter-spacing: -.03em; color: #fff; margin-bottom: 18px;
    opacity: 0; transform: translateY(28px); animation: fadeUp .7s .5s forwards;
}
.hero-tagline {
    font-size: clamp(.9rem, 1.3vw, 1.05rem); color: rgba(255,255,255,.9); font-weight: 400;
    opacity: 0; transform: translateY(16px); animation: fadeUp .6s .7s forwards;
}

/* ─── WHY KIA ──────────────────────────────────────────── */
#why {
    position: relative; min-height: 700px; overflow: hidden; width: 100%;
    background: url('./assets/web/01-kv/fifa-hero-pc.webp') center center / cover no-repeat;
}
#why::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.8) 100%);
    pointer-events: none;
}
.why {
    position: relative; z-index: 2; width: 100%; max-width: 1360px; margin: 0 auto;
    min-height: 700px; display: grid; grid-template-columns: minmax(300px,500px) minmax(400px,1fr);
    gap: 60px; align-items: center; padding: 0 60px;
}
.why-label { display: inline-flex; margin-bottom: 22px; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75) }
.why-h2 { font-size: clamp(2.4rem,4vw,4.4rem); font-weight: 700; color: #fff; margin-bottom: 24px; line-height: 1.05 }
.why-body { font-size: clamp(1rem,1.1vw,1.05rem); color: rgba(255,255,255,.92); line-height: 1.95 }
.why-body p + p { margin-top: 1.3rem }
.why-right { position: relative; display: flex; align-items: center; justify-content: center }
.why-right-inner { position: relative; z-index: 2; max-width: 540px; padding: 60px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 20px }

/* ─── POWER BLOCK ───────────────────────────────────────── */
#power {
    position: relative; height: 100vh; min-height: 700px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #040506;
}
#power .power-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: url('./assets/web/01-kv/fifa-hero-pc.webp') center/cover no-repeat;
    filter: blur(18px) brightness(.55); transform: scale(1.05);
}
#power .power-dark-layer { position: absolute; inset: 0; background: rgba(0,0,0,.7); opacity: 0; transition: opacity .8s ease }
#power.visible .power-dark-layer { opacity: 1 }
.power-content {
    position: relative; z-index: 2; max-width: 760px; padding: 60px; text-align: center;
    opacity: 0; transform: translateY(60px);
    transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
}
#power.visible .power-content { opacity: 1; transform: translateY(0) }
.power-h2 { font-size: clamp(2rem,4.5vw,3.5rem); font-weight: 700; color: #fff; margin-bottom: 32px; line-height: 1.15; letter-spacing: -.01em }
.power-body { font-size: clamp(.95rem,1.2vw,1.08rem); color: rgba(255,255,255,.9); line-height: 1.95; font-weight: 400 }
.power-body p + p { margin-top: 1.6rem }

/* ─── PINNED KIA × FIFA PANELS ──────────────────────────── */
.kia-scroll-driver { height: 300vh; position: relative }
.kia-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden }
.kia-bg { position: absolute; inset: 0; background-image: url('./assets/web/01-kv/fifa-hero-pc.webp'); background-size: cover; background-position: center; z-index: 0 }
.kia-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.72) }
.kia-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .6s ease; will-change: opacity }
.kia-panel.active { opacity: 1; pointer-events: auto }
.panel-quote { text-align: center; padding: 0 40px; max-width: 900px }
.panel-quote__headline { font-size: clamp(22px,3vw,36px); font-weight: 600; color: #fff; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 28px }
.panel-quote__body { font-size: clamp(14px,1.5vw,18px); color: rgba(255,255,255,.65); line-height: 1.9 }
.panel-why { width: 100%; max-width: 1200px; padding: 0 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center }
.panel-why__title { font-size: clamp(28px,3.5vw,46px); font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 0 }
.panel-why__body { font-size: clamp(14px,1.3vw,17px); color: rgba(255,255,255,.7); line-height: 1.9 }
.panel-why__body p + p { margin-top: 1.2rem }
.panel-logos { display: flex; flex-direction: column; align-items: center; gap: 24px }
.panel-logos__row { display: flex; align-items: center; justify-content: center }
.panel-logos__kia { width: auto }
.panel-logos__kia img { height: 100%; width: auto; display: block }
.kia-dots { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 100 }
.kia-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s, transform .3s }
.kia-dot.active { background: #fff; transform: scale(1.4) }

/* ─── JOURNEY SECTION ────────────────────────────────────── */
.journey-section { padding: 80px 24px; background: #000 }
.journey-card { position: relative; overflow: hidden; border-radius: 28px; min-height: 900px }
.journey-bg { position: absolute; inset: 0 }
.journey-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.03) }
.journey-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.45) 28%, rgba(255,255,255,.05) 60%, rgba(255,255,255,0) 100%);
}
.journey-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; padding: 110px 90px }
.journey-text { max-width: 520px }
.journey-text h2 { font-size: 48px; line-height: 1.08; font-weight: 500; color: #111; letter-spacing: -0.04em; margin-bottom: 28px }
.journey-text p { font-size: 16px; line-height: 1.85; color: #000; font-weight: 400; max-width: 640px }
.journey-gallery { overflow: hidden; width: calc(100% + 180px); margin-left: -90px; margin-right: -90px; padding: 20px 90px }
.journey-marquee-track { display: flex; align-items: center; gap: 24px; animation: journeyMarquee 32s linear infinite }
.journey-marquee-track:hover { animation-play-state: paused }
.gallery-item { position: relative; flex: 0 0 auto; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.18); transition: transform .35s ease }
.gallery-item img { width: 100%; height: 100%; object-fit: cover }
.gallery-item:hover { transform: translateY(-8px) }
.item-1 { width: 420px; height: 340px }
.item-2 { width: 320px; height: 300px }
.item-3 { width: 240px; height: 380px }
.item-4 { width: 500px; height: 340px }
.item-5 { width: 280px; height: 320px }
.item-6 { width: 360px; height: 300px }

/* ─── INSPIRING MOMENTS ──────────────────────────────────── */
.moments-section { background: #f3f3f3; padding: 140px 48px }
.moments-container { max-width: 1440px; margin: 0 auto }
.moments-header { margin-bottom: 110px }
.moments-header h2 { font-size: 72px; line-height: 1; letter-spacing: -0.06em; font-weight: 500; color: #111 }
.moments-block { margin-bottom: 110px; padding-right: 32% }
.moments-block:first-of-type { padding-left: 0; padding-right: 32% }
.moments-block.second-block { padding-left: 32%; padding-right: 0 }
.block-heading { margin-bottom: 60px; max-width: 560px }
.block-heading h3 { font-size: 42px; line-height: 1.1; letter-spacing: -0.04em; font-weight: 500; color: #111; margin-bottom: 24px }
.block-heading p { font-size: 18px; line-height: 1.9; color: #5d636d }
.moments-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px }
.moments-block:first-of-type .moments-grid { display: grid; grid-template-columns: repeat(2,1fr); max-width: none }
.moment-card { transition: transform .7s cubic-bezier(.22,1,.36,1) }
.moment-card:hover { transform: translateY(-8px) }
.moment-image { border-radius: 22px; overflow: hidden; margin-bottom: 28px; background: #ddd }
.moment-image img { width: 100%; height: 400px; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1) }
.moment-card:hover img { transform: scale(1.04) }
.moment-content h4 { font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -0.03em; color: #111; margin-bottom: 12px }
.moment-content p { font-size: 15px; line-height: 1.9; color: #5d636d; max-width: 92% }
.moments-divider { width: 100%; height: 1px; background: #d8d8d8; margin: 0 0 110px }

/* ─── TOURNAMENTS CAROUSEL ───────────────────────────────── */
#tournaments {
    width: 100%; background: #fff; position: relative;
    padding: 5rem 0 6rem; overflow: hidden;
}
.tournaments-card { width: min(100%,1100px); max-width: 1100px; margin: 0 auto; padding: 0 2rem; text-align: center }
.tc-title { font-size: clamp(1.5rem, 5vw, 3.8rem); font-weight: 550; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 1.5rem; color: #111 }
.tc-desc { font-size: clamp(.85rem, 2.2vw, 1rem); line-height: 1.6; color: #2c2c2c; max-width: 700px; margin: 0 auto 3.2rem; font-weight: 400 }

/* Owl customisation */
.owl-carousel .logo-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px; filter: grayscale(.5) brightness(.95); opacity: .55;
    transform: scale(.85); transition: all .4s ease; cursor: pointer;
}
.owl-carousel .logo-card.owl-active-center {
    filter: grayscale(0) brightness(1); opacity: 1; transform: scale(1.2);
}
.logo-img { width: 100%; display: flex; justify-content: center; align-items: center }
.logo-img img { max-width: 160px; max-height: 120px; width: auto; height: auto; object-fit: contain }

/* Owl nav arrows — hidden */
.owl-nav { display: none !important }

/* Owl dots */
.owl-dots { margin-top: 16px; display: flex; justify-content: center; gap: 6px }
.owl-dot { display: flex !important; align-items: center }
.owl-dot span {
    background: #ccc !important; width: 6px !important; height: 6px !important;
    border-radius: 50% !important; transition: background .25s, width .25s !important;
    margin: 0 !important;
}
.owl-dot.active span { background: #111 !important; width: 20px !important; border-radius: 4px !important }

.label-wrapper { display: flex; justify-content: center; margin-top: 1rem }
.active-label {
    font-size: clamp(14px, 3.5vw, 20px); font-weight: 600; letter-spacing: -.2px;
    background: transparent; color: #111; padding: .3rem .6rem;
    border: none; display: inline-block; border-radius: 999px;
}

/* ─── OMBC ───────────────────────────────────────────────── */
#ombc { background: #f5f5f5; padding: 0 40px 80px }
.ombc-card { background: #2a2a2a; border-radius: 20px; max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; overflow: hidden }
.ombc-left { padding: 70px 60px; display: flex; flex-direction: column; justify-content: center }
.ombc-cat { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 10px }
.ombc-h2 { font-size: clamp(1.5rem,2.5vw,2.2rem); font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.15 }
.ombc-body { font-size: .88rem; color: rgba(255,255,255,.58); line-height: 1.85; margin-bottom: 32px; max-width: 420px }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1.5px solid rgba(255,255,255,.3); color: #fff;
    font-size: .82rem; letter-spacing: .08em; padding: 12px 28px; border-radius: 6px;
    transition: background .25s, border-color .25s, gap .25s; width: fit-content;
}
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); gap: 16px }
.ombc-right { overflow: hidden }
.ombc-right img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .7s }
.ombc-card:hover .ombc-right img { transform: scale(1.04) }

/* ─── OUTRO ─────────────────────────────────────────────── */
#outro { position: relative; min-height: 100vh; display: flex; align-items: flex-start; overflow: hidden }
.outro-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40% }
.outro-content { position: relative; z-index: 2; padding: 80px 60px; max-width: 620px }
.outro-quote { font-size: clamp(.9rem,1.3vw,1.05rem); color: rgba(255,255,255,.8); line-height: 1.85; margin-bottom: 28px }
.outro-big { font-size: clamp(1.4rem,2.5vw,2.2rem); font-weight: 700; color: #fff; line-height: 1.2 }

/* ─── RELATED ────────────────────────────────────────────── */
#related { background: #000; padding: 30px }
.rel-inner { max-width: 1360px; margin: 0 auto; background: #1f1f1f; border-radius: 20px; padding: 100px 70px }
.rel-label { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 30px }
.rel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px }
.rel-card { display: block; border-radius: 10px; overflow: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1) }
.rel-card:hover { transform: translateY(-6px) }
.rel-card-img { height: 220px; overflow: hidden }
.rel-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .4s; filter: brightness(.85) }
.rel-card:hover .rel-card-img img { transform: scale(1.05); filter: brightness(1) }
.rel-card-body { padding: 18px 4px 8px }
.rel-card-cat { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px }
.rel-card-title { font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.45 }

/* ─── FOOTER ─────────────────────────────────────────────── */
footer { background: #000; padding: 60px 60px 40px; color: rgba(255,255,255,.5) }
.footer-inner { max-width: 1360px; margin: 0 auto }
.footer-top { display: grid; grid-template-columns: 1fr repeat(4,auto); gap: 60px; margin-bottom: 50px }
.footer-logo { width: 70px }
.footer-col-title { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 18px }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px }
.footer-links a { font-size: .88rem; color: rgba(255,255,255,.7); transition: color .2s }
.footer-links a:hover { color: #fff }
.footer-divider { height: 1px; background: rgba(255,255,255,.1); margin-bottom: 28px }
.footer-bottom { display: flex; align-items: center; gap: 20px; flex-wrap: wrap }
.footer-social { display: flex; gap: 12px }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; transition: border-color .2s }
.footer-social a:hover { border-color: rgba(255,255,255,.6) }
.footer-social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.7) }
.footer-legal { font-size: .72rem; color: rgba(255,255,255,.3); line-height: 1.6; margin-top: 24px }

/* ─── SCROLL REVEAL ─────────────────────────────────────── */
.r  { opacity: 0; transform: translateY(36px);  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1) }
.rl { opacity: 0; transform: translateX(-36px); transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1) }
.rr { opacity: 0; transform: translateX(36px);  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1) }
.r.on, .rl.on, .rr.on { opacity: 1; transform: translate(0) }
.d1 { transition-delay: .1s }
.d2 { transition-delay: .2s }
.d3 { transition-delay: .3s }
.d4 { transition-delay: .4s }

/* ─── KEYFRAMES ─────────────────────────────────────────── */
@keyframes fadeUp        { to { opacity: 1; transform: translateY(0) } }
@keyframes journeyMarquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }

/* ─── SCROLL TO TOP ──────────────────────────────────────── */
#top-btn {
    position: fixed; bottom: 28px; right: 28px; z-index: 400;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2); display: flex;
    align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: opacity .3s, background .2s;
}
#top-btn.show { opacity: 1 }
#top-btn:hover { background: rgba(0,0,0,.7) }
#top-btn svg { fill: #fff; width: 18px }

/* ─── RESPONSIVE — 1200px ────────────────────────────────── */
@media (max-width: 1200px) {
    .journey-content { padding: 80px 60px }
    .journey-gallery { width: calc(100% + 120px); margin-left: -60px; margin-right: -60px; padding: 20px 60px }
    .moments-header h2 { font-size: 56px }
    .block-heading h3 { font-size: 34px }
    .moment-image img { height: 580px }
}

/* ─── RESPONSIVE — 900px ─────────────────────────────────── */
@media (max-width: 900px) {
    #nav { padding: 0 16px; height: 56px }
    .nav-center { display: none }
    .nav-toggle { display: block }
    #nav.open .nav-center {
        display: flex; flex-direction: column; position: absolute;
        top: 56px; left: 0; right: 0; background: #fff;
        padding: 20px 24px; gap: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.1);
    }
    #nav.open .nav-link { color: #1a1a1a }
    .hero-h1 { font-size: clamp(2.4rem,8vw,5rem) }
    #hero { min-height: 56vh }
    .hero-text { padding: 100px 20px 0 }
    .why { grid-template-columns: 1fr; gap: 24px; padding: 0 24px; min-height: auto }
    .why-right-inner { padding: 24px }
    #power { min-height: 56vh }
    .power-content { padding: 30px; max-width: 520px }
    .panel-why { padding: 0 20px; grid-template-columns: 1fr }
    .kia-dots { right: 12px }
    .journey-section { padding: 20px }
    .journey-card { min-height: auto; border-radius: 18px }
    .journey-content { padding: 60px 30px }
    .journey-text h2 { font-size: 42px }
    .journey-gallery { width: calc(100% + 60px); margin-left: -30px; margin-right: -30px; padding: 20px 30px }
    .gallery-item { min-width: 220px }
    .item-1 { width: 320px; height: 240px }
    .item-2 { width: 280px; height: 240px }
    .item-3 { width: 220px; height: 260px }
    .item-4 { width: 340px; height: 260px }
    .item-5 { width: 240px; height: 240px }
    .item-6 { width: 280px; height: 240px }
    .moments-section { padding: 50px 16px 24px }
    .moments-container { max-width: 100% }
    .moments-block { padding-left: 0 !important; padding-right: 0 !important }
    .moments-block.second-block { padding-left: 0 !important; padding-right: 0 !important }
    .block-heading h3 { font-size: 26px }
    .block-heading p { font-size: 15px }
    .moments-grid { gap: 18px }
    .moment-image img { height: auto }
    .moment-content h4 { font-size: 20px }
    .moment-content p { font-size: 14px }
    .ombc-card { grid-template-columns: 1fr }
    .ombc-left { padding: 40px 24px }
    .ombc-h2 { font-size: 1.4rem }
    .ombc-body { font-size: .95rem; max-width: 100% }
    .ombc-right img { height: auto }
    .journey-bg { background-image: url('./assets/mobile/03.\ History/03_1.jpg'); background-size: cover; background-position: center }
    .journey-bg img { display: none }
    .panel-logos__kia { height: 60px; max-width: 100% }
    .rel-grid { grid-template-columns: 1fr }
    .rel-inner { padding: 40px 12px }
    footer { padding: 40px 20px }
    .footer-top { grid-template-columns: 1fr }
}

/* ─── RESPONSIVE — 640px ─────────────────────────────────── */
@media (max-width: 640px) {
    #hero { min-height: 50vh }
    .hero-text { padding: 80px 14px 0 }
    .hero-eyebrow { font-size: .7rem }
    .hero-h1 { font-size: clamp(1.8rem,9vw,2.8rem) }
    .hero-tagline { font-size: .85rem }
    .why-right-inner { padding: 18px }
    .why-h2 { font-size: clamp(1.5rem,6vw,2.2rem) }
    .why-body { font-size: .9rem }
    .power-h2 { font-size: clamp(1.4rem,6vw,2rem) }
    .power-body { font-size: .88rem }
    .panel-quote__headline { font-size: clamp(16px,5vw,22px) }
    .panel-quote__body { font-size: 13px }
    .panel-why__title { font-size: clamp(18px,5.5vw,26px) }
    .panel-why__body { font-size: 13px }
    .tc-title { font-size: clamp(1.2rem,6vw,2rem) }
    .tc-desc { font-size: .82rem }
    .moments-section { padding: 40px 16px 24px }
    .moments-block { padding: 0 !important; margin-bottom: 48px }
    .moments-header { margin-bottom: 40px }
    .moments-header h2 { font-size: 28px; letter-spacing: -0.04em }
    .block-heading { margin-bottom: 24px }
    .block-heading h3 { font-size: 20px }
    .block-heading p { font-size: 13px; line-height: 1.7 }
    .moments-grid,
    .moments-block:first-of-type .moments-grid { grid-template-columns: 1fr; gap: 20px }
    .moment-image { border-radius: 14px; margin-bottom: 14px }
    .moment-image img { height: 220px }
    .moment-content h4 { font-size: 15px; margin-bottom: 8px }
    .moment-content p { font-size: 13px; line-height: 1.7; max-width: 100% }
    .moments-divider { margin: 0 0 40px }
    .active-label { font-size: 14px; padding: .2rem .5rem }
    .ombc-left { padding: 40px 24px }
    .ombc-h2 { font-size: 1rem }
    .ombc-body { font-size: .82rem }
    .outro-big { font-size: clamp(1.1rem,5vw,1.6rem) }
    .outro-quote { font-size: .82rem }
    .journey-text h2 { font-size: 26px }
    .journey-text p { font-size: 13px }
    .rel-card-title { font-size: .82rem }
    .panel-logos__fifa { font-size: clamp(40px,12vw,80px) }
    .kia-dots { right: 8px }
    #top-btn { right: 12px; bottom: 18px }
    footer { padding: 28px 14px }
    .footer-links a { font-size: .8rem }
}