/* Homepage only, loaded after /brand/theme.css: the hills hero, one-screen sections, the record views and industries. */
body.home::before{content:none} /* the homepage draws its own moving night sky */
.layer{position:relative;z-index:2}
#bg{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 93%,transparent);mask-image:linear-gradient(#000 93%,transparent)}
#bg canvas{position:absolute;inset:0;width:100%;height:100%}
.sky{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.grain-top{position:fixed;inset:0;z-index:4;pointer-events:none;background:var(--grain);opacity:.08}
.col{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.navspace{height:74px}

/* hero */
.hero{height:calc(100vh - 74px);padding-bottom:30vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero-head{display:flex;flex-direction:column;align-items:center;max-width:980px;padding:0 8px}
.hero h1{margin:0;max-width:16ch;font-size:clamp(40px,5.6vw,80px);line-height:1.04;font-weight:400;font-stretch:125%;letter-spacing:-.04em;text-wrap:balance}
.hero .sub{margin:28px 0 0;max-width:56ch;font-size:19px;line-height:1.55;color:var(--tx-3);text-wrap:pretty}
.hero .hero-cta{justify-content:center}
.hero .hero-cta .b:not(.solid){margin-left:0}

/* sections: one screen each on desktop, text and visual side by side */
.blk{padding:14vh 0 0}
.blk h2{margin:0;max-width:16ch;font-size:58px;line-height:1.04;font-weight:400;font-stretch:125%;letter-spacing:-.035em;text-wrap:balance}
.blk .lead{margin:22px 0 0;max-width:52ch;font-size:20px;line-height:1.5;color:var(--tx-3);text-wrap:pretty}
.blk.split h2{font-size:50px}
.blk.split .lead{font-size:18.5px;max-width:46ch}
.blk .pts{margin:34px 0 0;gap:24px;max-width:46ch}
.blk .pts h3{font-size:18px}
.blk h2,.blk .lead,.blk .pts{text-shadow:0 0 2px #000,0 0 6px #000,0 0 12px #000,0 0 24px #000}
.vis2{min-width:0}
@media (min-width:901px){
  .blk.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:72px;align-items:center}
  .blk.split.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
  .blk.split.rev .tcol{order:2}
}
@media (min-width:901px) and (min-height:640px){
  .blk{min-height:100vh;padding:96px 0 56px;display:flex;flex-direction:column;justify-content:center}
  .blk.split{display:grid;align-content:center}
}

/* one record, several viewers */
.vone{align-items:center}
.rec{display:flex;flex-direction:column;gap:14px}
.exs{display:flex;gap:20px;margin:0 0 2px}
.exs button{padding:4px 0;border:0;background:none;color:#8A8A8A;font:400 13.5px/1 var(--sans);letter-spacing:-.005em;cursor:pointer;transition:color .2s}
.exs button:hover{color:var(--tx-2)}
.exs button.on{color:#F2F2F2}
.exs button:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:3px;border-radius:4px}
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-left:-4px}
.tabs .b.on{color:#fff}
.tabs .b.on .sf{opacity:1}
.view{border-radius:var(--r)}
.view.one{padding:24px 26px 16px}
.who{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.who b{font-weight:500;font-stretch:115%;font-size:18px;letter-spacing:-.015em}
.who span{font-size:13px;color:var(--tx-4)}
.view dl{margin:0}
.view.one dl,.view.one .who{transition:opacity .25s}
.view.one.swap dl,.view.one.swap .who{opacity:0}
.f2{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:10px;height:42px;font-size:15.5px}
.f2 dt{color:var(--tx-4)}
.f2 dd{position:relative;margin:0;height:100%;display:flex;align-items:center;color:#F2F2F2;white-space:nowrap}
.f2 .v{transition:opacity .4s cubic-bezier(.25,.46,.45,.94)}
.f2 .d{position:absolute;left:0;top:50%;height:12px;margin-top:-6px;width:var(--w);background:radial-gradient(circle,#5c5c5c 0 1.35px,transparent 1.6px) 0 0/4px 4px;opacity:0;transition:opacity .4s cubic-bezier(.25,.46,.45,.94)}
.f2 .v.stand{padding:3px 8px;margin-left:-8px;border-radius:7px;background:rgba(255,255,255,.1)}
.f2 dd.hid .v{opacity:0}
.f2 dd.hid .d{opacity:1}
.f2 .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.f2 dd:not(.hid) .vh{display:none}
@media (max-width:560px){.tabs{flex-wrap:nowrap;gap:0}.tabs .b{padding:0 9px;font-size:13.5px}}

/* industries */
.inds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:48px}
.ind{padding:30px 30px 24px;display:flex;flex-direction:column;align-items:flex-start}
.ind h3{margin:0;font-size:24px;font-weight:400;font-stretch:125%;letter-spacing:-.02em}
.ind p{margin:12px 0 20px;max-width:46ch;font-size:16px;line-height:1.55;color:var(--tx-3);flex:1}
.ind .b{margin-left:-12px}

/* the closing panel follows the last section */
body.home .closing{margin-top:14vh}

@media (max-width:900px){
  .dia{height:min(var(--h,420px),340px)}
  .vis2{margin-top:40px}
  .blk h2,.blk.split h2{font-size:38px}
  .blk.split .lead{font-size:17.5px}
  .inds{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.f2 .v,.f2 .d,.view.one dl,.view.one .who{transition:none}}