/* =========================================================
   Primo Paints — homepage hero slider
   Full-bleed photography, brand scrim, numbered slide tabs.
   The previous split hero lives in backups/hero-2026-08-07/.
   ========================================================= */

/* Full-bleed: the slider fills the viewport below the sticky header.
   The header is 78px here (70px ≤900px, 62px ≤720px — see primo-enhance.css),
   and it sits in normal flow, so subtracting it makes the hero end exactly at
   the fold instead of pushing its own bottom off-screen.
   svh tracks the *small* viewport height, so mobile browsers hiding and showing
   their address bar don't resize the hero mid-scroll.
   min-height guards short landscape screens, where an exact viewport height
   would leave no room for the headline and the tabs at once. */
.hero-slider {
    position: relative;
    height: calc(100vh - 78px);
    height: calc(100svh - 78px);
    min-height: 460px;
    overflow: hidden;
    background: var(--brand-dark);
    isolation: isolate;
}

/* ---------- Slides ---------- */
.hs-track { position: absolute; inset: 0; }

.hs-slide {
    position: absolute; inset: 0;
    display: grid; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.hs-slide.is-active {
    opacity: 1; visibility: visible;
    transition: opacity .9s var(--ease), visibility 0s;
    z-index: 1;
}

.hs-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hs-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.06);
    transition: transform 9s linear;
}
/* Slow Ken-Burns drift while a slide is on screen. */
.hs-slide.is-active .hs-media img { transform: scale(1); }

/* Brand scrim: dark on the left where the copy sits, clearing to the right so
   the photography still reads. A second bottom wash keeps the tabs legible. */
.hs-slide::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(9, 16, 38, .93) 0%, rgba(9, 16, 38, .78) 34%, rgba(9, 16, 38, .30) 62%, rgba(9, 16, 38, .12) 100%),
        linear-gradient(0deg, rgba(9, 16, 38, .72) 0%, rgba(9, 16, 38, 0) 42%);
}

/* ---------- Copy ---------- */
.hs-inner { position: relative; width: 100%; }
.hs-copy { max-width: 640px; padding-bottom: 90px; color: #fff; }

.hs-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Sora', sans-serif; font-size: .78rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: #fff;
    margin-bottom: 20px;
}
.hs-eyebrow::before {
    content: ""; width: 34px; height: 3px; border-radius: 3px;
    background: var(--accent, var(--accent)); flex: none;
}

.hs-title {
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
    margin-bottom: 20px; text-wrap: balance;
}
.hs-title em {
    font-style: normal; position: relative; white-space: nowrap;
    color: #fff;
}
.hs-title em::after {
    content: ""; position: absolute; left: -1%; right: -1%; bottom: .1em; height: .16em;
    background: var(--accent); border-radius: 4px; z-index: -1; opacity: .85;
}

.hs-text {
    font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.65;
    color: rgba(255, 255, 255, .82); max-width: 520px; margin-bottom: 34px;
}

.hs-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-glass {
    background: rgba(255, 255, 255, .12); color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .38);
    backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.btn-glass:hover { background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff; }

/* Entrance: each element rises a beat after the one above it. */
.hs-slide .hs-eyebrow,
.hs-slide .hs-title,
.hs-slide .hs-text,
.hs-slide .hs-actions {
    opacity: 0; transform: translateY(26px);
}
.hs-slide.is-active .hs-eyebrow,
.hs-slide.is-active .hs-title,
.hs-slide.is-active .hs-text,
.hs-slide.is-active .hs-actions {
    opacity: 1; transform: translateY(0);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hs-slide.is-active .hs-eyebrow { transition-delay: .18s; }
.hs-slide.is-active .hs-title { transition-delay: .28s; }
.hs-slide.is-active .hs-text { transition-delay: .38s; }
.hs-slide.is-active .hs-actions { transition-delay: .48s; }

/* ---------- Arrows ---------- */
.hs-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; color: #fff;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.hs-arrow:hover { background: rgba(255, 255, 255, .26); border-color: #fff; }
.hs-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hs-prev { left: 26px; }
.hs-next { right: 26px; }
.hs-prev:hover { transform: translateY(-50%) translateX(-3px); }
.hs-next:hover { transform: translateY(-50%) translateX(3px); }

/* At laptop widths the container gutter is narrow, so a permanently visible
   left arrow lands on top of the paragraph. Keep the arrows out of the way and
   fade them in only while the pointer is over the hero (or an arrow has
   keyboard focus). Pointer-less devices keep them shown — nothing to hover. */
@media (hover: hover) {
    .hs-arrow {
        opacity: 0; pointer-events: none;
        transition: background .25s, border-color .25s,
                    transform .25s var(--ease), opacity .25s var(--ease);
    }
    .hero-slider:hover .hs-arrow,
    .hero-slider:focus-within .hs-arrow {
        opacity: 1; pointer-events: auto;
    }
}

/* ---------- Numbered tabs ---------- */
.hs-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px; z-index: 3; }
.hs-dots { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 26px; }

.hs-dot {
    position: relative; text-align: left; cursor: pointer;
    background: none; border: 0; padding: 0 0 14px; color: rgba(255, 255, 255, .6);
    font: inherit; transition: color .25s;
}
.hs-dot:hover, .hs-dot.is-active { color: #fff; }
.hs-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.hs-dot .n {
    display: block; font-family: 'Sora', sans-serif; font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; opacity: .7; margin-bottom: 4px;
}
.hs-dot .lbl {
    display: block; font-family: 'Sora', sans-serif; font-size: .88rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-dot .rule {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px;
    background: rgba(255, 255, 255, .22); overflow: hidden; display: block;
}
.hs-dot .rule i {
    display: block; height: 100%; width: 0; border-radius: 3px;
    background: #fff; transform-origin: left center;
}
/* The active tab's rule fills over the autoplay interval (JS sets --dur). */
.hs-dot.is-active .rule i { width: 100%; transform: scaleX(0); transform-origin: left center; }
.hs-dot.is-active.is-running .rule i {
    animation: hs-fill var(--dur, 6.5s) linear forwards;
}
@keyframes hs-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Screen-reader announcement of slide changes. */
.hs-live {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .hs-arrow { display: none; }
    .hs-copy { padding-bottom: 120px; }
}

/* Header shrinks to 70px here, so the hero grows to match. */
@media (max-width: 900px) {
    .hero-slider {
        height: calc(100vh - 70px);
        height: calc(100svh - 70px);
    }
}

@media (max-width: 720px) {
    /* Header is 62px on phones. */
    .hero-slider {
        height: calc(100vh - 62px);
        height: calc(100svh - 62px);
    }
    .hs-slide::before {
        /* Portrait screens need a flat wash, not a left-to-right one. */
        background:
            linear-gradient(180deg, rgba(9, 16, 38, .55) 0%, rgba(9, 16, 38, .80) 55%, rgba(9, 16, 38, .93) 100%);
    }
    .hs-copy { padding-bottom: 104px; }
    .hs-text { margin-bottom: 26px; }
    .hs-actions .btn { flex: 1; min-width: 150px; justify-content: center; }

    /* Tabs collapse to plain progress bars — the labels do not fit. */
    .hs-bar { bottom: 26px; }
    .hs-dots { gap: 10px; }
    .hs-dot { padding-bottom: 0; }
    .hs-dot .n, .hs-dot .lbl { display: none; }
    .hs-dot .rule { position: static; height: 4px; }
    .hs-dot { min-height: 22px; display: flex; align-items: center; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .hs-slide, .hs-slide.is-active { transition: opacity .01s; }
    .hs-media img, .hs-slide.is-active .hs-media img { transform: none; transition: none; }
    .hs-slide.is-active .hs-eyebrow,
    .hs-slide.is-active .hs-title,
    .hs-slide.is-active .hs-text,
    .hs-slide.is-active .hs-actions { transition: none; transform: none; opacity: 1; }
    .hs-dot.is-active.is-running .rule i { animation: none; transform: scaleX(1); }
    .hs-arrow:hover, .hs-prev:hover, .hs-next:hover { transform: translateY(-50%); }
    .hs-arrow { transition: opacity .01s; }
}