/* ===========================
   LG Timeline — Filmstrip Styles
   =========================== */
:root {
  --coral-red:#F96F6E;
  --bg-primary:#0F0F0F;
  --bg-secondary:#1A1A1A;
  --bg-tertiary:#262626;
  --card-bg:#2A2A2A;
  --text-primary:#FFFFFF;
  --text-secondary:#B0B0B0;
  --text-muted:#666666;
  --border-color:#404040;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;padding-top:80px}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(15,15,15,.95);backdrop-filter:blur(15px);border-bottom:1px solid rgba(64,64,64,.2)}
.nav-container{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.06em;color:#fff;text-decoration:none}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{color:var(--text-secondary);text-decoration:none;transition:color .3s ease;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--coral-red)}
.timeline-hero{padding:3.5rem 0;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);text-align:center}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.timeline-hero h1{font-size:3rem;font-weight:700;margin-bottom:.75rem;letter-spacing:.02em;color:var(--coral-red)}
.hero-description{font-size:1.1rem;opacity:.9}
.timeline-section{padding:2rem 0 3rem}

/* ===========================
   Desktop Timeline — Filmstrip
   =========================== */
.timeline-desktop{position:relative}
.timeline-filmstrip{position:relative;max-width:1200px;margin:0 auto;padding:2rem 3.5rem}
.fs-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(340px,32vw,480px);
  gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:16px;
  scrollbar-width:none;-ms-overflow-style:none
}
.fs-track::-webkit-scrollbar{display:none}
.fs-card{
  scroll-snap-align:center;background:var(--card-bg);border:1px solid var(--border-color);
  border-radius:16px;overflow:hidden;cursor:pointer;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease
}
.fs-card:hover{transform:translateY(-4px);border-color:var(--coral-red);box-shadow:0 12px 24px rgba(0,0,0,.35)}
.fs-card img{width:100%;height:clamp(160px,22vh,220px);object-fit:cover;display:block;background:var(--bg-tertiary)}
.fs-meta{padding:1rem 1rem 1.1rem}
.fs-eyebrow{font-size:.9rem;color:var(--text-secondary);letter-spacing:.06em}
.fs-card h3{margin:.15rem 0 .25rem;font-size:1.2rem}
.fs-card p{color:var(--text-secondary);font-size:.98rem}

/* arrows */
.fs-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border-color);color:var(--text-primary);background:rgba(26,26,26,.7);
  display:grid;place-items:center;cursor:pointer;z-index:5;transition:background .2s ease,border-color .2s ease,transform .2s ease;
  backdrop-filter:blur(4px)
}
.fs-nav:hover{background:rgba(26,26,26,.95);border-color:var(--coral-red);transform:translateY(-50%) scale(1.04)}
.fs-nav.prev{left:.5rem}
.fs-nav.next{right:.5rem}

/* progress */
.fs-progress{margin-top:.75rem;height:4px;background:#1f1f1f;border-radius:999px;overflow:hidden}
.fs-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--coral-red),#ff8a80);transition:width .15s linear;border-radius:999px}

/* Mobile: keep existing implementation on your site */
.timeline-mobile{display:none}
@media (max-width: 768px){
  .timeline-filmstrip{padding:1rem}
  .fs-nav{display:none}
  .timeline-mobile{display:block}
}

/* Modal */
.timeline-modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);align-items:center;justify-content:center}
.timeline-modal.active{display:flex}
.modal-overlay{position:absolute;inset:0}
.modal-content{position:relative;max-width:640px;width:92%;max-height:80vh;overflow:auto;border-radius:16px;background:var(--bg-secondary);border:1px solid var(--border-color);padding:1.5rem 1.5rem 2rem}
.modal-close{position:absolute;top:.75rem;right:.75rem;background:none;border:0;color:var(--text-secondary);font-size:1.6rem;cursor:pointer}
.modal-header h2{font-size:1.6rem;margin-bottom:.5rem;color:var(--text-primary)}
.modal-quote{color:var(--coral-red);font-style:italic;margin-bottom:1rem}
.modal-description p,.modal-achievements li{color:var(--text-secondary)}
.modal-achievements h4,.modal-brands h4,.modal-brands-supported h4{color:var(--text-primary);margin-top:1rem}
.brand-logos{display:flex;gap:.5rem;flex-wrap:wrap}
.brand-logos img{height:32px;background:var(--bg-tertiary);padding:4px;border-radius:4px}