:root {
    --brand-300: #e94e1b;
    --brand-500: #e94e1b;
    --brand-600: #e94e1b;
    --eci-500: #e94e1b;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #1a1a1a;
    --neutral-900: #000000;
  }

  .eci-sec-section *, .eci-sec-section *::before, .eci-sec-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

  .eci-sec-section {
    font-family: 'Urbanist', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    width: 100%;
    background: transparent;
  }

  .eci-sec-section a { text-decoration: none; color: inherit; }

  .eci-sec-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: .5rem .25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .eci-sec-track::-webkit-scrollbar { display: none; }
  .eci-sec-track.eci-sec-smooth { scroll-behavior: smooth; }
  .eci-sec-track.eci-sec-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
    scroll-behavior: auto;
  }
  .eci-sec-track:not(.eci-sec-dragging) { cursor: grab; }

  .eci-sec-card {
    flex-shrink: 0;
    width: 200px;
    display: block;
    transition: transform .3s ease;
  }
  @media (min-width: 768px)  { .eci-sec-card { width: 260px; } }
  @media (min-width: 1024px) { .eci-sec-card { width: 300px; } }

  .eci-sec-card:hover { transform: translateY(-4px); }

  .eci-sec-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--neutral-900);
    border: 1px solid var(--neutral-200);
    border-radius: 0;
  }

  .eci-sec-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(20%) brightness(.85);
    transition: transform .5s ease, filter .5s ease;
  }
  .eci-sec-card:hover .eci-sec-card-image {
    transform: scale(1.05);
    filter: grayscale(0%) brightness(1);
  }

  .eci-sec-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 45%, transparent 75%);
    pointer-events: none;
    z-index: 1;
    transition: background .4s ease;
  }
  .eci-sec-card:hover .eci-sec-card-gradient {
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.15) 55%, transparent 80%);
  }

  .eci-sec-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    z-index: 2;
    pointer-events: none;
  }

  .eci-sec-card-title {
    font-family: 'Urbanist', sans-serif;
    font-size: .6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    line-height: 1.3;
    transition: color .2s ease;
  }
  @media (min-width: 768px) { .eci-sec-card-title { font-size: .8125rem; } }
  .eci-sec-card:hover .eci-sec-card-title { color: var(--brand-300); }

  .eci-sec-wrapper { position: relative; }

  .eci-sec-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0;
    background: #fff;
    border: 2px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-800);
    cursor: pointer;
    font-family: 'Urbanist', sans-serif;
    transition: all .2s ease;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .eci-sec-arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
    z-index: 0;
  }
  .eci-sec-arrow:hover::before { transform: scaleX(1); }
  .eci-sec-arrow:hover { border-color: var(--brand-500); color: #fff; }
  .eci-sec-arrow:active { transform: translateY(-50%) scale(.95); }
  .eci-sec-arrow svg { position: relative; z-index: 1; }

  .eci-sec-arrow-left {
    left: 0;
    transform: translateY(-50%) translateX(-.75rem);
  }
  .eci-sec-arrow-right {
    right: 0;
    transform: translateY(-50%) translateX(.75rem);
  }
  .eci-sec-arrow-right::before { transform-origin: right; }

  .eci-sec-wrapper:hover .eci-sec-arrow { opacity: 1; pointer-events: all; }
  .eci-sec-arrow.eci-sec-force-show { opacity: 1 !important; pointer-events: all !important; }
  .eci-sec-arrow:focus-visible { outline: 2px solid var(--brand-500) !important; outline-offset: 2px !important; }