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

:root {
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

html, body { height: 100%; }

body {
    font-family: var(--font);
    background: #0d0b0a;
    color: #fff;
    overflow: hidden;
}

.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ---------- Background video ---------- */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 70% 30%, #3a1d10 0%, #1a0d07 60%, #0d0b0a 100%);
}

.hero__bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: var(--video-d-x, center) var(--video-d-y, center);
}

/* Fill the whole screen, cropping edges (may look zoomed) */
.hero__bg-main { object-fit: cover; z-index: 1; }

/* Show the entire video without cropping */
.hero__bg-main--contain { object-fit: contain; z-index: 1; }

/* Blurred, scaled copy behind a "contain" video so the empty area
   is filled elegantly instead of showing plain bars */
.hero__bg-blur {
    object-fit: cover;
    z-index: 0;
    filter: blur(30px) brightness(0.55) saturate(1.1);
    transform: scale(1.12);
}

/* Crossfade (blur) mode: two stacked videos fading into each other at loop */
.hero__cf { position: absolute; inset: 0; z-index: 1; }
.cf-layer {
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
}
.cf-layer.is-active { opacity: 1; }

.hero__fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 30%, #f0c58c 0%, #c47a3d 35%, #7d3f1e 75%, #35150c 100%);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.25) 100%);
}

/* Right-side darkening so the top-right texts and menu stay readable */
.hero__overlay-right {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* ---------- Layout (CMS-driven absolute positions on desktop) ---------- */
.hero__logo { z-index: 3; }
.hero__logo-text {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
}
.hero__logo-text sup { font-size: 14px; }

.text-block { line-height: 1.35; margin-bottom: 2px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
a.text-block--link { display: block; text-decoration: none; cursor: pointer; transition: opacity .15s; }
a.text-block--link:hover { opacity: .78; text-decoration: underline; text-underline-offset: 3px; }

.menu-item {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
}

.menu-item--icon-left { flex-direction: row-reverse; }

.menu-item__text {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.15;
    text-shadow: 0 1px 10px rgba(0,0,0,.4);
    transition: color .2s ease;
}

.menu-item--icon-left .menu-item__text { text-align: left; }

/* Each line carries its own inline style from the CMS (menu_line_style). */
.menu-item__l1, .menu-item__l2 { display: block; transition: color .2s ease; }

.menu-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,.4));
    transition: transform .2s ease;
}

.menu-item:hover { transform: translateX(-4px); }
.menu-item:hover .menu-item__text,
.menu-item:hover .menu-item__l1,
.menu-item:hover .menu-item__l2 { color: var(--menu-hover) !important; }
.menu-item:hover .menu-item__icon { transform: scale(1.12); }

/*
 * Default menu stack — mirrors the original hardcoded layout on
 * sumbersolusioptimal.com/web-template/altrlab (.hero__menu).
 * Used when CMS position fields are empty.
 */
.hero__menu {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 34px;
    align-items: flex-end;
}
.hero__menu .menu-item {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

/* prevent long menu/text lines from causing horizontal overflow */
.text-block, .menu-item__text { overflow-wrap: anywhere; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .hero__menu { right: 40px; gap: 28px; }
}
@media (max-width: 980px) {
    .hero__menu { right: 32px; gap: 22px; }
}

/* Tablet: keep absolute layout; per-item overrides come from CMS media CSS */
@media (min-width: 821px) and (max-width: 1024px) {
    .hero { overflow: hidden; }
    .hero__bg video {
        object-position: var(--video-t-x, center) var(--video-t-y, center);
    }
}

/* Phones: stack into a scrollable column unless item has mobile position (keep-abs) */
@media (max-width: 820px) {
    html, body { height: auto; }
    body { overflow-x: hidden; overflow-y: auto; }

    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
        display: flex;
        flex-direction: column;
        padding: 20px 18px 48px;
        gap: 10px;
    }

    .hero__bg { position: fixed; }

    /* Mobile video crop offset — from CMS (--video-m-x / --video-m-y on .hero) */
    .hero__bg video {
        object-position: var(--video-m-x, -150px) var(--video-m-y, center);
    }

    .hero-posed:not(.hero-posed--keep-abs) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 3;
    }

    .hero-posed--keep-abs {
        position: absolute !important;
        z-index: 3;
    }

    .hero__logo { order: 1; align-self: flex-start; }
    .hero__logo-text { font-size: 24px; }
    .hero__logo img { max-width: 84px; height: auto; }

    .text-block--s1:not(.hero-posed--keep-abs) { order: 2; align-self: flex-end; text-align: right; zoom: .75; }
    .text-block--s2:not(.hero-posed--keep-abs) { order: 3; align-self: flex-end; text-align: right; }
    .text-block--s3:not(.hero-posed--keep-abs) { order: 4; align-self: flex-start; margin-top: 8px; }
    .text-block--s4:not(.hero-posed--keep-abs) { order: 5; align-self: flex-start; }

    .hero__menu {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        order: 10;
        align-self: flex-end;
        gap: 14px;
        margin-top: 8px;
    }
    .hero__menu .menu-item__text { zoom: .5; }

    .menu-item:not(.hero-posed--keep-abs) {
        order: 10;
        align-self: flex-end;
        margin-top: 8px;
    }
    .menu-item:not(.hero-posed--keep-abs) .menu-item__text { zoom: .5; }
    .menu-item,
    .menu-item--icon-left { flex-direction: row; }
    .menu-item__text,
    .menu-item--icon-left .menu-item__text { text-align: right; }
}

@media (max-width: 480px) {
    .hero { padding: 18px 16px 48px; }
    .hero__logo-text { font-size: 22px; }
    .hero__logo img { max-width: 70px; height: auto; }
}