/* Volvo Trucks-inspired hero video slider
   Palette: deep navy / white / signature Volvo blue accent
   Typography: clean geometric sans-serif stack */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --volvo-navy: #14213d;
  --volvo-deep: #0b1a2e;
  --volvo-fog: #f4f4f4;
  --volvo-white: #ffffff;
  --volvo-muted: rgba(255, 255, 255, 0.78);
  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.35);
  --transition: 300ms cubic-bezier(.2,.7,.2,1);
}

html, body {background: var(--volvo-deep);color: var(--volvo-white);font-family: "Volvo Novum", "Inter", "Helvetica Neue", Arial, sans-serif;font-weight: 400;line-height: 1.5;-webkit-font-smoothing: antialiased;}
.container {width: 100%;max-width: 1440px;margin: 0 auto;padding: 0 clamp(20px, 5vw, 80px);}



/* Hero slider shell */
.hero-slider {position: relative;width: 100%;height: 100vh;min-height: 1300px;max-height: 880px;overflow: hidden;background: var(--volvo-deep);}
.slides {position: absolute;inset: 0;}
.slide {position: absolute;inset: 0;opacity: 0;visibility: hidden;transition: opacity 700ms ease;}
.slide.is-active {opacity: 1;visibility: visible;}

/* Media */
.slide__media {position: absolute;inset: 0;overflow: hidden;}
.slide__video {width: 100%;height: 100%;object-fit: cover;display: block;transform: scale(1.03);}
.slide__overlay {position: absolute;inset: 0;background:white
linear-gradient(90deg, rgba(11,26,46,0.78) 0%, rgba(11,26,46,0.45) 45%, rgba(11,26,46,0.15) 100%),
linear-gradient(180deg, rgba(11,26,46,0) 55%, rgba(11,26,46,0.85) 100%); }

/* Content */
.slide__content {position: relative;z-index: 2;height: 100%;display: flex;align-items: center;padding-bottom: 10px;}
.eyebrow {display: inline-block;font-size: 13px;font-weight: 600;letter-spacing: 0.18em;text-transform: uppercase;color:white;padding-bottom: 14px;border-bottom: 2px solid var(--volvo-blue);margin-bottom: 28px;}
.headline {font-size: clamp(36px, 5.4vw, 72px); color: white;;font-weight: 500;line-height: 1.05;letter-spacing: -0.015em;max-width: 820px;margin-bottom: 24px;}
.lede {font-size: clamp(16px, 1.4vw, 20px);max-width: 560px;color: var(--volvo-muted);margin-bottom: 40px;}

/* Buttons (Volvo style: square corners, bold border) */
.actions {display: flex;flex-wrap: wrap;gap: 16px;}
.btn {display: inline-flex;align-items: center;gap: 12px;padding: 16px 28px;font-size: 15px;font-weight: 600;letter-spacing: 0.02em;text-decoration: none;border: 2px solid transparent;border-radius: 0;cursor: pointer;
transition: background var(--transition), color var(--transition),border-color var(--transition), transform var(--transition);}
.btn__arrow {display: inline-block;transition: transform var(--transition);}
.btn:hover .btn__arrow { transform: translateX(4px); }


/* Controls */
.slider-controls {position: absolute;bottom: 32px;right: clamp(20px, 5vw, 80px);z-index: 3;display: flex;align-items: center;gap: 14px;color: var(--volvo-white);}
.ctrl {width: 48px;height: 48px;display: inline-flex;align-items: center;justify-content: center;background: transparent;border: 1px solid rgba(255,255,255,0.5);color: var(--volvo-white);cursor: pointer;
border-radius: 0;transition: background var(--transition), border-color var(--transition), color var(--transition);}
.ctrl:hover {background: var(--volvo-white);border-color: var(--volvo-white);color: var(--volvo-navy);}
.ctrl__counter {font-size: 14px;letter-spacing: 0.12em;font-weight: 600;min-width: 64px;text-align: center;}
.ctrl__counter .divider { opacity: 0.5; margin: 0 6px; }
.ctrl__counter .total { opacity: 0.6; }
.ctrl--mute .mute-x { opacity: 0; transition: opacity var(--transition); }
.ctrl--mute.is-muted .mute-x { opacity: 1; }

/* Progress bar */
.progress {position: absolute;left: 0; right: 0; bottom: 0;height: 3px;background: rgba(255,255,255,0.15);z-index: 3;}
.progress__bar {display: block;height: 100%;width: 0%;background: var(--volvo-blue);transition: width 120ms linear;}


/* Responsive */
@media (max-width: 720px) {
  .hero-slider { height: 92vh; min-height: 520px; }
  .slide__content { padding-bottom: 120px; align-items: flex-end; }
  .slide__overlay { background:linear-gradient(180deg, rgba(11,26,46,0.25) 0%, rgba(11,26,46,0.65) 55%, rgba(11,26,46,0.92) 100%);
  }
  .actions { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: space-between; }
  .slider-controls { bottom: 24px; right: 20px; gap: 8px; }
  .ctrl { width: 42px; height: 42px; }
}