/* ==========================================================================
   Monolith — Ziotech case study (dark page — uses site.css's dark defaults
   for nav/footer as-is, no theme override needed here)
   ========================================================================== */

/* ============ nav current-section indicator ============ */
header.mono-nav nav a.is-current { color: #FFFFFF; }

/* ============ hero ============ */
.cs-hero { max-width: 1440px; margin: 0 auto; padding: 120px 80px 96px; box-sizing: border-box; }
.cs-hero-head { display: flex; flex-direction: column; gap: 40px; }
.cs-kicker { font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.12em; color: #747474; text-transform: uppercase; }
.cs-kicker a { color: #747474; text-decoration: none; transition: color 0.2s ease; }
.cs-kicker a:hover { color: #BCFF56; }
.cs-title { margin: 0; font-weight: 400; font-size: clamp(56px, 9vw, 140px); line-height: 0.98; letter-spacing: -0.04em; color: #FFFFFF; }
.cs-dek { margin: 0; max-width: 580px; font-size: 21px; line-height: 1.4; color: #9C9C9C; }
.cs-meta { margin-top: 88px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid #2E2E2E; padding-top: 28px; }
.cs-meta-item { display: flex; flex-direction: column; gap: 10px; }
.cs-meta-label { font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: #565656; text-transform: uppercase; }
.cs-meta-value { font-size: 15px; color: #D1D1D1; }

/* ============ brand film (top, autoplaying background video) ============ */
.z-film { margin: 0; padding: 0 0 8px; }
.z-film-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000000; overflow: hidden; }
/* Vimeo iframe: autoplay only works muted; controls hidden via background=1&controls=0 for a pure background-video treatment */
.z-film-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }

/* ============ figures ============ */
.cs-figure { margin: 0; padding: 0 0 8px; }
.cs-figure--gap { padding-top: 96px; }
.cs-figure img { display: block; width: 100%; max-width: 1920px; margin: 0 auto; height: auto; }
.cs-figure--fleet img { max-width: 1733px; }
.cs-figure--pack img { max-width: 1500px; }
.cs-figcaption { max-width: 1440px; margin: 0 auto; padding: 16px 80px 0; box-sizing: border-box; display: flex; justify-content: space-between; gap: 24px; font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #565656; }
.cs-figcaption .fig-num { color: #747474; }

/* ============ logo-in-motion (gif on black) ============ */
.z-logo-motion { padding: 0 0 8px; background: #000000; }
.z-logo-motion-inner { display: flex; align-items: center; justify-content: center; padding: 96px 80px; }
.z-logo-motion-inner img { display: block; width: min(420px, 70vw); height: auto; }
.z-logo-motion .cs-figcaption { padding-bottom: 24px; }

/* ============ two-column narrative sections ============ */
.cs-section { max-width: 1440px; margin: 0 auto; padding: 152px 80px 120px; box-sizing: border-box; }
.cs-section-grid { display: grid; grid-template-columns: minmax(240px, 0.8fr) 1.6fr; gap: 64px; align-items: start; }
.cs-section-head { position: sticky; top: 100px; display: flex; align-items: baseline; gap: 14px; }
.cs-section-num { font-family: 'VCR OSD Mono', monospace; font-size: 13px; color: #747474; }
.cs-section-title { margin: 0; font-weight: 400; font-size: clamp(34px, 3.6vw, 54px); letter-spacing: -0.03em; line-height: 1; color: #FFFFFF; }
.cs-section-copy { display: flex; flex-direction: column; gap: 24px; max-width: 620px; }
.cs-lead { margin: 0; font-size: 24px; line-height: 1.35; color: #D1D1D1; }
.cs-lead em, .cs-body em { font-style: normal; color: #FFFFFF; }
.cs-body { margin: 0; font-size: 18px; line-height: 1.55; color: #8B8B8B; }

/* ============ next / CTA ============ */
.cs-cta { position: relative; max-width: 1440px; margin: 0 auto; padding: 160px 80px 140px; box-sizing: border-box; }
.cs-cta-eyebrow { display: block; font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.12em; color: #747474; text-transform: uppercase; }
.cs-cta-link { display: inline-block; margin-top: 32px; font-family: 'VCR OSD Mono', monospace; font-size: clamp(28px, 5vw, 72px); color: #FFFFFF; text-decoration: none; text-transform: uppercase; line-height: 1.1; }
.cs-cta-link:hover { color: #BCFF56; animation: glitch 0.35s steps(2) infinite; }
.cs-cta-foot { margin-top: 72px; border-top: 1px solid #2A2A2A; padding-top: 28px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cs-cta-foot a { font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.08em; color: #9C9C9C; text-decoration: none; }
.cs-cta-foot a:hover { color: #FFFFFF; }

/* ============ mobile ============ */
@media (max-width: 760px) {
  .cs-hero, .cs-section, .cs-cta { padding-left: 22px !important; padding-right: 22px !important; }
  .cs-figcaption { padding-left: 22px !important; padding-right: 22px !important; }
  .cs-meta { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .cs-section-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cs-section-head { position: static !important; top: auto !important; }
  .z-logo-motion-inner { padding: 56px 22px !important; }
  .cs-figure--gap { padding-top: 56px !important; }
}