.horizontal-scroll-section { position: relative; height: 400vh; background: var(--bg); }
.hss-sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hss-track { display: flex; gap: 10vw; will-change: transform; flex-wrap: nowrap; width: max-content; padding: 0 var(--inner-px); }

/* Horizontal Scroll Items Base */
.hss-item { flex: 0 0 clamp(500px, 65vw, 1200px); height: 75vh; position: relative; padding: 0; }
.hss-item-inner { width: 100%; height: 100%; padding: clamp(30px, 5vw, 60px); position: relative; display: flex; flex-direction: column; justify-content: space-between; clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 0% 100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }

.hss-item:hover .hss-item-inner { transform: scale(1.01); }

.hss-item-dark .hss-item-inner { background: #0a0a0a; color: #fff; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 1px, transparent 1px, transparent 30px), radial-gradient(circle at 2px 2px, rgba(255,255,255,0.15) 1px, transparent 0); background-size: 100% 100%, 30px 30px; }
.hss-item-lime .hss-item-inner { background: var(--accent); color: #000; background-image: linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.03) 75%, transparent 75%, transparent); background-size: 40px 40px; }
.hss-item-light .hss-item-inner { background: #eee; color: #000; background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.03) 1px, rgba(0,0,0,0.03) 2px); background-size: 100% 10px; }

.hss-num { font-size: clamp(10px, 1vw, 14px); font-weight: 900; letter-spacing: 5px; opacity: 0.5; margin-bottom: 15px; }
.hss-title { font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 5vw, 5rem) !important; margin: 0; line-height: 0.82 !important; }
.hss-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(15px, 2vw, 30px); border-top: 1px solid rgba(128,128,128,0.2); padding-top: 30px; }
.hss-detail-box h5 { font-size: clamp(9px, 0.8vw, 11px); font-weight: 900; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1.5px; }
.hss-detail-box p { font-size: clamp(11px, 1vw, 13px); opacity: 0.7; line-height: 1.4; }

.hss-action { align-self: flex-end; background: #fff; color: #000; padding: clamp(10px, 1.5vw, 15px) clamp(20px, 3vw, 35px); clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%); font-size: clamp(9px, 1vw, 11px); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; display: flex; align-items: center; gap: clamp(10px, 1.5vw, 15px); transition: 0.3s; z-index: 10; }
.hss-action:hover { background: var(--accent); transform: translateY(-3px); }