/* ==========================================================================
   work.css — Our Work page (pageCss: work). Navy hero with a ringed live
   clip, tap-to-play video grid, masonry photo wall, split CTA.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.ow-hero{background:var(--primary-dark);color:var(--white);padding:136px 0 88px;overflow:hidden}
.ow-hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.ow-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.ow-hero h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.04;color:var(--white);margin-bottom:18px}
.ow-hero p{font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.76);max-width:520px}
.ow-jump{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ow-jump a{padding:11px 20px;border-radius:50px;font-weight:600;font-size:.95rem;border:1.5px solid rgba(255,255,255,.3);color:var(--white)}
.ow-jump a:first-child{background:var(--accent);border-color:var(--accent);color:var(--primary-dark)}
.ow-jump a:hover{border-color:var(--accent)}

/* The logo motif: navy circle inside a gold ring, with a live clip in it */
.ow-hero-ring{justify-self:center;width:min(380px,80vw);aspect-ratio:1;border-radius:50%;padding:12px;background:var(--primary);box-shadow:0 0 0 3px var(--accent),0 0 0 22px rgba(255,255,255,.05),0 40px 80px -30px rgba(0,0,0,.6)}
.ow-hero-ring video{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#0b1626}

/* --- Shared section header --------------------------------------------- */
.ow-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid rgba(27,58,92,.12)}
.ow-head h2{font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--primary)}
.ow-head p{color:var(--mid);font-size:.98rem}

/* --- Videos ------------------------------------------------------------- */
.ow-videos{padding:88px 0 72px;background:var(--bg)}
.wv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.wv-card{margin:0}
.wv-play{position:relative;display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;border-radius:14px;overflow:hidden;background:#0b1626;cursor:pointer;box-shadow:0 14px 34px -18px rgba(20,33,61,.45)}
.wv-play video{width:100%;height:100%;object-fit:cover;display:block}
.wv-card.is-playing video{object-fit:contain}
.wv-icon{position:absolute;left:14px;bottom:14px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--primary-dark);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .25s,opacity .25s}
.wv-play:hover .wv-icon,.wv-play:focus-visible .wv-icon{transform:scale(1.08)}
.wv-card.is-playing .wv-icon{opacity:0}
.wv-play:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wv-card figcaption{margin-top:12px;font-size:.95rem;line-height:1.4;color:var(--dark)}
.wv-tag{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}

/* --- Photos ------------------------------------------------------------- */
.ow-photos{padding:72px 0 96px;background:var(--bg-alt)}
.ow-masonry{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.ow-photo{margin:0;border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 10px 28px -18px rgba(20,33,61,.4)}
.ow-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.ow-photo figcaption{padding:12px 14px}
.ow-photo strong{display:block;color:var(--primary);font-size:.95rem}
.ow-photo span{display:block;color:var(--mid);font-size:.82rem;margin-top:2px}

/* --- CTA ---------------------------------------------------------------- */
.ow-cta{background:var(--primary);color:var(--white);padding:56px 0}
.ow-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}
.ow-cta h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:6px}
.ow-cta p{color:rgba(255,255,255,.75)}
.ow-cta-btns{display:flex;gap:12px;flex-shrink:0}
.ow-cta .sp-btn--ghost{color:var(--white);border-color:rgba(255,255,255,.45)}

@media(max-width:1000px){.wv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){
  .ow-hero{padding:108px 0 64px}
  .ow-hero-inner{grid-template-columns:1fr;gap:40px}
  .ow-hero-ring{width:min(280px,72vw)}
  .ow-head{flex-direction:column;align-items:flex-start;gap:6px}
  .ow-videos{padding:56px 0 48px}
  .wv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .wv-icon{width:40px;height:40px;left:10px;bottom:10px}
  .wv-card figcaption{font-size:.88rem}
  .ow-photos{padding:48px 0 64px}
  .ow-masonry{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ow-cta-inner{flex-direction:column;align-items:flex-start}
  .ow-cta-btns{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.wv-icon{transition:none}}

/* Buffering spinner */
.wv-play::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);opacity:0;pointer-events:none;animation:wv-spin .8s linear infinite;transition:opacity .2s}
.wv-card.is-loading .wv-play::after{opacity:1}
@keyframes wv-spin{to{transform:rotate(360deg)}}