:root {
  --volvo-ink: #141414;
  --volvo-bg: #f4f1ec;
  --white: #ffffff;
}

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

html, body { background: var(--volvo-bg); color: var(--volvo-ink); font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.site-header { background: var(--volvo-ink); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.logo { font-weight: 600; letter-spacing: .15em; font-size: 20px; }
.nav { display: none; gap: 32px; }
.nav a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.nav a:hover { color: #fff;}
@media (min-width: 768px) { .nav { display: flex; } }


.slides { position: absolute; inset: 0; }
.slide {position: absolute; inset: 0;background-size: cover; background-position: center;opacity: 0; transition: opacity 1s ease-in-out;display: flex; align-items: flex-end;}
.slide.is-active { opacity: 1; z-index: 1; }
.overlay {position: absolute; inset: 0;background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.2) 50%, transparent);}
.slide-content { position: relative; z-index: 2; color: #fff; padding-bottom: 64px; max-width: 640px; }
@media (min-width: 768px) {
  .slide { align-items: center; }
  .slide-content { padding-bottom: 0; }
}

.eyebrow { text-transform: uppercase; letter-spacing: .25em; font-size: 12px; font-weight: 500; opacity: .85; margin-bottom: 16px; }
.title { font-weight: 300; font-size: clamp(32px, 5vw, 60px); line-height: 1.05; }
.desc { margin-top: 18px; font-size: clamp(15px, 1.4vw, 18px); color: rgba(255,255,255,.9); max-width: 520px; }
.cta {display: inline-flex; align-items: center; gap: 8px;margin-top: 28px; padding: 14px 28px;background: transparent;border: 1px solid rgba(255,255,255,.7);color: white;}
.cta:hover { background: #fff; color: var(--volvo-ink); }
.nav-btn {position: absolute; top: 50%; transform: translateY(-50%);z-index: 5; width: 48px; height: 48px;border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25);color: #fff; font-size: 24px; cursor: pointer; backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
transition: background .2s, color .2s;
}
.nav-btn:hover { background: #fff; color: var(--volvo-ink);}
.nav-btn.prev { left: 16px; }
.nav-btn.next { right: 16px; }
@media (min-width: 768px) { .nav-btn { display: inline-flex; } }

.dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 12px; }
.dot { width: 40px; height: 3px; background: rgba(255,255,255,.3); border: 0; padding: 0; cursor: pointer; overflow: hidden; position: relative; }
.dot span { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s ease-out; }
.dot.is-active span { transform: scaleX(1); }