/* POLY — Hero ------------------------------------------------------------- */

.poly-hero {
    position: relative;
    background: var(--poly-white);
    overflow: clip;
}

.poly-hero__inner {
    display: grid;
    /* The copy takes the room it needs; the plate column is only as wide as
       the plate plus the gutter it is parked against. */
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: clamp(520px, 74svh, 780px);
}

/* Copy column: its inline start is held to the site grid, its end keeps a
   measured distance from the picture rather than following the gutter. */
.poly-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-block: clamp(96px, 12vh, 148px);
    padding-inline: max(var(--poly-gutter), calc((100vw - var(--poly-max)) / 2 + var(--poly-gutter)))
                    clamp(32px, 4vw, 76px);
}

/* ------------------------------------------------------------------- media

   A measured plate rather than a bleeding photograph. The picture is a
   portrait panel parked on the right of the site grid, layered between a mist
   block pushed up and out and a hairline bracket dropped down and in — the
   same drafting language as the scroll rail below it, so the two read as one
   drawing. The play control hangs off the bottom corner, half on the picture
   and half on the page, which keeps it legible whatever the footage is doing
   behind it and keeps the frame itself clean.
   ------------------------------------------------------------------------ */

.poly-hero__media {
    display: grid;
    align-items: center;
    justify-items: end;
    /* The copy usually runs the hero past one screen. Centring the plate in
       all of that would push its lower half — and the play control on its
       corner — under the fold, so the column stops at the first screen and
       the plate centres on what the visitor can actually see. The 124px also
       keeps the corner clear of the scroll cue parked down there. */
    max-height: calc(100svh - var(--poly-header-h, 0px) - 124px);
    padding-block: clamp(48px, 7vh, 96px);
    /* Parked on the same grid line the copy starts from, mirrored. */
    padding-inline-end: max(var(--poly-gutter), calc((100vw - var(--poly-max)) / 2 + var(--poly-gutter)));
}

.poly-hero__plate {
    position: relative;
    /* A stacking context of its own, so the two layers below can sit behind
       the picture without falling through the section background. */
    isolation: isolate;
    /* Width first, but never wider than the height of that first screen allows
       at 4:5 — on a short window the plate steps down a size rather than
       growing out of its column. */
    width: min(
        clamp(280px, 26vw, 420px),
        max(240px, calc((100svh - var(--poly-header-h, 0px) - 316px) * .8))
    );
    max-width: 100%;
}

/* Mist block, pushed up and out. */
.poly-hero__plate::after {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: -1;
    width: 58%;
    height: 44%;
    background: var(--poly-mist);
    border-radius: var(--poly-radius-lg);
}

/* Registration bracket, dropped down and in. It picks up the accent while the
   clip runs, so the plate answers the play control without moving anything. */
.poly-hero__plate::before {
    content: "";
    position: absolute;
    left: -18px;
    bottom: -18px;
    z-index: -1;
    width: 62%;
    height: 50%;
    border-left: 1px solid var(--poly-line-strong);
    border-bottom: 1px solid var(--poly-line-strong);
    border-end-start-radius: var(--poly-radius-lg);
    transition: border-color .5s var(--poly-ease);
}

.poly-hero__plate.is-playing::before { border-color: var(--poly-accent); }

.poly-hero__frame {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--poly-radius-lg);
}

.poly .poly-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poly-js [data-poly-reveal="media"] .poly-hero__video {
    transform: scale(1.08);
    opacity: 0;
    transition: transform 1.25s var(--poly-ease-out), opacity .9s var(--poly-ease-out);
}

.poly-js [data-poly-reveal="media"].is-revealed .poly-hero__video {
    transform: none;
    opacity: 1;
}

/* Play/pause. Hidden until poly-hero.js wires it up, so a visitor without
   scripting never meets a button that cannot do anything. */
.poly-hero__video-toggle {
    position: absolute;
    right: -16px;
    bottom: -16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    color: var(--poly-brand);
    background: var(--poly-white);
    border: 1px solid var(--poly-line);
    border-radius: 50%;
    box-shadow: 0 12px 30px rgb(11 17 48 / .13);
    cursor: pointer;
    transition: color .3s var(--poly-ease), background .3s var(--poly-ease),
                border-color .3s var(--poly-ease), transform .3s var(--poly-ease);
}

/* display: inline-flex outranks the [hidden] default, so restate it. */
.poly-hero__video-toggle[hidden] { display: none; }

.poly-hero__video-toggle:hover,
.poly-hero__video-toggle:focus-visible {
    color: var(--poly-white);
    background: var(--poly-brand);
    border-color: var(--poly-brand);
}

.poly-hero__video-toggle:active { transform: scale(.94); }

.poly-hero__video-icon { display: block; }

.poly-hero__video-pause { display: none; }
.poly-hero__plate.is-playing .poly-hero__video-play { display: none; }
.poly-hero__plate.is-playing .poly-hero__video-pause { display: inline; }

.poly-hero__line { display: block; }

.poly-hero__line:last-child {
    color: var(--poly-brand);
}

.poly-hero__intro {
    margin-top: 1.75rem;
    max-width: 46ch;
    font-size: clamp(1.02rem, 1.15vw, 1.16rem);
    line-height: 1.72;
    color: var(--poly-body);
}

.poly-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    margin-top: 2.75rem;
    padding-top: 1.9rem;
    border-top: 1px solid var(--poly-line);
}

.poly-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--poly-muted);
}

.poly-hero__trust-item .poly-icon {
    width: 19px;
    height: 19px;
    color: var(--poly-accent);
}

/* Inline contact block under the call to actions. */
.poly-hero__card {
    display: grid;
    /* Text flexes, the number keeps its own intrinsic width. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem 1.75rem;
    width: 100%;
    max-width: 500px;
    margin-top: 2rem;
    padding: 1.35rem 1.5rem;
    background: var(--poly-mist);
    border: 1px solid var(--poly-line);
    border-radius: var(--poly-radius-lg);
}

.poly-hero__card-label {
    grid-column: 1;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--poly-muted);
}

.poly-hero__card-phone {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--poly-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--poly-brand);
    text-decoration: none;
    transition: color .3s var(--poly-ease);
}

.poly-hero__card-phone .poly-icon { width: 20px; height: 20px; }
.poly-hero__card-phone:hover { color: var(--poly-brand-700); }

.poly-hero__card-note {
    grid-column: 1;
    margin-top: .2rem;
    max-width: 26ch;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--poly-muted);
}

/* --------------------------------------------------------- scroll indicator

   A measured rail rather than the usual mouse pictogram: a datum cap, a
   hairline guide with a marker that sweeps down it and a closing chevron.
   The rhythm of the sweep echoes the recurring work schedules the copy
   promises. Only transform and opacity animate, so the loop stays on the
   compositor; when the animation is switched off for reduced motion the
   marker simply rests at the top of the rail.
   ------------------------------------------------------------------------ */

.poly-hero__scroll {
    display: inline-flex;
    position: absolute;
    /* Mirrors the inline end of .poly-hero__media, so the cue lines up under
       the plate on the same grid line the copy starts from. */
    right: max(var(--poly-gutter), calc((100vw - var(--poly-max)) / 2 + var(--poly-gutter)));
    /* Parked in the band the media column leaves free below the first screen
       (see its max-height). The copy runs the hero past one screen on a laptop,
       so anchoring to the end of the section alone would drop the cue under the
       fold, and the copy column is occupied right up to it. */
    top: min(calc(100svh - var(--poly-hero-top, var(--poly-header-h, 0px))), 100%);
    transform: translateY(calc(-100% - clamp(24px, 3.4vh, 40px)));
    z-index: 2;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    color: var(--poly-muted);
    text-decoration: none;
    transition: color .3s var(--poly-ease);
}

.poly-hero__scroll:hover,
.poly-hero__scroll:focus-visible { color: var(--poly-brand); }

.poly-hero__scroll-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1;
}

.poly-hero__scroll-icon { display: block; }

.poly-hero__scroll-cap { opacity: .5; }
.poly-hero__scroll-rail { opacity: .3; }

.poly-hero__scroll-sweep {
    animation: poly-hero-sweep 2.8s var(--poly-ease) infinite;
}

.poly-hero__scroll-chevron {
    transition: transform .3s var(--poly-ease);
}

.poly-hero__scroll:hover .poly-hero__scroll-chevron,
.poly-hero__scroll:focus-visible .poly-hero__scroll-chevron {
    transform: translateY(2px);
}

@keyframes poly-hero-sweep {
    0%   { transform: translateY(0); opacity: 0; }
    22%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(19px); opacity: 0; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
    /* Stacked: copy first, the picture full bleed underneath it. */
    .poly-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* The stacked hero has no fixed height and touch scrolling needs no cue. */
    .poly-hero__scroll { display: none; }

    .poly-hero__content {
        max-width: var(--poly-max);
        margin-inline: auto;
        padding-block: clamp(88px, 14vh, 120px) clamp(64px, 9vh, 96px);
        padding-inline: var(--poly-gutter);
    }

    /* Stacked, the plate keeps its shape but lines up with the copy. There is
       no cue down here, so the column is free to take the height it needs. */
    .poly-hero__media {
        justify-items: start;
        max-height: none;
        width: 100%;
        max-width: var(--poly-max);
        margin-inline: auto;
        padding-block: 0 clamp(64px, 9vh, 96px);
        padding-inline: var(--poly-gutter);
    }

    .poly-hero__plate { width: min(420px, 100%); }

}

@media (max-width: 700px) {
    /* Two columns squeeze the label and the note; stack them instead. */
    .poly-hero__card {
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
        max-width: none;
    }

    .poly-hero__card-phone {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: .35rem;
    }

    .poly-hero__card-note {
        max-width: none;
        order: 3;
    }
}

@media (max-width: 600px) {
    /* A tall plate eats the fold on a phone; square it off. */
    .poly-hero__frame { aspect-ratio: 1 / 1; }
    .poly-hero__plate { width: 100%; }

    /* The gutter is down to 20px here, so pull the layers in with it. */
    .poly-hero__plate::before { left: -12px; bottom: -12px; }
    .poly-hero__plate::after { top: -12px; right: -12px; }
    .poly-hero__card { padding: 1.6rem 1.4rem; }
    .poly-hero__trust { gap: .65rem 1.4rem; }
    .poly-actions .poly-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .poly-js [data-poly-reveal="media"] .poly-hero__video {
        opacity: 1 !important;
        transform: none !important;
    }
}