/* === Sohaib custom — video portfolio grids (on top of Davies template) === */

/* Brand colors: accent red #850F27 (slightly brightened for legibility on dark),
   deep purple #1A0023 available as surface tint */
:root,
body {
    --primary: #a51434;
    --primary-rgb: 165, 20, 52;
    --brand-red: #850F27;
    --brand-purple: #1A0023;
}

/* CTA: vertically center the S. logo against the heading */
.section-cta .s-header .row {
    align-items: center;
}

.work-category {
    margin-bottom: 80px;
}
.work-category:last-child {
    margin-bottom: 0;
}
.work-category .cat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.work-category .cat-title {
    letter-spacing: -0.02em;
}
.work-category .cat-count {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    white-space: nowrap;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.video-grid.vertical {
    grid-template-columns: repeat(4, 1fr);
}

.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}
.video-grid.vertical .video-embed {
    aspect-ratio: 9 / 16;
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.18);
    text-align: center;
    padding: 16px;
}
.video-placeholder span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.video-placeholder em {
    font-style: normal;
    color: #a51434;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* testimonial cards have no author photos — the template absolutely positions
   the name over the (missing) photo, which pushed it out of the card. Let it
   flow normally, centered in the card's top section. */
.testimonial-v01 .tes-author .author_info {
    position: static;
    text-align: center;
    padding: 8px 0;
}

/* process cards: upward star drift while hovered (template only faded the
   starfield in; the image is scaled up so edges never show while moving).
   Starfield appears instantly and moves at constant speed so the motion is
   visible from the first moment of the hover. */
.wg-process .bg-img {
    overflow: hidden;
    transition: opacity 0.1s ease;
}
.wg-process .bg-img img {
    transform: scale(1.15);
}
.wg-process:hover .bg-img img {
    animation: star-drift 10s linear infinite alternate;
}
@keyframes star-drift {
    from { transform: scale(1.15) translateY(4%); }
    to   { transform: scale(1.15) translateY(-4%); }
}

/* click-to-play YouTube facade */
.yt-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #101010;
    cursor: pointer;
    display: block;
}
.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, opacity 0.35s ease;
    opacity: 0.9;
}
.yt-facade:hover img {
    transform: scale(1.04);
    opacity: 1;
}
.yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.25s ease, border-color 0.25s ease;
}
.yt-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-left: 18px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}
.yt-facade:hover .yt-play {
    background: #a51434;
    border-color: #a51434;
}
.video-grid.vertical .yt-play {
    width: 52px;
    height: 52px;
}

/* simple text logo (replaces icon font logo) */
.logo-text {
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
}
.logo-text .text-primary {
    font-weight: 700;
}

/* big footer wordmark (replaces agency.png image) */
.footer-wordmark {
    font-size: clamp(64px, 16vw, 240px);
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-align: center;
    color: rgba(255, 255, 255, 0.08);
    user-select: none;
}

@media (max-width: 991px) {
    .video-grid { gap: 16px; }
    .video-grid.vertical { grid-template-columns: repeat(3, 1fr); }
    .work-category { margin-bottom: 56px; }
}
@media (max-width: 767px) {
    .video-grid { grid-template-columns: 1fr; }
    .video-grid.vertical { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Hero showreel ---------- */
/* let the bg-video (z-index:-1) show through — no solid background here */
.section-hero-v1 .col-left .hero-roles .tf-list { margin-bottom: 0; }
.hero-avail { margin: 14px 0 0; }

/* darken the waterfall so the content reads clearly */
.section-hero-v1 .bg-video .video-overlay-2 { opacity: 0.38; }

.hero-reel-box {
    position: relative; overflow: hidden;
    border-radius: 6px; margin-bottom: 32px;
    background: #101014;
    border: 1px solid rgba(232, 162, 58, 0.18);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 0 36px rgba(165, 20, 52, 0.28),
        0 0 90px rgba(165, 20, 52, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.hero-reel-box:hover {
    transform: translateY(-5px);
    border-color: rgba(232, 162, 58, 0.45);
    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.6),
        0 0 48px rgba(165, 20, 52, 0.45),
        0 0 120px rgba(232, 162, 58, 0.16);
}
.hero-reel-box video { width: 100%; display: block; }

.hero-reel-box .reel-sound {
    position: absolute; right: 12px; bottom: 12px; z-index: 20;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(10, 10, 12, 0.55); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer; backdrop-filter: blur(6px);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-reel-box .reel-sound:hover { background: rgba(165, 20, 52, 0.75); border-color: rgba(255, 255, 255, 0.5); }
.hero-reel-box .reel-fs { right: 60px; }

.reel-open {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 0;
    background: none; border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.64); letter-spacing: 0.1em;
    transition: color 0.2s ease;
}
.reel-open svg { opacity: 0.8; }
.reel-open:hover { color: #fff; }

.reel-modal {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(5, 5, 8, 0.92); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 4vmin;
}
.reel-modal[hidden] { display: none; }
.reel-box { position: relative; width: min(1100px, 100%); }
.reel-box video { width: 100%; display: block; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.reel-close {
    position: absolute; top: -44px; right: 0;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; padding: 0 0 3px;
    background: rgba(255, 255, 255, 0.1); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 22px; line-height: 1; font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background 0.2s ease;
}
.reel-close:hover { background: rgba(165, 20, 52, 0.8); }