/* ==========================================================================
   Regal Logistics — video section ("Port to Sale" film)
   Drop-in styles. Scoped to .rv-* so nothing else on the site is affected.
   Uses the site's existing fonts (Archivo Expanded / IBM Plex).
   Brand: Navy #0A1E31 · Gold #E9C45C · Sky #4EA8E0
   ========================================================================== */
.rv-section{
  --rv-navy:#0A1E31; --rv-gold:#E9C45C; --rv-sky:#4EA8E0;
  --rv-ink:#F1EEE4; --rv-dim:#C7C2B2;
  background:var(--rv-navy);
  color:var(--rv-ink);
  padding:clamp(56px,8vw,112px) 0;
  border-top:1px solid rgba(233,196,92,.18);
}
.rv-wrap{max-width:1180px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.rv-copy h2{font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:800;line-height:1.04;
  font-size:clamp(1.9rem,3.6vw,2.9rem);margin:0 0 16px}
.rv-copy p{color:var(--rv-dim);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.6;max-width:44ch;margin:0 0 22px}
.rv-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;color:var(--rv-dim);margin:0;padding:0;list-style:none}
.rv-meta li{display:flex;align-items:center;gap:8px}
.rv-meta li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rv-sky)}

/* Player frame — 16:9, gold/sky rule underneath echoes the logo */
.rv-player{position:relative;aspect-ratio:16/9;width:100%;border-radius:8px;overflow:hidden;
  background:#06121F;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.rv-player::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--rv-gold) 0 70%,var(--rv-sky) 70% 100%);pointer-events:none}
.rv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Click-to-play poster (nothing loads from Vimeo until this is clicked) */
.rv-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:none;color:#fff}
.rv-poster picture,.rv-poster img{display:block;width:100%;height:100%;object-fit:cover}
.rv-poster img{transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .3s}
.rv-poster:hover img{transform:scale(1.02);filter:brightness(.85)}
.rv-play{position:absolute;left:50%;bottom:9%;white-space:nowrap;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;padding:14px 22px 14px 16px;border-radius:999px;
  background:var(--rv-gold);color:var(--rv-navy);font:700 1rem/1 "IBM Plex Sans",system-ui,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.rv-play svg{width:28px;height:28px;flex:none}
.rv-poster:focus-visible{outline:3px solid var(--rv-sky);outline-offset:-3px}
/* Button sits low on the poster so it doesn't cover the logo */
.rv-poster:hover .rv-play{transform:translateX(-50%) scale(1.04)}

.rv-note{font-size:.8rem;color:var(--rv-dim);margin:12px 0 0}
.rv-note a{color:var(--rv-sky);text-decoration:underline}

@media (max-width:860px){
  .rv-wrap{grid-template-columns:minmax(0,1fr)}
  .rv-play{padding:8px 14px 8px 8px;gap:8px;font-size:.88rem;bottom:7%}
  .rv-play svg{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){.rv-poster img,.rv-play{transition:none}}

/* ---------- Dedicated page variant (video.html) ---------- */
.rv-section.rv-page{border-top:0;padding-top:clamp(40px,6vw,80px)}
.rv-page .rv-wrap{grid-template-columns:minmax(0,1fr);max-width:1080px;gap:28px}
.rv-page .rv-copy h1{font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:800;line-height:1.02;
  font-size:clamp(2.2rem,5vw,3.8rem);margin:16px 0 14px}
.rv-page .rv-copy p{max-width:62ch}
.rv-after{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:12px}
.rv-after h3{margin:0 0 12px;color:var(--rv-gold)}
.rv-after p{color:var(--rv-dim);margin:0 0 18px}
.rv-list{margin:0;padding:0 0 0 1.1em;color:var(--rv-dim);display:grid;gap:6px}
@media (max-width:760px){.rv-after{grid-template-columns:minmax(0,1fr)}}

/* Keep anchor targets visible below the sticky site header. */
.rv-section[id]{scroll-margin-top:100px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}