/* ===== responsive layer: loads after style.css ===== */
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
:root{--safe:env(safe-area-inset-bottom,0px)}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input[type=date]{-webkit-appearance:none;appearance:none;min-height:1.75em;text-align:left;display:block}
.hero .w{position:relative}
.tabs button i{font-style:normal}
.sf>.f:nth-child(2){position:relative}
.sf.fl>.f:nth-child(2) .swp{display:grid}
.deal{display:none}
body.kb .toast{bottom:20px}

/* desktop */
@media(min-width:1081px){
.hero{padding:76px 0 130px}
.sf{padding:22px;gap:12px}.f{padding:10px 16px}.sf .btn{min-width:150px}
.row>*{flex:0 0 calc(25% - 12px)}
section{padding:84px 0}
nav a{padding:8px 11px}
}
@media(min-width:1024px){
.deal{display:block;position:absolute;right:20px;top:6px;width:330px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);border-radius:22px;padding:20px;color:#fff;animation:up .9s .4s backwards}
.deal h3{font-size:19px;margin-bottom:8px}
.deal a{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid rgba(255,255,255,.18);cursor:pointer;transition:.2s}
.deal a:hover{padding-left:6px;color:var(--gold)}
.deal b{color:var(--gold);font-family:var(--d)}
.deal small{display:block;opacity:.8;font-size:13px;margin-top:8px}
.hero.hd2 h1,.hero.hd2 p{max-width:min(640px,calc(100% - 370px))}
}
@media(min-width:1400px){.w{max-width:1280px}.hero h1{font-size:68px}}

/* tablet and below: hamburger menu */
@media(max-width:1080px){
.mb{display:block;padding:6px 10px}
nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:2px;padding:12px 20px 20px;box-shadow:0 24px 30px rgba(0,0,0,.14);max-height:calc(100vh - 110px);overflow:auto}
nav.open{display:flex}
nav a{padding:13px 14px;font-size:17px}
nav .btn{margin:8px 0 0;text-align:center}
}
@media(max-width:900px){
.bot{padding:6px 0 calc(6px + var(--safe))}
.bot a{flex:1;min-width:0;padding:4px 2px}
body.kb .bot,body.kb .fab,body.kb .tt{display:none!important}
}

/* phones */
@media(max-width:600px){
body{font-size:16px}
.w{padding:0 16px}
.top{font-size:13px}.top .w{height:34px}
.nb{height:62px}
.logo{font-size:clamp(14px,4.6vw,20px);white-space:nowrap}.nb .logo{min-width:0}.logo i{width:34px;height:34px;border-radius:10px}
.hero{padding:34px 0 96px}.hero.s{padding:30px 0 90px}
.hero h1{font-size:clamp(31px,9.2vw,42px)}
.hero p{font-size:16.5px;margin-top:12px}
.hero:before{background:linear-gradient(180deg,rgba(11,27,77,.9),rgba(26,43,168,.8))}
.hero:after{width:260px;height:260px;border-width:40px;right:-110px;bottom:-130px}
.fly{font-size:26px;bottom:40%}
.sb{margin-top:-60px;border-radius:20px}
.tabs{padding:10px 6px 0;gap:2px;overflow:visible}
.tabs button{flex:1 1 0;min-width:0;flex-direction:column;justify-content:flex-start;gap:0;padding:8px 2px 9px;font-size:12px;line-height:1.2;white-space:normal;text-align:center;border-radius:12px 12px 0 0}
.tabs button i{font-size:21px;line-height:1.35}
.sf{grid-template-columns:1fr 1fr;padding:12px;gap:8px;border-radius:0 0 20px 20px}
.sf>.f:nth-child(2),.sf>.f:nth-child(3){grid-column:1/-1}
.f{padding:7px 12px;border-radius:12px}.f label{font-size:12px}.f input,.f select,.f textarea{font-size:16px}
.sf .btn{padding:15px;font-size:17px;grid-column:1/-1}
.trp span{padding:4px 14px;font-size:14px}
.qc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 2px}
.qc::-webkit-scrollbar{display:none}
.qc span,.qc .ch{flex:none}.qc .ch{padding:5px 14px;font-size:14px}
.swp{right:14px;top:auto;bottom:-22px;margin:0}
.kpi{grid-template-columns:1fr 1fr;gap:16px 10px;padding:26px 0 4px}
.kpi div{flex-direction:column;align-items:flex-start;gap:8px}
.kpi i{width:46px;height:46px;font-size:22px;border-radius:14px}
.kpi b{font-size:15px}.kpi small{font-size:13px}
section{padding:40px 0}
.hd{margin-bottom:20px;gap:8px}.hd h2{font-size:27px}.hd p{font-size:15px}
.row{gap:12px;margin:0 -16px;padding:4px 16px 16px;scroll-padding-left:16px}
.row>*{flex:0 0 78%;max-width:300px}
.c{min-height:200px;padding:18px}.c h3{font-size:22px}
.c .e img{width:48px;height:32px}
.rt{grid-template-columns:1fr}
.air span{padding:12px 8px;font-size:14px}.air.mq span{min-width:140px}
.sv{grid-template-columns:1fr 1fr;gap:10px}
.sv a{padding:16px}.sv i{font-size:28px}.sv h3{font-size:17px}.sv p{font-size:13.5px}
.vc{padding:18px}.vc h3{font-size:20px}
.app{grid-template-columns:1fr;padding:24px;border-radius:22px}.app .ph{display:none}
.bn{padding:30px 20px;border-radius:22px}
.rv blockquote{padding:20px}
.steps{grid-template-columns:1fr 1fr;gap:16px}.steps h3{font-size:17px}.steps p{font-size:14px}
.promo b{font-size:20px}.promo{padding:16px}
summary{font-size:16px}
.fg{grid-template-columns:1fr 1fr;gap:22px}
.fg>div:first-child,.fg>div:last-child{grid-column:1/-1}
.cp{flex-direction:column}
.mo{place-items:end center;padding:0}
.md{width:100%;border-radius:24px 24px 0 0;padding:22px 18px calc(22px + var(--safe));max-height:92vh;overflow:auto;transform:translateY(40px)}
.md h3{font-size:23px}
.fab{width:52px;height:52px;padding:0;display:grid;place-items:center;font-size:0;right:14px;bottom:calc(76px + var(--safe))}
.fab:before{content:"\1F4AC";font-size:25px}
.tt{right:14px;bottom:calc(136px + var(--safe));width:42px;height:42px}
.toast{bottom:calc(84px + var(--safe));width:max-content;max-width:90%;text-align:center}
}
@media(max-width:360px){.tabs button{font-size:11px}.sv,.steps{grid-template-columns:1fr}}

/* fix: the flag-image class .fl was also applied to the search form in flight mode, shrinking it to 22x15px */
.sf.fl{width:auto;height:auto;margin:0;vertical-align:baseline;object-fit:fill;border-radius:0 0 24px 24px}
.w.kpi{padding-left:20px;padding-right:20px}
@media(max-width:600px){
.sf.fl{border-radius:0 0 20px 20px}
.w.kpi{padding-left:16px;padding-right:16px}
.fly{display:none}
}
body[data-page=contact] .hero{padding-bottom:56px}
.hero .w{z-index:2}
@media(min-width:901px){.fab{bottom:24px}.tt{bottom:88px}}
@media(min-width:1024px){.hero.hd2{padding-bottom:210px}}