/* ============ HOMEPAGE INTRO VIDEO ============
   Sits between the partner logos and "Our Products". Before playing, a cover
   shows the thumbnail image, scaled down a little, on its own plain
   background, with a simple play button at the centre; clicking plays the full video with sound
   and hands over to the native video controls. */

.iv {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) 2rem clamp(3rem, 7vw, 5.5rem);
    max-width: 1264px;
    margin: 0 auto;
}

.iv-stage {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.iv-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: var(--cream-dark);
    box-shadow:
        0 1px 2px rgba(16, 42, 80, 0.05),
        0 8px 24px -12px rgba(16, 42, 80, 0.14);
    isolation: isolate;
}

/* Before it plays: a hairline stroke and a slightly deeper shadow */
.iv:not(.is-playing) .iv-frame {
    box-shadow:
        0 0 0 1px rgba(16, 42, 80, 0.05),
        0 1px 3px rgba(16, 42, 80, 0.06),
        0 14px 36px -14px rgba(16, 42, 80, 0.22);
}

.iv-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--cream-dark);
}

.iv.is-playing .iv-full { background: #000; object-fit: contain; }

/* ---------- Cover (thumbnail, smaller than the video) ---------- */
.iv-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: #FBF9F5;   /* matches the thumbnail's own background */
    cursor: pointer;
}

.iv-cover img { width: 78%; height: auto; display: block; }
.iv.is-playing .iv-cover { display: none; }

/* ---------- Play button (centred on the video) ---------- */
.iv-play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    background: var(--gold-500);
    color: #0A1B34;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 0 0 6px rgba(251, 249, 245, 0.85), 0 4px 14px -4px rgba(16, 42, 80, 0.25);
    transition: transform 0.2s ease;
}

.iv-play svg { width: 24px; height: 24px; margin-left: 4px; }
.iv-play:hover { transform: scale(1.06); }
.iv-play:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 4px; }
.iv.is-playing .iv-play { display: none; }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
    .iv { padding-left: 16px; padding-right: 16px; }
    .iv-frame { border-radius: 14px; }
    .iv-play { width: 48px; height: 48px; }
    .iv-play svg { width: 16px; height: 16px; margin-left: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .iv-play { transition: none; }
}