/* ============================================================
   FAMA Collection — styles.css
   ============================================================ */

/* ============ FONTS ============ */

@font-face { font-family: 'Helvetica Now Display'; src: url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-ExtraBold.woff2') format('woff2'), url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-ExtraBold.woff') format('woff'), url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Helvetica Now Display'; src: url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-ExtBdIta.woff2') format('woff2'), url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-ExtBdIta.woff') format('woff'), url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-ExtBdIta.ttf') format('truetype'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Helvetica Now Display'; src: url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-Black.woff2') format('woff2'), url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-Black.woff') format('woff'), url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Helvetica Now Display'; src: url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-BlackIta.woff2') format('woff2'), url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-BlackIta.woff') format('woff'), url('https://famacollection.org/layout/fonts/HelveticaNowDisplay-BlackIta.ttf') format('truetype'); font-weight: 900; font-style: italic; }
@font-face { font-family: 'Helvetica Now Text'; src: url('https://famacollection.org/layout/fonts/HelveticaNowText-Regular.woff2') format('woff2'), url('https://famacollection.org/layout/fonts/HelveticaNowText-Regular.woff') format('woff'), url('https://famacollection.org/layout/fonts/HelveticaNowText-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Helvetica Now Text'; src: url('https://famacollection.org/layout/fonts/HelveticaNowText-RegIta.woff2') format('woff2'), url('https://famacollection.org/layout/fonts/HelveticaNowText-RegIta.woff') format('woff'), url('https://famacollection.org/layout/fonts/HelveticaNowText-RegIta.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Helvetica Now Text'; src: url('https://famacollection.org/layout/fonts/HelveticaNowText-Bold.woff2') format('woff2'), url('https://famacollection.org/layout/fonts/HelveticaNowText-Bold.woff') format('woff'), url('https://famacollection.org/layout/fonts/HelveticaNowText-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Helvetica Now Text'; src: url('https://famacollection.org/layout/fonts/HelveticaNowText-BoldItalic.woff2') format('woff2'), url('https://famacollection.org/layout/fonts/HelveticaNowText-BoldItalic.woff') format('woff'), url('https://famacollection.org/layout/fonts/HelveticaNowText-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }

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

:root { --fama-red: #CF1F25; --fama-blue: #2F4554; --fama-blue-light: #70c5fa; --fama-blue-light-2: #2374a6; --fama-gray: #bcbfc1; --fama-light: #e3e8ec; --fama-black: #111111; }

/* ============ RESET & BASE ============ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--fama-blue); }
body { font-family: 'Helvetica Now Text', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.6; color: var(--fama-black); overflow-x: clip; background: var(--fama-blue); }

/* ============ TYPOGRAPHY ============ */

h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica Now Display', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; line-height: 1.2; margin-bottom: 1rem; color: #1e3a5f; }
h1 { font-size: 3rem; line-height: 1; margin: 0; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a { color: #1e3a5f; text-decoration: none; transition: color 0.3s ease; }
a:hover { color: #3498db; text-decoration: underline; }
strong { font-weight: 700; }
em { font-style: italic; }
ul, ol { margin-bottom: 1rem; padding-left: 2rem; }
ul li::marker { font-weight: 700; color: #1e3a5f; }
ol li::marker { font-weight: 700; color: #1e3a5f; }
li { margin-bottom: 0.5rem; }
blockquote { margin: 2rem 0; padding: 1.5rem 2rem; border-left: 4px solid #1e3a5f; background: #f8f9fa; font-style: italic; color: #555; }
code { background: #f4f4f4; padding: 0.2rem 0.4rem; font-family: monospace; font-size: 0.9em; }
hr { border: none; border-top: 1px solid #dee2e6; margin: 2rem 0; }
.intro { font-weight: 700; color: var(--fama-black); font-size: 1em; line-height: 1.6; }

/* ============ GRID ============ */

.container { max-width: 1200px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.col-1-1 { width: 100%; }
.col-1-2 { width: calc((100% - 30px) / 2); }
.col-1-3 { width: calc((100% - 60px) / 3); }
.col-2-3 { width: calc(((100% - 60px) / 3) * 2 + 30px); }
.col-1-4 { width: calc((100% - 90px) / 4); }
.col-3-4 { width: calc(((100% - 90px) / 4) * 3 + 60px); }
.col-1-5 { width: calc((100% - 120px) / 5); }
.col-4-5 { width: calc(((100% - 120px) / 5) * 4 + 90px); }
.col-1-6 { width: calc((100% - 150px) / 6); }
.col-5-6 { width: calc(((100% - 150px) / 6) * 5 + 120px); }

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

.section { width: 100%; padding: 30px; }
.section-title { font-size: 0.9rem; font-weight: 900; text-transform: uppercase; text-align: center; color: var(--fama-gray); margin-bottom: 1.5rem; letter-spacing: 0.5px; display: block; text-decoration: none; transition: color 0.3s ease; }
.section-title:hover { color: #3498db; text-decoration: none; }
.section-2 { background: #ffffff; }
.section-1 { background-color: var(--fama-blue); background-image: url('https://famacollection.org/layout/fc-back-1.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; position: relative; z-index: 90; box-shadow: 0 -4px 12px rgba(0,0,0,0.25); }
/* Hero section */
.section-hero { height: 0; min-height: 0; display: flex; align-items: flex-end; justify-content: flex-end; overflow: hidden; animation: heroReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; }
@keyframes heroReveal {
    to { height: 400px; }
}

.section-hero-body { width: 100%; display: flex; justify-content: flex-end; align-items: flex-end; padding: 2.5rem 30px 30px; }
.section-hero-intro { max-width: 600px; text-align: right; }
.section-hero-intro .page-kicker { color: var(--fama-red); font-size: 0.75rem; margin-bottom: 0.5rem; }
.section-hero-intro h2 { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; color: #ffffff; line-height: 1; margin: 0 0 0.5rem; }
.section-hero-intro h3 { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: clamp(0.85rem, 1.4vw, 1.05rem); font-weight: 700; text-transform: none; color: rgba(255,255,255,0.6); line-height: 1.4; margin: 0 0 0.75rem; letter-spacing: 0.01em; }
.section-hero-intro h3 .hero-sep { color: rgba(255,255,255,0.25); margin: 0 5px 0 5px; font-weight: 400; }
.section-hero-intro .page-kicker .hero-sep { opacity: 0.5; margin: 0 0.4em; font-weight: 400; }
.section-hero-intro h2 { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; color: #ffffff; line-height: 1; margin: 0 0 0.5rem; }
.hero-br { display: none; }
.section-hero-intro p { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0; }

@media (max-width: 600px) {
    .section-hero { animation: heroRevealMobile 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; }
    @keyframes heroRevealMobile {
        to { height: 440px; }
    }
    .section-hero-body { padding: 1.5rem; }
    .section-hero-intro { max-width: 100%; }
    .section-hero-intro p { line-height: 1.35; }
    .hero-br { display: inline; }
    .section-hero-intro .page-kicker .hero-sep { display: none; }
}

.section-1 > * { position: relative; z-index: 1; }
.section-1 .section-title { color: var(--fama-blue-light); }
.section-1 .section-title:hover { color: var(--fama-blue-light); }
.section-1 .box.cards1 h3 { color: white; }
.section-1 .box.cards1 p { color: var(--fama-light); }
.section-1 .cards1-category { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-weight: 800; color: var(--fama-blue-light); }
.section-1 .cards1-id { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-weight: 800; color: var(--fama-gray); }
.section-3 { background-image: url('https://famacollection.org/layout/fc-back-2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; position: relative; }
#fc-info-panel { position: absolute; top: 20px; right: 20px; z-index: 500; width: 350px; background: rgba(255,255,255,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 7px; padding: 12px 14px 11px; box-shadow: 0 3px 14px rgba(0,0,0,0.25); pointer-events: all; }
#fc-info-panel h2 { font-size: 1.1rem; line-height: 1.2; margin: 0; color: #CF1F25; }
.fc-info-subtitle { font-size: 0.8rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: #2F4554; margin: 5px 0 5px 0; }
.fc-info-text { font-size: 0.8rem; line-height: 1.45; color: #333; margin: 0 0 7px; }
.fc-info-text:last-child { margin-bottom: 0; }
.fc-info-readmore { display: inline-block; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.05em; color: #fff; background: #CF1F25; padding: 3px 6px; border-radius: 2px; text-decoration: none; transition: background 0.2s; }
.fc-info-readmore:hover { background: #2F4554; text-decoration: none; color: #fff; }
.fc-info-extra { overflow: hidden; max-height: 0; transition: max-height 0.6s ease, margin-top 0.35s ease; margin-top: 0; }
.fc-info-extra.open { max-height: 1000px; margin-top: 6px; }
@media (max-width: 600px) { #fc-info-panel { width: calc(100% - 80px); right: 10px; top: 10px; } }

/* ── Mobile info button & modal ─────────────────────────── */
#fc-info-btn { display: none; }
#fc-info-mobile-overlay, #fc-info-mobile-modal { display: none; }

@media (max-width: 768px) {
  .section-3 #fc-info-panel { display: none !important; }

  #fc-info-btn {
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500;
    width: 38px;
    height: 38px;
    background: #CF1F25;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
    transition: background 0.2s;
  }
  #fc-info-btn:hover { background: #a8181d; }

  #fc-info-mobile-overlay.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1200;
  }

  #fc-info-mobile-modal.open {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1300;
    width: 92%;
    max-height: 82vh;
    overflow-y: auto;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 7px;
    padding: 14px 16px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  }
  #fc-info-mobile-modal h2 { font-size: 1.1rem; line-height: 1.2; margin: 0 0 8px; color: #CF1F25; padding-right: 24px; }
  #fc-info-mobile-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
  }
}
.section-3 .breadcrumb a { color: var(--fama-gray); }
.section-3 .breadcrumb a:hover { color: white; }
.section-3 .breadcrumb-sep { background: rgba(188, 191, 193, 0.5); }
.section-3 .breadcrumb-current, .section-3 .breadcrumb a.breadcrumb-current { color: var(--fama-blue-light); }
.section-3 .breadcrumb-current:hover, .section-3 .breadcrumb a.breadcrumb-current:hover { color: white; }
.section-3 h1 { color: white; }
.section-3 p.intro { color: rgba(255, 255, 255, 0.85); }
.section-4 { background-image: url('https://famacollection.org/layout/fc-back-3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
.section-page-header { background-color: white; }
.section-page-header .row { align-items: flex-start; justify-content: flex-start; }
.section-page-header h1 { margin-bottom: 1.2rem; }

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

.section-header { background: linear-gradient(to bottom right, #1a2e3d 0%, #3d5a6e 100%); color: white; position: relative; box-shadow: 0 6px 24px rgba(0,0,0,0.45); z-index: 100; padding: 0 30px 5px 30px; overflow: visible; border-top: 1px solid var(--fama-red); }
.section-header .container { position: relative; }
.section-header .row { align-items: center; justify-content: flex-end; gap: 0; position: relative; padding-left: clamp(77px, 11.5vw, 143px); padding-top: 4px; }
.section-header .col-1-6 { width: auto; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.section-header .col-5-6 { width: auto; flex: 1; display: flex; justify-content: flex-end; }
.header-logo-frame { position: absolute; top: 0; left: 0; width: clamp(77px, 11.5vw, 143px); height: clamp(77px, 11.5vw, 143px); background: white; display: flex; align-items: center; justify-content: center; padding: 18px; pointer-events: all; box-shadow: 0 2px 14px rgba(0,0,0,0.14); overflow: visible; border-radius: 0 0 6px 6px; z-index: 10; }
.header-logo-frame a { display: flex; align-items: center; justify-content: center; line-height: 0; padding: 0; width: 100%; overflow: visible; }
.header-logo-frame img { width: 100%; height: auto; object-fit: contain; display: block; transform: scale(1.45); transform-origin: center center; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.header-logo-frame a:hover img { opacity: 0.75; transform: scale(1.49); }
.mobile-header-logo { display: none; }

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

nav { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
nav li { margin: 0; position: relative; }
nav > ul > li:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--fama-blue-light); margin-left: 1rem; pointer-events: none; vertical-align: middle; }
nav a { color: white; text-decoration: none; font-family: 'Helvetica Now Display', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; font-size: 11.5px; transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); display: inline-block; }
nav a:hover { color: rgba(255,255,255,0.5); text-decoration: none; }
.nav-about { margin-left: 1rem; padding-left: 1rem; position: relative; }
.nav-about::before { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--fama-blue-light); position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.nav-about::after { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--fama-blue-light); margin-left: 1rem; pointer-events: none; vertical-align: middle; }
.language-switch { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 18px; margin-left: 1rem; line-height: 0; }
.language-switch img { width: auto; height: 18px; display: block; }
.social-icons { display: flex; gap: 0.875rem; align-items: center; margin-left: 1rem; padding-left: 1rem; position: relative; }
.social-icons::before { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--fama-blue-light); position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 18px; height: 18px; text-decoration: none !important; border: none; outline: none; }
.social-icons svg { width: 18px; height: 18px; fill: white; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); display: block; }
.social-icons a:hover svg { opacity: 0.7; }

/* ============ BURGER & MOBILE MENU ============ */

.burger-menu { display: none; flex-direction: column; justify-content: space-around; align-items: center; width: 22px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; }
.burger-menu span { width: 100%; height: 2px; background: white; transition: all 0.3s ease; display: block; }
.burger-menu.active span:nth-child(1) { transform: rotate(45deg); position: absolute; }
.burger-menu.active span:nth-child(2) { opacity: 0; }
.burger-menu.active span:nth-child(3) { transform: rotate(-45deg); position: absolute; }
.mobile-menu { display: none; }
.mobile-menu ul, .fixed-mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu li, .fixed-mobile-menu li { margin: 0; }
.mobile-menu a, .fixed-mobile-menu a { display: block; padding: 0.42rem 0.95rem; color: white; text-decoration: none; font-family: 'Helvetica Now Display', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); transition: background 0.3s ease; font-size: 12px; text-align: center; }
.mobile-menu a:hover, .fixed-mobile-menu a:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.mobile-menu ul.about-row, .fixed-mobile-menu ul.about-row { border-top: 1px solid rgba(255,255,255,0.1); }
.mobile-menu .social-icons::before, .fixed-mobile-menu .social-icons::before { content: none; }
.mobile-menu .social-icons, .fixed-mobile-menu .social-icons { display: block; text-align: center; margin-left: 0; padding: 0.5rem 1.3rem; width: 100%; box-sizing: border-box; }
.mobile-menu .social-icons a, .fixed-mobile-menu .social-icons a { display: inline-flex !important; padding: 0 !important; width: 15px !important; height: 15px !important; border-bottom: none !important; margin: 0 0.375rem; }
.mobile-menu .social-icons svg, .fixed-mobile-menu .social-icons svg { width: 15px; height: 15px; }
.mobile-menu .mobile-language-row, .fixed-mobile-menu .mobile-language-row { display: flex; justify-content: center; padding: 0.68rem 1.3rem 0.85rem; }
.mobile-menu .mobile-language-row a, .fixed-mobile-menu .mobile-language-row a { display: inline-flex !important; width: auto; height: 20px; padding: 0 !important; border: none !important; background: transparent; line-height: 0; }
.mobile-menu .mobile-language-row img, .fixed-mobile-menu .mobile-language-row img { width: auto; height: 20px; display: block; }
.mobile-menu .mobile-language-row a:hover img, .fixed-mobile-menu .mobile-language-row a:hover img { opacity: 0.7; transform: scale(1.03); }
.mobile-menu-logo { display: flex; justify-content: center; align-items: center; padding: 0.75rem 0.95rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-menu-kube-logo { display: flex; justify-content: center; align-items: center; padding: 0.55rem 1.3rem 0.6rem; border-top: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.mobile-menu-logo img { display: block; width: 100px; max-width: 100%; height: auto; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.mobile-menu-kube-logo img { display: block; width: 37px; max-width: 100%; height: auto; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.mobile-menu .mobile-menu-logo a, .mobile-menu .mobile-menu-kube-logo a, .fixed-mobile-menu .mobile-menu-logo a, .fixed-mobile-menu .mobile-menu-kube-logo a { display: inline-flex; align-items: center; justify-content: center; padding: 0; border-bottom: none; background: transparent; text-decoration: none; line-height: 0; }
.mobile-menu .mobile-menu-logo a:hover, .mobile-menu .mobile-menu-kube-logo a:hover, .fixed-mobile-menu .mobile-menu-logo a:hover, .fixed-mobile-menu .mobile-menu-kube-logo a:hover { background: transparent; }
.mobile-menu .mobile-menu-logo a:hover img, .mobile-menu .mobile-menu-kube-logo a:hover img, .fixed-mobile-menu .mobile-menu-logo a:hover img, .fixed-mobile-menu .mobile-menu-kube-logo a:hover img { opacity: 0.7; transform: scale(1.03); }
.fixed-burger-menu { display: none; flex-direction: column; justify-content: space-around; align-items: center; width: 38px; height: 38px; background: var(--fama-red); border: none; cursor: pointer; padding: 9px 7px; position: fixed; top: 15px; right: 15px; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, background 0.3s ease; }
.fixed-burger-menu:not(.active) { border-radius: 5px; }
.fixed-burger-menu.active { border-radius: 0 5px 5px 0; justify-content: center; }
.fixed-burger-menu:hover { background: #2c4a6f; }
.fixed-burger-menu.visible { opacity: 1; visibility: visible; }
.fixed-burger-menu span { width: 100%; height: 2px; background: white; transition: all 0.3s ease; display: block; }
.fixed-burger-menu.active span:nth-child(1) { transform: rotate(45deg) scale(0.65); position: absolute; height: 4px; }
.fixed-burger-menu.active span:nth-child(2) { opacity: 0; }
.fixed-burger-menu.active span:nth-child(3) { transform: rotate(-45deg) scale(0.65); position: absolute; height: 4px; }
.fixed-mobile-menu { display: none; position: fixed; top: 15px; right: 53px; background: linear-gradient(to bottom right, #1a2e3d 0%, #3d5a6e 100%); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.2); min-width: 160px; z-index: 1999; opacity: 0; visibility: hidden; border-radius: 5px 0 5px 5px; }
.fixed-mobile-menu.visible { opacity: 1; visibility: visible; }
.fixed-mobile-menu.active { max-height: 500px; }

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

.breadcrumb { display: flex; align-items: center; gap: 0; margin-bottom: 0.4rem; flex-wrap: wrap; justify-content: flex-start; }
.breadcrumb a { font-family: 'Helvetica Now Text', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11px; font-weight: 700; color: var(--fama-gray); text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none; transition: color 0.25s ease; }
.breadcrumb a:hover { color: var(--fama-blue); text-decoration: none; }
.breadcrumb-current { font-family: 'Helvetica Now Text', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11px; font-weight: 700; color: var(--fama-red); text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none; transition: color 0.25s ease; }
.breadcrumb-current:hover { color: var(--fama-blue); }
.breadcrumb-sep { display: inline-block; width: 1px; height: 8px; background: rgba(188, 191, 193, 0.5); margin: 0 0.5rem; vertical-align: middle; flex-shrink: 0; }

/* ============ ARCHIVE NAV ============ */

.archive-nav { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.archive-years { display: flex; align-items: center; gap: 0; }
.archive-year { background: none; border: none; padding: 4px 0; margin-right: 22px; font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; color: var(--fama-gray); cursor: pointer; border-bottom: 1.5px solid transparent; transition: color 0.2s, border-color 0.2s; text-transform: uppercase; }
.archive-year:hover { color: white; }
.archive-year.active { color: var(--fama-blue-light); border-bottom-color: rgba(188, 191, 193, 0.5); }
.archive-months { display: flex; flex-wrap: wrap; gap: 5px; }
.archive-months[hidden] { display: none; }
.archive-month { display: inline-block; padding: 3px 9px; font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fama-gray); border: 1px solid rgba(188, 191, 193, 0.5); border-radius: 2px; text-decoration: none; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.archive-month:hover { color: white; border-color: white; background: transparent; }
.archive-month.active { color: white; background: var(--fama-red); border-color: var(--fama-red); }

/* ============ CARDS ============ */

.box.cards1 { background: transparent; overflow: hidden; text-align: left; padding: 0; display: block; text-decoration: none; }
.cards1-image { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #f0f0f0; display: block; margin-bottom: 0.4rem; }
.cards1-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.cards1-category { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 0.7rem; font-weight: 800; color: var(--fama-red); margin: 0; }
.box.cards1 h3 { font-size: 1.1rem; margin: 0 0 0.2rem 0; color: var(--fama-blue); transition: color 0.3s ease; }
.box.cards1 p { font-size: 0.75rem; color: #666; line-height: 1.3; margin: 0 0 0.25rem 0; }
.cards1-id { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 0.65rem; font-weight: 800; color: var(--fama-gray); margin-top: 0.1rem; }

/* ============ CARDS 2 — Overlay Style ============ */

.box.cards2 { background: transparent; overflow: hidden; text-align: left; padding: 0; position: relative; display: block; text-decoration: none; border-radius: 4px; }
.cards2-image { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; display: block; position: relative; }
.cards2-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.cards2-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.4) 65%, transparent 100%); color: white; }
.cards2-category { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 0.7rem; font-weight: 800; color: var(--fama-blue-light); margin: 0; display: block; }
.box.cards2 h3 { font-size: 1.1rem; margin: 0 0 0.35rem 0; color: white; transition: color 0.3s ease; }
.box.cards2 p { font-size: 0.75rem; color: rgba(255,255,255,0.85); line-height: 1.3; margin: 0 0 0.25rem 0; }
.cards2-date { font-size: 0.65rem; color: rgba(255,255,255,0.7); }

/* ============ KTM BANNER ============ */

.ktm-banner { display: block; text-decoration: none; width: 100%; aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: 6px; overflow: hidden; position: relative; cursor: pointer; }
.ktm-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, rgba(26, 46, 61, 0.65) 0%, rgba(207, 31, 37, 0.4) 100%); opacity: 0; transition: opacity 0.4s ease; z-index: 2; border-radius: 6px; }
.ktm-banner:hover { text-decoration: none; }
.ktm-banner:hover::after { opacity: 1; }
.ktm-banner-icon { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.ktm-banner-icon img { height: 70px; width: auto; display: block; opacity: 0.85; transition: opacity 0.4s ease, transform 0.4s ease; }
.ktm-banner:hover .ktm-banner-icon img { opacity: 1; transform: scale(1.25); }
.ktm-banner-content { position: absolute; top: 44%; left: 0; right: 0; padding: 20px; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
.ktm-banner-subtitle { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 0.75rem; font-weight: 800; color: var(--fama-blue-light); margin-bottom: 0; text-align: center; }
.ktm-banner-title { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 1.6rem; font-weight: 900; color: white; line-height: 1; margin-bottom: 0.3rem; text-transform: uppercase; text-align: center; }
.ktm-banner-label { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 0.75rem; font-weight: 800; color: white; line-height: 1; text-transform: uppercase; padding-top: 0.2rem; border-top: 1px solid var(--fama-red); display: inline-block; text-align: center; }
.ktm-banner.ktm-light .ktm-banner-subtitle { color: var(--fama-blue-light-2); }
.ktm-banner.ktm-light .ktm-banner-title { color: var(--fama-blue); }
.ktm-banner.ktm-light .ktm-banner-label { color: var(--fama-blue); }
.ktm-banner.ktm-wide { aspect-ratio: 2/1; }
.text-container { max-width: 100%; margin: 0 auto; }
.text-container ul li::marker, .text-container ol li::marker { color: var(--fama-red); }
.text-container h2 { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fama-blue); border-bottom: 1.5px solid var(--fama-red); padding-bottom: 6px; margin-bottom: 1rem; }

/* ============ SPECS TABLE ============ */

.specs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.specs-table tr { border-bottom: 1px solid var(--fama-light); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table th { text-align: left; font-family: 'Helvetica Now Text', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; color: var(--fama-gray); text-transform: uppercase; letter-spacing: 0.4px; font-size: 10px; padding: 0.5rem 0.75rem 0.5rem 0; width: 40%; vertical-align: top; }
.specs-table td { text-align: left; font-family: 'Helvetica Now Text', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; color: var(--fama-black); font-size: 13px; padding: 0.5rem 0 0.5rem 0.75rem; vertical-align: top; }

/* ============ VOH — VIDEO ORAL HISTORY ============ */

.voh-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--fama-light); text-decoration: none; }
.voh-item:first-of-type { padding-top: 0; }
.voh-item:last-of-type { border-bottom: none; }
.voh-item a { text-decoration: none; }
.voh-thumb { flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: block; }
.voh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.voh-thumb:hover img { transform: scale(1.1); }
.voh-body { display: flex; flex-direction: column; gap: 0; }
.voh-label { font-family: 'Helvetica Now Text', -apple-system, sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--fama-red); margin-bottom: 0; }
.voh-title { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fama-blue); line-height: 1; margin-bottom: 2px; text-decoration: none; transition: color 0.2s; display: block; }
.voh-title:hover { color: var(--fama-red); }
.voh-meta { font-family: 'Helvetica Now Text', -apple-system, sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; color: var(--fama-gray); }
.voh-sep { margin: 0 4px; color: var(--fama-light); }
.voh-type { color: var(--fama-red); text-transform: uppercase; text-decoration: none; transition: color 0.2s; }
.voh-type:hover { color: var(--fama-blue-light); }

/* ============ VOH MODAL ============ */

.voh-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; overflow-y: auto; }
.voh-modal.active { display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; }
.voh-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.88); cursor: pointer; animation: fadeIn 0.3s ease; }
.voh-modal-content { position: relative; width: 100%; max-width: 760px; background: rgba(255,255,255,0.98); border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); animation: slideUp 0.35s ease; z-index: 1; flex-shrink: 0; }
.voh-modal-close { position: fixed; top: 18px; right: 22px; background: none; border: none; color: var(--fama-red); font-size: 38px; font-weight: 700; line-height: 1; cursor: pointer; z-index: 10001; display: none; align-items: center; justify-content: center; padding: 0; }
.voh-modal-close:hover { color: #fff; }
.voh-modal.active .voh-modal-close { display: flex; }
.voh-modal-header { padding: 1.5rem 1.5rem 0.75rem 1.5rem; display: flex; flex-direction: column; gap: 0; }
.voh-modal-label-name { font-family: 'Helvetica Now Text', -apple-system, sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--fama-red); margin-bottom: 0; }
.voh-modal-title { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; color: var(--fama-blue); line-height: 1; margin-bottom: -3px; padding: 0; display: block; }
.voh-modal-meta { margin-top: 0; }
.voh-modal-id-code { font-family: 'Helvetica Now Text', -apple-system, sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; color: var(--fama-gray); }
.voh-modal-video { padding: 0.75rem 0 0.25rem; }
.voh-modal-video .video-container { padding-bottom: 75%; }
.voh-modal-body { padding: 0.25rem 1.5rem 1.5rem; }
.voh-modal-body p { font-size: 0.9rem; line-height: 1.7; color: var(--fama-black); margin: 0; }
.voh-modal-nav { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1.5rem; background: linear-gradient(to bottom right, #1a2e3d 0%, #3d5a6e 100%); border-radius: 4px 4px 0 0; border-top: 3px solid var(--fama-red); }
.voh-modal-nav-btn { background: none; border: none; color: rgba(255,255,255,0.9); font-family: 'Helvetica Now Text', -apple-system, sans-serif; font-size: 0.65rem; font-weight: 700; cursor: pointer; padding: 0.25rem 0.4rem; transition: color 0.2s; line-height: 1; }
.voh-modal-nav-btn:hover:not(:disabled) { color: #fff; }
.voh-modal-nav-btn:disabled { opacity: 0.25; cursor: default; }
.voh-modal-nav-counter { font-family: 'Helvetica Now Text', -apple-system, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
.voh-modal-nav-timeframe { color: var(--fama-blue-light); }

/* ============ VIDEO EMBED ============ */

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 1rem; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ============ PAGE BANNER ============ */

.page-banner { width: 100%; height: 300px; background-size: cover; background-position: center; background-attachment: fixed; border-radius: 6px; margin-top: 0; overflow: hidden; position: relative; cursor: pointer; }
.page-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, rgba(26, 46, 61, 0.75) 0%, rgba(207, 31, 37, 0.45) 100%); opacity: 0; transition: opacity 0.4s ease; border-radius: 6px; }
.page-banner:hover::after { opacity: 1; }
.page-banner-logo { height: 75px; width: auto; display: block; position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); z-index: 1; transition: opacity 0.4s ease, transform 0.4s ease; opacity: 0.85; }
.page-banner:hover .page-banner-logo { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
.page-banner-title { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 1.65rem; line-height: 1.1; font-weight: 900; text-transform: uppercase; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; text-align: center; white-space: normal; word-break: break-word; width: 90%; opacity: 0.9; }
.col-1-2 .page-banner-title { font-size: 1.2rem; }
.page-banner-info { font-family: 'Helvetica Now Text', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.7); position: absolute; top: calc(50% + 1.3rem); left: 50%; transform: translateX(-50%); z-index: 1; text-align: center; letter-spacing: 0.03em; line-height: 1.3; max-width: 480px; width: 90%; }

/* ============ MISC ============ */

.back-to-top { position: fixed; bottom: 15px; right: 15px; width: 38px; height: 38px; background: var(--fama-red); color: white; border: none; cursor: pointer; z-index: 1500; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; border-radius: 5px; }
.back-to-top:hover { background: #2c4a6f; transform: translateY(-3px); }
.back-to-top.visible { opacity: 1; visibility: visible; }
.fade-in { opacity: 0; transition: opacity 0.8s ease-out; }
.fade-in.visible { opacity: 1; }

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

.section-footer { background: linear-gradient(to bottom right, #1a2e3d 0%, #3d5a6e 100%); color: white; padding: 30px; margin-top: 0; text-align: center; box-shadow: 0 -6px 24px rgba(0,0,0,0.45); z-index: 100; position: relative; border-bottom: 1px solid var(--fama-red); }
.section-footer .row { display: block; }
.footer-logo { margin-bottom: 0.4rem; }
.footer-logo img { height: 64px; width: auto; display: block; margin: 0 auto; }
.footer-logo .footer-logo-mobile { display: none; }
.footer-center { margin-bottom: 1rem; }
.footer-center .logo img { height: 40px; width: auto; display: block; margin: 0 auto; }
.footer-nav { list-style: none; padding: 0; margin: 0 0 1rem 0; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.footer-nav li:not(:last-child)::after { content: "|"; color: var(--fama-blue-light); margin-left: 1.5rem; pointer-events: none; font-size: 13px; }
.footer-nav a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 14px; font-weight: 500; transition: opacity 0.3s ease; }
.footer-nav a:hover { opacity: 0.7; text-decoration: none; }
.footer-bottom { font-size: 11px; line-height: 1.6; color: white; }
.footer-bottom p { margin-bottom: 0.3rem; }
.footer-bottom a { color: white; text-decoration: none; font-family: 'Helvetica Now Display', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; transition: opacity 0.3s ease; font-size: 11px; }
.footer-bottom a:hover { opacity: 0.7; text-decoration: none; }
.footer-sep { display: inline-block; width: 1px; height: 10px; background: var(--fama-blue-light); margin: 0 0.6rem; vertical-align: middle; }

/* ============ RESPONSIVE — tablet (<=1024px) ============ */

@media (max-width: 1024px) {
    /* iOS Safari fix: background-attachment: fixed not supported on touch devices */
    .section-1, .section-3, .section-4, .page-banner { background-attachment: scroll; }
    body { font-size: 15px; padding-top: 62px; }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.875rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    .section { padding: 20px; }
    .section-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 6px 18px; }
    .section-header.section { padding: 6px 18px; }
    .section-header .row { padding-top: 0; padding-left: 0; }
    .section-header .col-5-6 { display: none; }
    .section-header .col-1-6 { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; top: auto; left: auto; transform: none; }
    .header-logo-frame { display: none; }
    .page-header-spacer { display: none; }
    .mobile-header-logo { display: flex; justify-content: center; align-items: center; }
    .mobile-header-logo a { display: inline-flex; line-height: 0; }
    .mobile-header-logo img { height: 50px; width: auto; display: block; transition: opacity 0.35s ease; }
    .mobile-header-logo a:hover img { opacity: 0.7; }
    .burger-menu { display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
    .mobile-menu { display: block; position: fixed; top: 62px; right: 0; background: linear-gradient(to bottom right, #1a2e3d 0%, #3d5a6e 100%); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: fit-content; min-width: 0; z-index: 1999; border-radius: 0 0 5px 5px; }
    .mobile-menu.active { max-height: 90vh; overflow-y: auto; }
    .row { gap: 20px; }
    .col-1-3, .col-1-4, .col-1-5 { width: calc((100% - 20px) / 2); }
    .col-2-3, .col-3-4, .col-4-5, .col-5-6 { width: 100%; }
    .col-1-6 { width: calc((100% - 60px) / 4); }
    .logo { display: block; margin: 0 auto; text-align: center; }
    .logo img { margin: 0 auto; }
    .footer-logo .footer-logo-desktop { display: none; }
    .footer-logo .footer-logo-mobile { display: block; }
    .page-banner { height: 280px; }
    .page-banner-logo { height: 55px; }
    .page-banner-title { font-size: 1.2rem; }
    .page-banner-info { font-size: 12px; top: calc(50% + 1.05rem); }
}

/* ============ RESPONSIVE — mobile (<=768px) ============ */

@media (max-width: 768px) {
    body { font-size: 14px; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    blockquote { padding: 1rem 1.5rem; margin: 1.5rem 0; }
    .section { padding: 15px; }
    .section-header { padding: 28px 18px; }
    .section-title { font-size: 0.75rem; margin-bottom: 0.75rem; letter-spacing: 0.4px; }
    .row { gap: 15px; }
    .col-1-2, .col-1-3 { width: 100%; }
    .col-1-4, .col-1-5, .col-1-6 { width: calc((100% - 15px) / 2); }
    .col-2-3, .col-3-4, .col-4-5, .col-5-6 { width: 100%; }
    .text-container { max-width: 100%; }
    .text-container h2 { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-weight: 800; }
    .box.cards1 p:not(.cards1-category):not(.cards1-id) { display: none; }
    .box.cards2 p { display: none; }
    .social-icons::before { display: none; }
    .footer-nav { display: none; }
    .footer-center { margin-bottom: 0.75rem; }
    .back-to-top { display: none !important; }
    .fixed-mobile-menu { display: none !important; }
    .fixed-burger-menu { display: none !important; }
    .page-banner { height: 220px; }
    .page-banner-logo { height: 42px; }
    .page-banner-title { font-size: 1rem; letter-spacing: 0.04em; }
    .page-banner-info { font-size: 11px; top: calc(50% + 0.9rem); }
    .voh-modal.active { padding: 40px 20px; align-items: flex-start; }
    .voh-modal-content { border-radius: 4px; width: 90%; min-height: unset; }
    .voh-modal-header { padding: 1rem 1rem 0.5rem 1rem; }
    .voh-modal-video { padding: 0.5rem 0 0; }
    .voh-modal-body { padding: 0.25rem 1rem 1rem; }
}

/* ============ RESPONSIVE — landscape mobile (<=926px) ============ */

@media (max-width: 926px) and (orientation: landscape) {
    body { font-size: 14px; padding-top: 50px; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.625rem; }
    h3 { font-size: 1.35rem; }
    h4 { font-size: 1.15rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.95rem; }
    blockquote { padding: 0.75rem 1rem; margin: 1rem 0; }
    .section { padding: 15px 20px; }
    .section-header.section { padding: 8px 18px; }
    .row { gap: 15px; }
    .mobile-header-logo img { height: 34px; }
    .mobile-menu { top: 50px; }
}

/* ============ HORIZONTAL SCROLLER ============ */

.section-scroller-1 { width: 100%; padding: 0; position: relative; overflow: hidden; }
.scroller-wrapper { position: relative; overflow: visible; }
.scroller-container { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.scroller-container::-webkit-scrollbar { display: none; }
.scroller-track { display: flex; gap: 30px; overflow: visible; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.scroller-track::-webkit-scrollbar { display: none; }
.scroller-track .box.cards1 { min-width: calc((100% - 90px) / 4); max-width: calc((100% - 90px) / 4); flex-shrink: 0; }
.scroller-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; background: rgba(47, 69, 84, 0.9); color: white; border: none; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border-radius: 50%; }
.scroller-nav:hover { background: var(--fama-red); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.scroller-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.scroller-nav.prev { left: -50px; }
.scroller-nav.next { right: -50px; }

/* ============ FRONTPAGE SECTION VARIANT ============ */

.section-frontpage-1 { position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); }
.page-kicker { font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 800; color: var(--fama-red); text-transform: uppercase; letter-spacing: 0; margin-bottom: 0; }
.section-frontpage-1 h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.section-frontpage-1 h1 a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
.section-frontpage-1 h1 a:hover { color: var(--fama-red); }
.section-frontpage-1 .intro { font-weight: 400; font-size: 0.9em; }

/* ============ HOVER EFFECTS (pointer devices only) ============ */

@media (hover: hover) {
    .box.cards1:hover .cards1-image img { transform: scale(1.1); }
    .box.cards1:hover h3 { color: var(--fama-red); }
    .section-1 .box.cards1:hover h3 { color: var(--fama-blue-light); }
    .box.cards2:hover .cards2-image img { transform: scale(1.1); }
    .box.cards2:hover h3 { color: var(--fama-blue-light); }
}

@media (max-width: 1024px) {
    .scroller-track .box.cards1 { min-width: calc((100% - 60px) / 3); max-width: calc((100% - 60px) / 3); }
    .scroller-nav.prev { left: -40px; }
    .scroller-nav.next { right: -40px; }
    .section-frontpage-1 h1 { font-size: 2.25rem; }
    .ktm-banner-icon img { height: 58px; }
    .ktm-banner-title { font-size: 1.1rem; }
    .ktm-banner-subtitle { font-size: 0.65rem; }
    .ktm-banner-label { font-size: 0.6rem; }
}

@media (max-width: 768px) {
    .scroller-track .box.cards1 { min-width: calc((100% - 15px) / 2); max-width: calc((100% - 15px) / 2); }
    .scroller-nav.prev { left: 5px; }
    .scroller-nav.next { right: 5px; }
    .section-frontpage-1 h1 { font-size: 2rem; }
    .ktm-banner:not(.ktm-wide) { aspect-ratio: 2/1; }
    .ktm-banner-icon img { height: 48px; }
    .ktm-banner-title { font-size: 1rem; }
    .ktm-banner-content { padding: 14px; }
}