/* Avionova website. Black, white and greys; one typeface, one weight; square corners. */
:root{--ink:#000;--paper:#fff;--mut:#595959;--mut-dark:#a6a6a6;--g50:#f2f2f2;--g100:#e8e8e8;--rule:#d0d0d0;--line-dark:rgba(255,255,255,.3);--g:56px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;letter-spacing:-.1px;-webkit-text-size-adjust:100%}
p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:400}
h1,.h1{font-size:48px;line-height:52px;letter-spacing:-.045em}
h2,.h2{font-size:30px;line-height:36px;letter-spacing:-.04em}
h3{font-size:20px;line-height:28px;letter-spacing:-.02em}
img{display:block;max-width:100%}
a{color:inherit}
.lead{font-size:20px;line-height:30px;letter-spacing:-.02em}
.mut{color:var(--mut)}
.small{font-size:14px;line-height:22px}
.eyebrow{font-size:14px;line-height:20px;color:var(--mut)}
.caption{font-size:12px;line-height:16px;color:var(--mut)}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
.sec{padding-top:112px;padding-bottom:112px}
.dark{background:var(--ink);color:var(--paper)}
.dark .mut,.dark .eyebrow{color:var(--mut-dark)}
.alt{background:var(--g50)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--paper)}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;height:48px;padding:0 32px;background:var(--paper);color:var(--ink);text-decoration:none}
.btn:hover{background:#e5e5e5}
.btn-k{background:var(--ink);color:var(--paper)}
.btn-k:hover{background:#333}
.tl{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.tag{display:inline-block;font-size:12px;line-height:16px;border:1px solid var(--ink);padding:2px 8px;margin-bottom:14px}

/* Hero and header */
.hero{position:relative;min-height:800px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.85) 100%),url(../images/hero.jpg) center/cover var(--ink)}
.hero>.wrap{width:100%}
.head{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex}
.logo{text-decoration:none}
.wm{font-size:15px;line-height:1;letter-spacing:.32em;font-weight:400;margin-right:-.32em;white-space:nowrap;color:#fff}
nav{display:flex;gap:32px;align-items:center}
nav a{white-space:nowrap;font-size:14px;line-height:20px;color:var(--paper);opacity:.6;text-decoration:none}
nav a:hover{opacity:1}
nav .wa{opacity:1;border:1px solid var(--paper);padding:8px 18px}
.lang{font-size:14px;color:var(--paper);white-space:nowrap}
.lang span{opacity:.6}
.lang a{opacity:1}
.hero-body{padding-bottom:64px}
.hero-body h1{max-width:820px}
.hero-body .lead{margin-top:24px;max-width:620px;color:rgba(255,255,255,.75)}
.hero-cta{margin-top:36px;display:flex;align-items:center;flex-wrap:wrap;gap:20px 28px}

/* Layout blocks */
.split{display:flex;gap:64px}
.split>*{min-width:0}
.split-l{flex:4 1 0}
.split-r{flex:8 1 0}
.split-half>*{flex:1 1 0}
.cell{border-top:1px solid var(--ink);padding-top:20px}
.dark .cell{border-top-color:var(--line-dark)}
.grid3,.grid4{display:grid;gap:24px}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.about-text{margin-top:32px}
.stats{margin-top:48px}
.stats .small{margin-top:6px}

/* RFID */
.panel{background:var(--g100);padding:56px 48px;display:flex;flex-direction:column;justify-content:center;gap:48px}
/* Barcode / RFID scanning words */
.scanword{font-size:44px;line-height:52px;letter-spacing:-.04em;margin:8px 0 12px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.s{color:#8c8c8c}@keyframes s0{0%,0.0%{color:#8c8c8c}2.2%,93%{color:#000}100%{color:#8c8c8c}}.s0{animation:8s linear infinite both s0}@keyframes s1{0%,5.2%{color:#8c8c8c}7.5%,93%{color:#000}100%{color:#8c8c8c}}.s1{animation:8s linear infinite both s1}@keyframes s2{0%,10.5%{color:#8c8c8c}12.7%,93%{color:#000}100%{color:#8c8c8c}}.s2{animation:8s linear infinite both s2}@keyframes s3{0%,15.8%{color:#8c8c8c}17.9%,93%{color:#000}100%{color:#8c8c8c}}.s3{animation:8s linear infinite both s3}@keyframes s4{0%,21.0%{color:#8c8c8c}23.2%,93%{color:#000}100%{color:#8c8c8c}}.s4{animation:8s linear infinite both s4}@keyframes s5{0%,26.2%{color:#8c8c8c}28.4%,93%{color:#000}100%{color:#8c8c8c}}.s5{animation:8s linear infinite both s5}@keyframes s6{0%,31.5%{color:#8c8c8c}33.7%,93%{color:#000}100%{color:#8c8c8c}}.s6{animation:8s linear infinite both s6}@keyframes s7{0%,36.8%{color:#8c8c8c}39.0%,93%{color:#000}100%{color:#8c8c8c}}.s7{animation:8s linear infinite both s7}@keyframes s8{0%,42.0%{color:#8c8c8c}44.2%,93%{color:#000}100%{color:#8c8c8c}}.s8{animation:8s linear infinite both s8}@keyframes s9{0%,47.2%{color:#8c8c8c}49.5%,93%{color:#000}100%{color:#8c8c8c}}.s9{animation:8s linear infinite both s9}@keyframes s10{0%,52.5%{color:#8c8c8c}54.7%,93%{color:#000}100%{color:#8c8c8c}}.s10{animation:8s linear infinite both s10}@keyframes s11{0%,57.8%{color:#8c8c8c}60.0%,93%{color:#000}100%{color:#8c8c8c}}.s11{animation:8s linear infinite both s11}@keyframes s12{0%,63.0%{color:#8c8c8c}65.2%,93%{color:#000}100%{color:#8c8c8c}}.s12{animation:8s linear infinite both s12}@keyframes s13{0%,68.2%{color:#8c8c8c}70.5%,93%{color:#000}100%{color:#8c8c8c}}.s13{animation:8s linear infinite both s13}@keyframes s14{0%,73.5%{color:#8c8c8c}75.7%,93%{color:#000}100%{color:#8c8c8c}}.s14{animation:8s linear infinite both s14}@keyframes s15{0%,78.8%{color:#8c8c8c}81.0%,93%{color:#000}100%{color:#8c8c8c}}.s15{animation:8s linear infinite both s15}@keyframes s16{0%,84.0%{color:#8c8c8c}86.2%,93%{color:#000}100%{color:#8c8c8c}}.s16{animation:8s linear infinite both s16}@keyframes s17{0%,89.2%{color:#8c8c8c}91.5%,93%{color:#000}100%{color:#8c8c8c}}.s17{animation:8s linear infinite both s17}@keyframes s18{0%,94.5%{color:#8c8c8c}96.7%,93%{color:#000}100%{color:#8c8c8c}}.s18{animation:8s linear infinite both s18}@keyframes s19{0%,99.8%{color:#8c8c8c}102.0%,93%{color:#000}100%{color:#8c8c8c}}.s19{animation:8s linear infinite both s19}@keyframes sa{0%,3%{color:#8c8c8c}6%,93%{color:#000}100%{color:#8c8c8c}}.sa{animation:8s linear infinite both sa}@media (prefers-reduced-motion:reduce){.s{animation:none!important;color:#000}}@media (max-width:900px){.scanword{font-size:32px;line-height:40px}}
.rfid-copy{padding-top:8px}
.rfid-copy h2{margin-top:16px}
.rfid-copy .gap-s{margin-top:24px}
.row{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--ink)}
.row:last-child{border-bottom:1px solid var(--ink)}
.row .n{width:28px;flex:none}
.rows{margin-top:12px}

/* Why it matters */
.dark h2.xl{margin-top:16px;max-width:760px;font-size:40px;line-height:44px}
.dark h3.xl{font-size:30px;line-height:36px;letter-spacing:-.04em;color:var(--paper)}
.rules{margin-top:72px;border-bottom:1px solid var(--line-dark)}
.rule3{display:grid;grid-template-columns:5fr 5fr 3fr;gap:56px;padding:40px 0;border-top:1px solid var(--line-dark)}
.rule3 .win{color:var(--paper)}

/* Where we help */
.areas{margin-top:56px}
.areas img{width:100%;height:340px;object-fit:cover}
.areas article>div{padding-top:24px}
.areas p{margin-top:12px}
.other{margin-top:64px;max-width:640px}
.other p{margin-top:8px}

/* How we work */
.steps{margin-top:56px;border-bottom:1px solid var(--line-dark)}
.steps li{display:grid;grid-template-columns:120px 5fr 6fr;gap:40px;padding:48px 0;border-top:1px solid var(--line-dark)}
.steps .num{font-size:14px;line-height:28px}
.steps h3{font-size:30px;line-height:36px;letter-spacing:-.04em;color:var(--paper)}

/* Why talk, FAQ */
.why{margin-top:48px}
.why p{margin-top:10px}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-size:20px;line-height:28px;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.pl{flex:none;font-size:24px;line-height:24px;transition:transform .2s}
details[open] .pl{transform:rotate(45deg)}
.ans{margin:0 0 24px;max-width:680px;color:var(--mut);overflow-wrap:anywhere}

/* Closing, contact, footer */
.cta{background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.55) 100%),url(../images/call-to-action.jpg) center/cover var(--ink)}
.cta .wrap{padding-top:152px;padding-bottom:152px}
.cta h2{max-width:760px}
.cta .lead{margin-top:24px;max-width:600px;color:rgba(255,255,255,.75)}
.cta .btn{margin-top:36px}
.contact h2{margin-top:16px;max-width:760px}
.contact-row{margin-top:56px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.number{margin-top:8px;font-size:48px;line-height:52px;letter-spacing:-.045em}
.mention{margin-top:96px}
.mention-grid{margin-top:20px;gap:56px}
.mention-grid .eyebrow+h3{margin-top:20px}
.mention-grid h3+p{margin-top:8px}
footer .wrap{padding-top:64px;padding-bottom:40px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.fcol{min-width:0}
.fcol p,.fcol a{display:block;font-size:14px;line-height:22px;color:var(--mut-dark);text-decoration:none}
.fcol a:hover{color:var(--paper)}
.fcol .h{color:var(--paper);margin-bottom:10px}
.copy{margin-top:56px;border-top:1px solid var(--line-dark);padding-top:20px;font-size:14px;line-height:22px;color:var(--mut-dark)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pl{transition:none}}
@media (max-width:1100px){
nav a:not(.wa){display:none}
nav .lang a{display:inline}
}
@media (max-width:900px){
:root{--g:16px}
h1,.h1{font-size:34px;line-height:38px}
h2,.h2{font-size:26px;line-height:32px}
.dark h2.xl{font-size:28px;line-height:34px}
.dark h3.xl,.steps h3{font-size:24px;line-height:30px}
.sec{padding-top:72px;padding-bottom:72px}
.hero{min-height:680px}
nav{gap:16px}
.split{flex-direction:column;gap:32px}
.split>*{flex:none;width:100%}
.grid3,.grid4,.fgrid{grid-template-columns:minmax(0,1fr)}
.grid4,.mention-grid{gap:24px}
.rule3{grid-template-columns:minmax(0,1fr);gap:16px;padding:28px 0}
.steps li{grid-template-columns:minmax(0,1fr);gap:12px;padding:28px 0}
.panel{padding:32px 24px}
.cta .wrap{padding-top:96px;padding-bottom:96px}
.number{font-size:30px;line-height:36px}
.mention{margin-top:64px}
}
