/* Captain site v2 — hero: black (night) or white (day) header with the metal spin */
/* ---------- black header: pure black, no menu, two type sizes (18 and 16), -1% tracking ---------- */
.dark{position:relative;overflow:hidden;background:var(--black);color:var(--white);letter-spacing:-.01em;min-height:100vh;min-height:100svh;display:flex;align-items:center}
/* the shape field behind the hero (js/wave.js): fills the header, the header is the viewport tall */
.hero-wave{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.dark .hero{position:relative;z-index:1}
.dark .hero{width:100%}
.hero{padding:96px 0 104px}

/* the video sits inside a clipping box and is scaled up a hair: Safari draws the edge of its video layer on screen (not in screenshots), the overflow hides it */
.hero .spin-box{width:150px;height:150px;margin:-20px 0 92px -20px;overflow:hidden;border-radius:2px;isolation:isolate}
.hero .spin{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);clip-path:inset(3px);background:transparent;cursor:grab;touch-action:pan-y;user-select:none}

/* clip-path also takes the video out of Safari's overlay path, where that edge is drawn */
.hero .spin.dragging{cursor:grabbing}
.hero h1{font-size:32px;line-height:1.18;font-weight:500;letter-spacing:-.025em;margin:0 0 10px;cursor:default}

/* same voice as the section headings */
.hero h1 span{display:inline-block;white-space:pre}
.hero h1 span.x{color:var(--faint)}
.hero .lead{font-size:28px;line-height:1.18;font-weight:500;letter-spacing:-.025em;color:rgba(255,255,255,.5);max-width:640px;margin:0;text-wrap:balance}
.dark + section{border-top:0}
.white .dark{background:var(--white);color:var(--ink)}
.white .hero .lead{color:rgba(31,31,31,.5)}
.white .hero h1 span.x{color:var(--faint)}

@media (max-width:640px){
  .hero{padding:48px 0 56px}
  .hero .spin-box{height:120px;width:120px;margin:-10px 0 44px -14px}
  .hero h1{font-size:28px}
  .hero .lead{font-size:24px}
}

/* the three client marks under the lead: plenty of air above, the hero's own colour, quiet */
.hero-logos{display:flex;align-items:center;gap:44px;flex-wrap:wrap;margin-top:72px;color:rgba(255,255,255,.5)}   /* exactly the lead's colour, both themes */
.white .hero-logos{color:rgba(31,31,31,.5)}
.hero-logos .trust-logo{width:var(--w);height:var(--h);flex:none}
@media (max-width:640px){.hero-logos{gap:20px 24px;margin-top:48px}.hero-logos .trust-logo{width:calc(var(--w) * .78);height:calc(var(--h) * .78)}}   /* the three fit one 390 px line */

/* русский лид длиннее английского: чуть крупнее и шире, чтобы два предложения легли в две строки */
.hero .lead{font-size:30px;max-width:760px}
@media (max-width:760px){.hero .lead{font-size:22px}}