/* ROOTWAY hero — replace the previous hero CSS; load after Bootstrap/style.css. */
.hero-section {
    --hero-red: var(--rootway-red, #b31f23);
    --hero-red-dark: var(--rootway-red-dark, #8f191d);
    --hero-ink: var(--rootway-ink, #171d21);
    --hero-white: #fff;
    --hero-text: #f0f1f2;
    --hero-height: clamp(36rem, 100vh, 60rem);
    --hero-fade: 900ms;
    --hero-ease: cubic-bezier(.22, 1, .36, 1);
    --hero-control-offset: max(1rem, env(safe-area-inset-bottom, 0px));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: var(--hero-ink);
    color: var(--hero-white);
}

@supports (height: 100svh) {
    .hero-section { --hero-height: clamp(36rem, 100svh, 60rem); }
}

.hero-section,
.hero-section *,
.hero-section *::before,
.hero-section *::after { box-sizing: border-box; }

.hero-section .carousel { min-height: var(--hero-height); }

/* Shared grid tracks reserve the tallest slide's height, including wrapped text. */
.hero-section .carousel-inner {
    display: grid;
    min-height: var(--hero-height);
    overflow: hidden;
}
.hero-section .carousel-inner::after { display: none; }
.hero-section .carousel-item {
    grid-area: 1 / 1;
    display: block;
    float: none;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: var(--hero-height);
    margin: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}
.hero-section .carousel-item:is(.active, .carousel-item-next, .carousel-item-prev) {
    visibility: visible;
}
.hero-section .carousel-item.active { pointer-events: auto; }
.hero-section .is-sliding .carousel-item { pointer-events: none; }

.hero-section .hero-media,
.hero-section .hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-section .hero-media { z-index: 0; background: var(--hero-ink); }
.hero-section .hero-image,
.hero-section .hero-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--hero-media-position, center);
}
.hero-section .hero-image { background: var(--hero-ink); }
.hero-section .hero-video {
    opacity: 0;
    transition: opacity 450ms ease;
}
.hero-section .hero-video.is-playing { opacity: 1; }
.hero-section .hero-media--brand { background: var(--hero-ink); }
.hero-section .hero-media--brand .hero-image--logo {
    inset: 26% auto auto 50%;
    width: min(76%, 50rem);
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%);
    background: transparent;
}
.hero-section .hero-overlay {
    z-index: 1;
    background:
        linear-gradient(0deg, rgb(8 12 15 / 92%) 0%, rgb(8 12 15 / 68%) 40%, transparent 85%),
        linear-gradient(90deg, rgb(8 12 15 / 45%), rgb(8 12 15 / 12%));
}
/* Keep the white logo bright when it is used as the fallback image. */
.hero-section .hero-media--brand + .hero-overlay { background: none; }
.hero-section .hero-slide-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    min-height: var(--hero-height);
    height: 100%;
}
.hero-section .hero-slide-inner > .container {
    width: 100%;
    height: auto !important; /* Override the supplied Bootstrap h-100 utility. */
}
.hero-section .hero-content {
    width: 100%;
    max-width: 54rem;
    min-width: 0;
    padding-block: clamp(9rem, 18vh, 13rem) 9rem;
    overflow-wrap: anywhere;
}
.hero-section .hero-media--brand ~ .hero-slide-inner .hero-content {
    padding-top: max(16rem, 40vh);
}
.hero-section .hero-title {
    margin: 0 0 1.25rem;
    color: var(--hero-white);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.025em;
    text-wrap: balance;
    text-shadow: 0 3px 20px rgb(0 0 0 / 24%);
}
.hero-section .hero-text {
    max-width: 42rem;
    margin: 0 0 1.875rem;
    color: var(--hero-text);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.75;
}
.hero-section .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.hero-section :is(.hero-btn-primary, .hero-btn-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.125rem;
    max-width: 100%;
    padding: .8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--hero-white);
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.hero-section .hero-btn-primary {
    border-color: var(--hero-red);
    background: var(--hero-red);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
.hero-section .hero-btn-secondary {
    border-color: rgb(255 255 255 / 65%);
    background: rgb(23 29 33 / 85%);
}
.hero-section :is(a, button):focus-visible {
    outline: 3px solid var(--hero-white);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px var(--hero-ink);
}
.hero-section :is(.hero-btn-primary, .hero-btn-secondary):active { transform: translateY(1px); }
.hero-section :is(button:disabled, .btn.disabled) { opacity: .5; pointer-events: none; }

/* Bottom controls have a dedicated band, away from the headline and CTA. */
.hero-section .hero-carousel-control {
    z-index: 5;
    top: auto;
    bottom: calc(var(--hero-control-offset) + 3.5rem);
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 50%;
    background: rgb(23 29 33 / 85%);
    color: var(--hero-white);
    opacity: 1;
    transform: none;
    touch-action: manipulation;
    transition: background-color 200ms ease, border-color 200ms ease;
}
.hero-section .carousel-control-prev { left: max(1rem, env(safe-area-inset-left, 0px)); }
.hero-section .carousel-control-next { right: max(1rem, env(safe-area-inset-right, 0px)); }
.hero-section :is(.carousel-control-prev-icon, .carousel-control-next-icon) {
    width: 1.125rem;
    height: 1.125rem;
}
.hero-section .hero-indicators {
    z-index: 5;
    inset: auto 1rem var(--hero-control-offset);
    display: flex;
    justify-content: flex-start;
    gap: .125rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    padding: 6px;
    overflow-x: auto;
}
.hero-section .hero-indicators [data-bs-target] {
    position: relative;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    opacity: 1;
    touch-action: manipulation;
}
.hero-section .hero-indicators [data-bs-target]::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .625rem;
    height: .625rem;
    border: 1px solid var(--hero-white);
    border-radius: 999px;
    background: rgb(255 255 255 / 70%);
    content: '';
    transform: translate(-50%, -50%);
    transition: width 250ms var(--hero-ease), background-color 250ms ease;
}
.hero-section .hero-indicators [data-bs-target].active::before {
    width: 1.75rem;
    border-color: var(--hero-white);
    background: var(--hero-red);
}

/* Keep Bootstrap's fade classes and its outgoing opacity delay in sync. */
.hero-section .carousel-fade .carousel-item { transition: opacity var(--hero-fade) ease-in-out; }
.hero-section .carousel-fade .active:is(.carousel-item-start, .carousel-item-end) {
    transition: opacity 0s var(--hero-fade);
}
/* The updated hero.js owns text animation; content stays visible without JS. */
.hero-section .hero-animate { opacity: 1; transform: none; }

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .hero-section :is(.hero-btn-secondary, .hero-carousel-control) {
        background: rgb(23 29 33 / 60%);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}
@media (hover: hover) and (pointer: fine) {
    .hero-section .hero-btn-primary:hover { border-color: var(--hero-red-dark); background: var(--hero-red-dark); }
    .hero-section .hero-btn-secondary:hover { border-color: var(--hero-white); background: rgb(23 29 33 / 90%); }
    .hero-section :is(.hero-btn-primary, .hero-btn-secondary):hover { transform: translateY(-2px); }
    .hero-section .hero-carousel-control:hover { background: var(--hero-red); }
}
@media (max-width: 767.98px) {
    .hero-section { --hero-height: max(34rem, 100vh); }
    @supports (height: 100svh) { .hero-section { --hero-height: max(34rem, 100svh); } }
    .hero-section .hero-content { padding-block: 8rem 9rem; text-align: center; }
    .hero-section .hero-title { font-size: clamp(2rem, 4vw, 3rem); }
    .hero-section .hero-text { margin-inline: auto; }
    .hero-section .hero-actions { justify-content: center; }
    .hero-section .hero-media--brand .hero-image--logo { width: 85%; }
}
@media (max-width: 420px) {
    .hero-section :is(.hero-btn-primary, .hero-btn-secondary) { width: min(100%, 18rem); }
}
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section { --hero-height: 30rem; }
    .hero-section .hero-content { padding-top: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-section .carousel-fade .carousel-item,
    .hero-section .hero-video,
    .hero-section .hero-animate,
    .hero-section :is(.hero-btn-primary, .hero-btn-secondary, .hero-carousel-control),
    .hero-section .hero-indicators [data-bs-target]::before {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        animation: none !important;
    }
    .hero-section .hero-animate,
    .hero-section :is(.hero-btn-primary, .hero-btn-secondary) { transform: none !important; }
}