/* Home hero — fig 7112:1476 (1920) and 7473:10568 (390): the video banner, the
   dark claim strip that closes the first screen, and the glass header over
   them. header-new.php links this sheet on tpl-home.php only, after main.css,
   so the header rules below win the cascade. */

/* main.css paints the bar solid white and only frosts it once the page has
   scrolled; the frame shows it frosted over the video from the first pixel.
   The scrolled state is named as well, or main.css (0,3,0) would switch the
   bar to its own 14px blur on the way down. */
.page-template-tpl-home .section-header-parent,
.page-template-tpl-home .section-header.hide-section-header .section-header-parent {
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.18);
}

/* The banner and the strip together fill the first viewport: 1080 in the 1920
   frame, 844 in the 390 one. Body carries 75px of padding to clear the fixed
   header; the video runs up behind it instead. */
.home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: -75px;
    background: #171b1c;
    color: #fff;
}

/* a logged-in editor's admin bar takes 32px (46px on phones) off the first screen */
.admin-bar .home-hero {
    min-height: calc(100vh - 32px);
    min-height: calc(100svh - 32px);
}

@media (max-width: 782px) {
    .admin-bar .home-hero {
        min-height: calc(100vh - 46px);
        min-height: calc(100svh - 46px);
    }
}

/* the 65px header sits over the top of the stage, so the copy centres in what
   is left below it */
.home-hero-stage {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 620px;
    padding: 125px 0 60px;
    overflow: hidden;
    isolation: isolate;
}

/* as a flex item the container would shrink to its copy and its auto margins
   would centre it; full width keeps the copy on the container's left edge */
.home-hero-stage > .container-new {
    width: 100%;
}

.home-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* 1px short of the stage: where 100svh leaves the stage a fractional height
   the clip's anti-aliased bottom row blended through as a light seam above
   the strip. Ending the media a pixel early puts that row under the solid end
   of the gradient, which runs the full height. */
.home-hero-media img,
.home-hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: calc(100% - 1px);
    object-fit: cover;
    object-position: center;
}

/* the poster is the first paint and the clip's own first frame, so the clip
   cuts in over it on that frame; it stays hidden for visitors it never
   loads for, and while iOS holds it paused */
.home-hero-video {
    opacity: 0;
    pointer-events: none;
}

/* iOS draws a start-playback glyph over a paused inline clip; the clip is
   decoration, so that glyph and the controls surface are suppressed too */
.home-hero-video::-webkit-media-controls,
.home-hero-video::-webkit-media-controls-panel,
.home-hero-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

.home-hero-video.is-playing {
    opacity: 1;
}

.home-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #171b1c 100%);
}

.home-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 700px;
}

/* 40px in the 1920 frame, 20px in the 390 one; the slope passes through both */
.home-hero-title {
    margin: 0;
    color: #fff;
    font-family: Unbounded, sans-serif;
    font-size: clamp(20px, 2.1vw + 11.8px, 40px);
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.home-hero-title b {
    color: #f69924;
    font-weight: inherit;
}

.home-hero-text {
    color: rgba(255, 255, 255, 0.8);
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
}

.home-hero-text p {
    margin: 0 0 12px;
}

.home-hero-text p:last-child {
    margin-bottom: 0;
}

/* wrap, so two long labels stack instead of pushing past the column */
.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* min-height, not height: a label longer than the frame's wraps to a second
   line and grows the pill instead of spilling out of it */
.home-hero-btn {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    padding: 8px 20px;
    border: 2px solid #fff;
    border-radius: 20px;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    /* 0.5s is the site's hover timing (.home-section-3n-wrap-left-button in main.css) */
    transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

.home-hero-btn svg {
    flex: none;
    fill: currentColor;
}

.home-hero-btn--outline {
    color: #fff;
    background: transparent;
}

.home-hero-btn--outline:hover {
    color: #ff6b00;
    border-color: #ff6b00;
}

.home-hero-btn--solid {
    color: #171b1c;
    background: #fff;
}

.home-hero-btn--solid:hover {
    color: #fff;
    background: #ff6b00;
    border-color: #ff6b00;
}

.home-hero-btn:focus-visible {
    outline: 2px solid #ff6b00;
    outline-offset: 3px;
}

/* ---- claim strip -------------------------------------------------------- */

/* -1px: where 100svh leaves the stage a fractional height, the clip's
   anti-aliased bottom row showed as a light seam above the strip; the strip
   paints over that row instead */
.home-trust {
    position: relative;
    margin-top: -1px;
    background: #171b1c;
    overflow: hidden;
}

.home-trust-track {
    display: flex;
}

.home-trust-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1430px;
    margin: 0 auto;
    padding: 35px 0;
}

/* the row is printed twice for the loop below; where it fits, the copy is
   out of the layout and the trailing badge the loop needs is hidden */
.home-trust-track > [aria-hidden="true"],
.home-trust-inner > .home-trust-sep:last-child {
    display: none;
}

/* More claims than the frame draws would either wrap, stranding a badge at
   the start of a line, or be clipped; above the loop's width the row keeps
   its length and the strip scrolls instead. */
@media (min-width: 1440px) {
    .home-trust {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .home-trust-inner {
        min-width: max-content;
    }
}

.home-trust-item {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}

.home-trust-sep {
    flex: none;
    width: 21px;
    height: 22px;
}

/* Wrapping would strand a badge at the start of a line, so below the width
   the claims fit at the row loops: the track is twice one row and travels
   half its own width, with the row's side padding making the seam equal the
   gap inside it. */
@media (max-width: 1439px) {
    .home-trust-track {
        width: max-content;
        animation: home-trust-marquee 30s linear infinite;
    }

    .home-trust-track > [aria-hidden="true"] {
        display: flex;
    }

    .home-trust-inner {
        flex: none;
        justify-content: flex-start;
        gap: 60px;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 35px 30px;
    }

    .home-trust-inner > .home-trust-sep:last-child {
        display: block;
    }
}

@keyframes home-trust-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* A parked row would leave every claim past the first behind the clip with no
   way to reach it, so the stopped row scrolls by hand; the copy goes with the
   animation. */
@media (prefers-reduced-motion: reduce) {
    .home-trust-track {
        animation: none;
    }

    /* the seam badge has no next row to lead into once the loop stops */
    .home-trust-track > [aria-hidden="true"],
    .home-trust-inner > .home-trust-sep:last-child {
        display: none;
    }

    .home-trust {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .home-trust::-webkit-scrollbar {
        display: none;
    }
}

/* ---- what follows ------------------------------------------------------- */

/* the old strip pulled the next section up with a negative margin; the gap
   it left is kept as the plain distance to it (parts/home-stats.php normally
   sits between, and then the card's own spacing below applies) */
.home-hero + .home-section-2 {
    margin-top: 40px;
}

/* ---- numbers card ------------------------------------------------------- */

/* fig 7482:9789: white card, radius 30, four centred figures spread across the
   1430 column, 166 tall at 1920 */
.home-stats,
.home-stats + .home-section-2 {
    margin-top: 80px;
}

.home-stats-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
    min-height: 166px;
    padding: 20px 100px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}

.home-stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.home-stats-num {
    color: #ff6b00;
    font-family: Unbounded, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
}

.home-stats-cap {
    color: #171b1c;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    transition: color 0.5s;
}

a.home-stats-item:hover .home-stats-cap,
a.home-stats-item:focus-visible .home-stats-cap {
    color: #ff6b00;
}

a.home-stats-item:focus-visible {
    outline: 2px solid #ff6b00;
    outline-offset: 6px;
    border-radius: 8px;
}

@media (max-width: 1435px) {
    .home-hero + .home-section-2 {
        margin-top: 60px;
    }

    .home-stats,
    .home-stats + .home-section-2 {
        margin-top: 60px;
    }

    .home-stats-card {
        padding: 20px 40px;
    }
}

/* two by two once four one-line figures no longer share a row */
@media (max-width: 1023px) {
    .home-stats-card {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 24px 40px;
        min-height: 0;
        padding: 30px 30px;
    }

    .home-stats-item {
        width: calc(50% - 20px);
    }
}

/* ---- phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
    .home-hero-stage {
        min-height: 0;
        padding: 105px 0 40px;
    }

    .home-hero .container-new {
        padding: 0 16px;
    }

    .home-hero-copy {
        max-width: none;
    }

    .home-hero-actions {
        flex-direction: column;
        gap: 16px;
    }

    .home-hero-btn {
        flex: none;
        width: 100%;
    }

    .home-trust-inner {
        padding: 35px 30px;
    }

    .home-hero + .home-section-2,
    .home-stats,
    .home-stats + .home-section-2 {
        margin-top: 45px;
    }

    .home-stats-card {
        gap: 20px 16px;
        padding: 24px 16px;
        border-radius: 20px;
    }

    .home-stats-item {
        width: calc(50% - 8px);
        white-space: normal;
    }

    .home-stats-num {
        font-size: 26px;
    }

    .home-stats-cap {
        font-size: 14px;
    }
}