/* ============================================
   HERO V19 — Video carousel with per-slide content
   Homepage only. Scoped under .hero--v19
   ============================================ */

.hero--v19 {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: #0a0f1a;
    display: block;
    align-items: initial;
}

.hero--v19 .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    animation: none;
    transform: none;
    background-size: initial;
    background-position: initial;
}
.hero--v19 .hero__slide.active { opacity: 1; z-index: 5; }
.hero--v19 .hero__slide.fade-in {
    z-index: 6;
    animation: heroV19FadeIn 2.8s ease-in-out forwards;
}
.hero--v19 .hero__slide.fade-out {
    opacity: 1; z-index: 4;
    animation: heroV19FadeOut 2.8s ease-in-out forwards;
}
@keyframes heroV19FadeIn  { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes heroV19FadeOut { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }

.hero--v19 .hero__slide video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.hero--v19 .hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ============================================
   VIDEO TREATMENT — per-slide filters
   ============================================ */

/* Slide 1: City 1 — dusk cityscape, deepen shadows */
.hero--v19 .hero__slide[data-slide="0"] video {
    filter: brightness(0.82) contrast(1.15) saturate(1.12);
}

/* Slide 2: Ship — slightly cooler */
.hero--v19 .hero__slide[data-slide="1"] video {
    filter: brightness(0.85) contrast(1.10) saturate(0.95);
    object-position: 18% center;
}

/* Slide 3: Chicago — cinematic warmth */
.hero--v19 .hero__slide[data-slide="2"] video {
    filter: brightness(0.85) contrast(1.12) saturate(1.10);
}

/* Slide 4: Tunnel — dramatic, slightly desaturated */
.hero--v19 .hero__slide[data-slide="3"] video {
    filter: brightness(0.80) contrast(1.18) saturate(0.90);
}

/* Slide 5: City image — warm tones */
.hero--v19 .hero__slide[data-slide="4"] .hero__bg {
    filter: brightness(0.88) contrast(1.10) saturate(1.12);
}

/* Slide 6: Perth — rich, warm tones */
.hero--v19 .hero__slide[data-slide="5"] video {
    filter: brightness(0.83) contrast(1.14) saturate(1.08);
}


/* ============================================
   OVERLAYS — colour-matched CSS fades from left
   ============================================ */
.hero--v19 .hero__slide::before {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    background: none;
}

/* City 1 — dark navy fade matching site theme */
.hero--v19 .hero__slide[data-slide="0"]::before {
    background: linear-gradient(to right,
        rgba(12, 22, 42, 0.92) 0%,
        rgba(12, 22, 42, 0.80) 30%,
        rgba(12, 22, 42, 0.58) 50%,
        rgba(12, 22, 42, 0.32) 68%,
        rgba(12, 22, 42, 0.12) 82%,
        transparent 95%
    );
}

/* Ship — ocean teal, more solid left edge */
.hero--v19 .hero__slide[data-slide="1"]::before {
    background: linear-gradient(to right,
        rgba(10, 42, 62, 0.94) 0%,
        rgba(10, 42, 62, 0.88) 12%,
        rgba(12, 38, 58, 0.72) 28%,
        rgba(12, 34, 54, 0.50) 42%,
        rgba(14, 30, 50, 0.25) 58%,
        rgba(14, 28, 48, 0.08) 72%,
        transparent 88%
    );
}

/* Chicago — warm amber fade */
.hero--v19 .hero__slide[data-slide="2"]::before {
    background: linear-gradient(to right,
        rgba(22, 16, 10, 0.92) 0%,
        rgba(22, 16, 10, 0.86) 18%,
        rgba(20, 15, 10, 0.68) 36%,
        rgba(18, 14, 10, 0.45) 52%,
        rgba(18, 14, 10, 0.20) 68%,
        rgba(18, 14, 10, 0.06) 82%,
        transparent 94%
    );
}

/* Tunnel — deep dramatic fade */
.hero--v19 .hero__slide[data-slide="3"]::before {
    background: linear-gradient(to right,
        rgba(12, 12, 18, 0.76) 0%,
        rgba(12, 12, 18, 0.58) 24%,
        rgba(12, 12, 18, 0.32) 44%,
        rgba(12, 12, 18, 0.10) 60%,
        transparent 74%
    );
}

/* City image — warm fade for text readability */
.hero--v19 .hero__slide[data-slide="4"]::before {
    background: linear-gradient(to right,
        rgba(14, 18, 28, 0.74) 0%,
        rgba(14, 18, 28, 0.56) 24%,
        rgba(14, 18, 28, 0.30) 44%,
        rgba(14, 18, 28, 0.08) 60%,
        transparent 74%
    );
}

/* Perth — warm urban fade */
.hero--v19 .hero__slide[data-slide="5"]::before {
    background: linear-gradient(to right,
        rgba(14, 12, 18, 0.72) 0%,
        rgba(14, 12, 18, 0.54) 24%,
        rgba(14, 12, 18, 0.28) 44%,
        rgba(14, 12, 18, 0.08) 60%,
        transparent 74%
    );
}

/* Subtle top/bottom vignette */
.hero--v19 .hero__slide::after {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to top,
            rgba(8, 10, 18, 0.22) 0%,
            transparent 10%
        ),
        linear-gradient(to bottom,
            rgba(8, 10, 18, 0.15) 0%,
            transparent 6%
        );
}


/* ============================================
   HERO CONTENT — per-slide positioning
   ============================================ */
.hero--v19 .hero__content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 2rem;
    max-width: 720px;
    margin-left: max(2rem, calc((100% - var(--max-width, 1280px)) / 2 + 2rem));
    opacity: 1;
    transform: none;
    animation: none;
}

/* Eyebrow — small caps, spaced */
.hero--v19 .hero__eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 1.4rem;
    opacity: 1;
    animation: none;
}

/* HEADING — Serif, Ankura-style */
.hero--v19 .hero__heading {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    margin-bottom: 1.6rem;
    color: #fff;
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin-top: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
}
.hero--v19 .hero__heading--accent {
    color: var(--accent-light);
}

/* Slide 1 stacked keywords — title case, serif */
.hero--v19 .hero__words {
    margin-bottom: 1.6rem;
}
.hero--v19 .hero__word {
    display: block;
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: #fff;
    opacity: 1;
    transform: none;
    animation: none;
}
.hero--v19 .hero__word--accent {
    color: var(--accent-light);
}

/* Paragraph */
.hero--v19 .hero__text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.60);
    margin-bottom: 2rem;
    max-width: 500px;
    font-weight: 300;
    opacity: 1;
    animation: none;
}

/* Buttons */
.hero--v19 .hero__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 1;
    animation: none;
}
.hero--v19 .hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    line-height: 1;
}
.hero--v19 .hero__btn--primary {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.30);
    backdrop-filter: blur(4px);
}
.hero--v19 .hero__btn--primary:hover {
    background: rgba(255,255,255,0.10);
    border-color: var(--accent);
    color: var(--accent-light);
}
.hero--v19 .hero__btn .arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.9em;
}
.hero--v19 .hero__btn:hover .arrow { transform: translateX(4px); }


/* ============================================
   DOTS NAVIGATION — small translucent circles
   ============================================ */
.hero--v19 .hero__dots {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 10px;
    align-items: center;
}
.hero--v19 .hero__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.20);
    cursor: pointer;
    transition: all 0.4s ease;
    border: none; padding: 0;
}
.hero--v19 .hero__dot:hover { background: rgba(255,255,255,0.45); }
.hero--v19 .hero__dot.active { background: rgba(255,255,255,0.70); }

.hero--v19 .hero__progress {
    position: absolute; top: 0; left: 0;
    height: 2px; z-index: 25;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transition: width 0.1s linear;
}



/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .hero--v19 { min-height: 100vh; min-height: 100svh; }
    .hero--v19 .hero__content { padding: 0 1.5rem; max-width: 100%; margin-left: 0; }
    .hero--v19 .hero__word { font-size: 1.5rem; }
    .hero--v19 .hero__heading { font-size: 1.4rem; }
    .hero--v19 .hero__text { font-size: 0.95rem; }
    .hero--v19 .hero__dots { bottom: 1.5rem; }
    .hero--v19 .hero__buttons { flex-direction: column; }
    .hero--v19 .hero__btn { justify-content: center; }

    /* Reframe videos for portrait viewport — shift focal points */
    .hero--v19 .hero__slide[data-slide="0"] video { object-position: 40% center; }  /* City 1 — keep buildings visible */
    .hero--v19 .hero__slide[data-slide="1"] video { object-position: 45% center; }  /* Ship — centred on ship */
    .hero--v19 .hero__slide[data-slide="2"] video { object-position: 45% center; }  /* Chicago — centre on skyline */
    .hero--v19 .hero__slide[data-slide="3"] video { object-position: center center; } /* Tunnel — centred is fine */
    .hero--v19 .hero__slide[data-slide="4"] .hero__bg { background-position: 45% center; } /* City image */
    .hero--v19 .hero__slide[data-slide="5"] video { object-position: 55% center; }  /* Perth — keep cityscape */
}