.almas-slider-container {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 90vh;
    /* Increased for premium look */
    min-height: 600px;
    overflow: hidden;
    background: #000;
}

/* Fix Logo Fitting */
.header-logo img {
    max-height: 85px !important;
    width: auto !important;
    display: block;
    object-fit: contain;
}

/* Ensure header container is still centered but header itself is full width */
.transparent-header .container {
    max-width: 1400px;
}

.transparent-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 15px 0;
}

.almas-slides-wrapper {
    width: 100%;
    height: 100%;
}

.almas-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.almas-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    transition: transform 8s linear;
}

.almas-slide.active .slide-background {
    transform: scale(1);
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    color: #fff;
    width: 100%;
}

.content-inner {
    max-width: 600px;
    padding-left: 50px;
}

.slide-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff !important;
}

.slide-excerpt {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* ==================================================================
   Controls

   Arrows sit on the left and right edges rather than flanking the dots
   in a bottom cluster -- three empty circles in a row under the slide
   read as unfinished. The glyphs were also bare ← / → text in
   a 50px circle with no centring, which is why they sat off-centre.
   ================================================================== */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease, background .3s ease, color .3s ease,
        border-color .3s ease, transform .3s ease;
}

.slider-nav.prev {
    left: 28px;
}

.slider-nav.next {
    right: 28px;
}

/* Revealed on hover, so they do not sit permanently over the artwork. */
.almas-slider-container:hover .slider-nav,
.slider-nav:focus-visible {
    opacity: 1;
}

.slider-nav:hover {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.slider-nav.prev:hover {
    transform: translateY(-50%) translateX(-2px);
}

.slider-nav.next:hover {
    transform: translateY(-50%) translateX(2px);
}

.slider-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* On touch there is no hover to reveal them with, so they stay visible. */
@media (hover: none) {
    .slider-nav {
        opacity: 1;
        width: 44px;
        height: 44px;
    }

    .slider-nav.prev {
        left: 12px;
    }

    .slider-nav.next {
        right: 12px;
    }
}

/* Dots: bars rather than circles, the active one stretching. Sat in a
   blurred pill so they stay legible over a light photo. */
.slider-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(12, 20, 30, .30);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .35s cubic-bezier(.22, 1, .36, 1), background .3s ease;
}

.dot:hover {
    background: rgba(255, 255, 255, .75);
}

.dot.active {
    width: 26px;
    background: #fff;
}

.dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .slider-nav,
    .dot {
        transition: none;
    }
}

@media (max-width: 768px) {
    .slide-title {
        font-size: 2.5rem;
    }

    .content-inner {
        padding-left: 20px;
    }
}

/* Home V2 slider: remove top/bottom cut */
.almas-slider-container {
    /* Superseded by the Sizing control; kept harmless for saved settings. */
    min-height: 0;
}

.almas-slide,
.almas-slides-wrapper {
    height: 100%;
}

/* Fit and position come from the Customizer rather than being fixed here.
   `cover` was hardcoded, so an image whose shape did not match the frame was
   always cropped and there was no way to ask for the whole picture. */
.slide-background {
    background-size: var(--slide-fit, cover) !important;
    background-repeat: no-repeat;
    background-position: var(--slide-pos, center center);
    transform: none !important;
}

.almas-slide.active .slide-background {
    transform: none !important;
}

/* ==================================================================
   Device variants
   Both are in the DOM; CSS decides which one shows. Picking server-side
   would bake one device's slides into a cached page.
   ================================================================== */
/* The Space Above / Space Below settings are margins on the slider (or on its
   boxed wrapper). The section around them has no padding or border, so those
   margins would collapse straight through it and escape -- the gap would land
   outside the section instead of between the header and the slider. A block
   formatting context keeps them where they were asked for. */
.home-v2-slider {
    display: flow-root;
}

/* A boxed slider is wrapped in a container carrying the same device class, so
   the hidden variant's wrapper goes with it -- otherwise the inactive device
   leaves an empty container on the page. */
.almas-slider-container.is-m,
.home-v2-slider-box.is-m {
    display: none;
}

@media (max-width: 767.98px) {

    .almas-slider-container.is-d,
    .home-v2-slider-box.is-d {
        display: none;
    }

    .almas-slider-container.is-m,
    .home-v2-slider-box.is-m {
        display: block;
    }
}

/* ==================================================================
   Customizer-driven sizing
   ================================================================== */
/* Fixed height: fills the space and crops whatever does not fit. */
.almas-slider-container.size-height {
    height: var(--slider-h, 90vh);
}

/* Match image ratio: the box takes the shape of the picture, so an image at
   the recommended size is shown whole with nothing cropped. This is what the
   old "compact mode" checkbox was really doing -- fixing a 3.2:1 banner -- and
   it is now a proper choice rather than a hidden toggle. */
.almas-slider-container.size-ratio {
    height: auto;
    aspect-ratio: var(--slider-ratio, 3.2);
}

/* aspect-ratio is ignored where it is unsupported, which would collapse the
   slider to nothing; a min-height keeps it usable there. */
@supports not (aspect-ratio: 1) {
    .almas-slider-container.size-ratio {
        height: var(--slider-h, 90vh);
    }
}

.almas-slider-container.size-ratio .almas-slide,
.almas-slider-container.size-ratio .almas-slides-wrapper {
    height: 100%;
}

/* On Contain the image does not reach every edge, and the base rule's black
   would show as bars around it. Nothing invented: whatever is behind the
   slider shows through instead. */
.almas-slider-container {
    background: var(--slider-pad-bg, transparent);
    /* Set per device in the Customizer, default 0. The base rule's
       `overflow: hidden` is what makes the slides follow the corners. */
    border-radius: var(--slider-radius, 0);
}

/* The wrapper and the slides sit inside a clipped box, so they need no radius
   of their own -- but a leftover rule gave them a fixed one, which showed as a
   second, differently-rounded edge when the container's was changed. */
.almas-slides-wrapper,
.almas-slide,
.slide-background {
    border-radius: inherit;
}

.almas-slider-container .slide-overlay {
    background: rgba(0, 0, 0, var(--slider-overlay, .35));
}

.almas-slider-container.no-arrows .slider-nav,
.almas-slider-container.no-arrows .slider-arrow,
.almas-slider-container.no-arrows .slider-prev,
.almas-slider-container.no-arrows .slider-next {
    display: none;
}

.almas-slider-container.no-dots .slider-dots,
.almas-slider-container.no-dots .slider-pagination {
    display: none;
}

/* ==================================================================
   Slide transitions

   These previously did nothing: the template wrote data-transition but
   neither the JS nor the CSS read it, so every slide cross-faded no
   matter which effect was chosen. Each one is now implemented against
   the .entering / .exiting / .active classes the JS already sets.
   ================================================================== */
.almas-slide {
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1),
        filter .8s ease, clip-path .8s cubic-bezier(.22, 1, .36, 1);
}

/* Slide (horizontal). Every offset is multiplied by --slide-dir (1 or -1), so
   one Direction setting per slide flips the whole effect -- and the incoming
   slide always leaves by the side opposite the one it arrived from. */
.almas-slide[data-transition="slide"] {
    transform: translateX(calc(100% * var(--slide-dir, 1)));
}

.almas-slide[data-transition="slide"].active {
    transform: translateX(0);
}

.almas-slide[data-transition="slide"].exiting {
    transform: translateX(calc(-100% * var(--slide-dir, 1)));
}

/* Slide (vertical). The same setting reads as below/above here. */
.almas-slide[data-transition="slide-up"] {
    transform: translateY(calc(100% * var(--slide-dir, 1)));
}

.almas-slide[data-transition="slide-up"].active {
    transform: translateY(0);
}

.almas-slide[data-transition="slide-up"].exiting {
    transform: translateY(calc(-100% * var(--slide-dir, 1)));
}

/* Zoom in */
.almas-slide[data-transition="zoom"] {
    transform: scale(1.18);
}

.almas-slide[data-transition="zoom"].active {
    transform: scale(1);
}

/* Zoom out */
.almas-slide[data-transition="zoom-out"] {
    transform: scale(.85);
}

.almas-slide[data-transition="zoom-out"].active {
    transform: scale(1);
}

/* Blur */
.almas-slide[data-transition="blur"] {
    filter: blur(14px);
}

.almas-slide[data-transition="blur"].active {
    filter: blur(0);
}

/* Flip */
.almas-slide[data-transition="flip"] {
    transform: perspective(1400px) rotateY(calc(12deg * var(--slide-dir, 1)));
    transform-origin: left center;
}

/* transform-origin takes no multiplier, so the hinge side is switched by
   selector rather than by the variable. */
.almas-slide[data-transition="flip"][data-dir="-1"] {
    transform-origin: right center;
}

.almas-slide[data-transition="flip"].active {
    transform: perspective(1400px) rotateY(0);
}

/* Reveal (wipe). inset() sides take no multiplier either, so the reversed
   wipe is its own pair of rules. */
.almas-slide[data-transition="reveal"] {
    clip-path: inset(0 0 0 100%);
}

.almas-slide[data-transition="reveal"][data-dir="-1"] {
    clip-path: inset(0 100% 0 0);
}

.almas-slide[data-transition="reveal"].active {
    clip-path: inset(0 0 0 0);
}

.almas-slide[data-transition="reveal"].exiting {
    clip-path: inset(0 100% 0 0);
}

.almas-slide[data-transition="reveal"][data-dir="-1"].exiting {
    clip-path: inset(0 0 0 100%);
}

/* Anyone who has asked for less motion gets a plain cross-fade. */
@media (prefers-reduced-motion: reduce) {

    .almas-slide,
    .almas-slide.active,
    .almas-slide.exiting {
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: opacity .3s ease !important;
    }
}

/* ==================================================================
   Shard effects (slice / mosaic)

   The pieces are generated by assets/slider-effects.js; this only
   describes how they move. --shard-from is set per piece so rows or
   columns come in from alternating sides.
   ================================================================== */
.slide-shards {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.slide-shard {
    position: absolute;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(var(--shard-from, -100%));
    transition: transform .75s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}

.slide-shards.is-in .slide-shard {
    opacity: 1;
    transform: translateX(0);
}

/* Mosaic pieces also settle out of a slight scale, which reads as tiles
   dropping into place rather than merely sliding. */
.slide-shards.is-mosaic .slide-shard {
    transform: translateX(var(--shard-from, -60%)) scale(.82);
}

.slide-shards.is-in.is-mosaic .slide-shard {
    transform: translateX(0) scale(1);
}

/* ==================================================================
   3D rotate
   ================================================================== */
.almas-slide[data-transition="rotate-3d"] {
    transform: perspective(1600px) rotateY(calc(35deg * var(--slide-dir, 1))) translateX(calc(18% * var(--slide-dir, 1)));
    transform-origin: right center;
}

.almas-slide[data-transition="rotate-3d"][data-dir="-1"] {
    transform-origin: left center;
}

.almas-slide[data-transition="rotate-3d"].active {
    transform: perspective(1600px) rotateY(0) translateX(0);
}

.almas-slide[data-transition="rotate-3d"].exiting {
    transform: perspective(1600px) rotateY(calc(-35deg * var(--slide-dir, 1))) translateX(calc(-18% * var(--slide-dir, 1)));
}

@media (prefers-reduced-motion: reduce) {

    .slide-shard,
    .slide-shards.is-in .slide-shard {
        transition: none;
        transform: none;
        opacity: 1;
    }
}