/* The home page slider (src/lib/slider.ts draws it, slider.js moves it): the old Slider Revolution slider's look. */
.nd-slider { position: relative; width: 100%; height: var(--nd-h, 100vh); overflow: hidden; background: transparent; }
.nd-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; z-index: 1; }
.nd-slide.nd-active { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; z-index: 2; }
.nd-slider .nd-slide-bg { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 50%; }
.nd-grid { position: absolute; left: 50%; top: 50%; width: var(--nd-gw, 1300px); height: var(--nd-gh, 550px); transform: translate(-50%, -50%) scale(var(--nd-s, 1)); transform-origin: 50% 50%; }
.nd-layer { position: absolute; display: block; color: #000; font-family: "DM Sans", sans-serif; opacity: 0; transition: opacity .8s ease .3s, translate .8s ease .3s; translate: 0 20px; }
.nd-active .nd-layer { opacity: 1; translate: 0 0; }
.nd-shape { border-radius: 25px; background: rgba(203, 213, 205, .86); left: var(--x); top: var(--y); width: var(--w); height: var(--h); transition-delay: .1s; }
.nd-label { font-size: 14px; font-weight: 500; line-height: 25px; letter-spacing: 5px; text-transform: uppercase; width: var(--w); text-align: var(--ta); left: calc(50% - var(--w) / 2 + var(--x)); top: calc(50% + var(--y)); transform: translateY(-50%); }
h1.nd-title { margin: 0; padding: 0; color: #000; font-family: "DM Sans", sans-serif; letter-spacing: normal; text-transform: none; }
.nd-title { font-size: var(--fs); font-weight: 400; line-height: var(--lh); width: var(--w); text-align: var(--ta); left: calc(50% - var(--w) / 2 + var(--x)); top: calc(50% + var(--y)); transform: translateY(-50%); transition-delay: .5s; }
.nd-button { font-size: var(--fs); font-weight: 500; line-height: var(--lh); width: var(--w); height: var(--h); padding: 0 var(--p); border: 1px solid #000; border-radius: 25px; text-align: center; white-space: nowrap; box-sizing: border-box; left: calc(50% + var(--x)); bottom: var(--y); transform: translateX(-50%); color: #000; text-decoration: none; transition: opacity .8s ease .7s, translate .8s ease .7s, background-color .2s, color .2s; }
/* hover: the fill sweeps in from the left and the text turns white, as on the site's other outlined buttons
   (".qodef-button.qodef-layout--outlined"; asked for in October 2026, the old slider's button had none) */
.nd-button { overflow: hidden; isolation: isolate; }
.nd-button::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: #000; border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.nd-button:hover { color: #fff; }
.nd-button:hover::after { transform: scaleX(1); transform-origin: left; }
.nd-slider[data-level="1"] .nd-layer { --x: var(--x1); --y: var(--y1); --w: var(--w1); --h: var(--h1); --fs: var(--fs1); --lh: var(--lh1); --ta: var(--ta1); --p: var(--p1); }
.nd-slider[data-level="2"] .nd-layer { --x: var(--x2); --y: var(--y2); --w: var(--w2); --h: var(--h2); --fs: var(--fs2); --lh: var(--lh2); --ta: var(--ta2); --p: var(--p2); }
.nd-slider[data-level="3"] .nd-layer { --x: var(--x3); --y: var(--y3); --w: var(--w3); --h: var(--h3); --fs: var(--fs3); --lh: var(--lh3); --ta: var(--ta3); --p: var(--p3); }
.nd-slider[data-level="4"] .nd-layer { --x: var(--x4); --y: var(--y4); --w: var(--w4); --h: var(--h4); --fs: var(--fs4); --lh: var(--lh4); --ta: var(--ta4); --p: var(--p4); }
.nd-slider[data-level="1"] .nd-button.nd-mid1, .nd-slider[data-level="2"] .nd-button.nd-mid2,
.nd-slider[data-level="3"] .nd-button.nd-mid3, .nd-slider[data-level="4"] .nd-button.nd-mid4 { bottom: auto; top: calc(50% + var(--y)); transform: translate(-50%, -50%); }
/* the bullets (the old slider's "qodef-rev--bullets") */
.nd-bullets { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); display: flex; z-index: 5; }
.nd-bullet { position: relative; height: 11px; width: 42px; padding: 5px 0; margin: 0 5px; border: 0; background: transparent; cursor: pointer; transition: width .2s ease-out; }
.nd-bullet::after { content: ""; position: absolute; left: 0; height: 1px; width: 100%; top: 5px; background-color: #fff; opacity: .5; }
.nd-bullet::before { content: ""; position: absolute; left: 0; height: 1px; width: 0; top: 5px; background-color: #fff; }
.nd-bullet.nd-selected { width: 100px; }
.nd-bullet.nd-selected::before { animation: nd-progress 3.5s forwards; }
@keyframes nd-progress { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .nd-slide, .nd-layer { transition: none; } .nd-bullet.nd-selected::before { animation: none; width: 100%; } }