:root{
    --bg:#080808;
    --panel:#111;
    --panel2:#181818;
    --text:#f4f4f4;
    --muted:#999;
    --line:#292929;
    --soft:#202020
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
    font-size:15px
}

a{
    color:inherit;
    text-decoration:none
}

button,input,textarea,select{
    font:inherit
}

button{
    cursor:pointer
}

.site-header{
    height:82px;
    display:flex;
    align-items:center;
    padding:0 58px;
    background:#050505;
    border-bottom:1px solid #1a1a1a;
    position:sticky;
    top:0;
    z-index:20
}

.brand img{
    width:140px;
    display:block;
    filter:invert(1) brightness(1.2)
}

.nav-links{
    display:flex;
    align-items:center;
    gap:34px;
    margin-left:52px
}

.nav-links a{
    font-size:13px;
    font-weight:800;
    color:#d5d5d5
}

.nav-links a:hover{
    color:#fff
}

.header-actions{
    margin-left:auto;
    display:flex;
    gap:22px;
    align-items:center
}

.header-request{
    border:1px solid #666;
    border-radius:999px;
    padding:11px 18px;
    font-size:12px;
    font-weight:800
}

.header-request:hover{
    background:#fff;
    color:#080808
}

.search-link{
    font-size:25px;
    line-height:1;
    color:#eee
}

.hero{
    min-height:590px;
    position:relative;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,.9) 34%,
            rgba(0,0,0,.48) 67%,
            rgba(0,0,0,.78) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.1),
            rgba(0,0,0,.88)
        ),
        url('https://airstudios.nl/assets/banner.png') center right/cover no-repeat;
    overflow:hidden
}

.hero:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 74% 28%,
            rgba(255,255,255,.08),
            transparent 31%
        ),
        linear-gradient(
            90deg,
            transparent 0 70%,
            rgba(0,0,0,.35)
        );
    pointer-events:none
}

.hero-inner{
    max-width:1500px;
    margin:0 auto;
    min-height:590px;
    display:flex;
    align-items:center;
    padding:70px 64px;
    position:relative;
    z-index:1
}

.hero-copy{
    max-width:760px
}

.eyebrow{
    font-size:11px;
    text-transform:none;
    letter-spacing:.16em;
    font-weight:900;
    color:#aaa;
    margin-bottom:15px
}

.hero h1,
.section-heading h2,
.page-intro h1,
.article-page h1,
.article-content h2,
.request-heading h1,
.wizard-title h2,
.redirect-card h2,
.cta-section h2,
.solution-card h3,
.compact-article h3,
.article-card h2,
.admin-panel h1,
.admin-panel h2,
.login-card h1{
    font-family:Rajdhani,Inter,Arial,sans-serif
}

.hero h1{
    font-size:clamp(70px,7.5vw,116px);
    line-height:.83;
    letter-spacing:-.035em;
    margin:0 0 26px;
    font-weight:700
}

.hero p{
    font-size:18px;
    line-height:1.65;
    color:#d0d0d0;
    max-width:650px;
    margin:0
}

.hero-actions,
.wizard-actions{
    display:flex;
    gap:14px;
    align-items:center;
    margin-top:32px
}

.primary-button,
.secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    border:1px solid transparent;
    padding:14px 19px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap
}

.primary-button{
    background:#fff;
    color:#080808
}

.secondary-button{
    background:#222;
    border-color:#4c4c4c;
    color:#fff
}

.primary-button:hover{
    background:#ddd
}

.secondary-button:hover{
    background:#2c2c2c
}

.primary-button span,
.secondary-button span{
    font-size:18px
}

.text-button{
    font-size:12px;
    font-weight:700;
    color:#ddd;
    border-bottom:1px solid #777;
    padding-bottom:3px
}

.quick-section,
.browse-section{
    max-width:1500px;
    margin:0 auto;
    padding:76px 64px 0
}

.section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:28px
}

.section-heading h2{
    font-size:50px;
    line-height:.9;
    letter-spacing:-.02em;
    margin:0;
    font-weight:700
}

.section-heading a{
    font-size:12px;
    font-weight:800;
    color:#ddd
}

.section-heading a span{
    font-size:18px;
    margin-left:5px
}

.solution-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}

/*
|--------------------------------------------------------------------------
| FIXED FEATURED ARTICLE CARDS
|--------------------------------------------------------------------------
*/

.solution-card{
    min-height:220px;
    background:#1c1c1c;
    border:1px solid #2d2d2d;
    border-radius:2px;
    padding:0;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    transition:transform .2s,border-color .2s,background .2s
}

.solution-card:hover{
    transform:translateY(-4px);
    border-color:#4a4a4a;
    background:#232323
}

.solution-thumb{
    width:100%;
    height:130px;
    flex-shrink:0;
    overflow:hidden;
    border-bottom:1px solid #2d2d2d;
    background:#111
}

.solution-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.8;
    filter:saturate(.8)
}

.solution-card>div:not(.solution-thumb){
    flex:1;
    padding:25px 27px 55px
}

.solution-card h3{
    font-size:29px;
    line-height:.98;
    margin:0 0 8px;
    font-weight:700
}

.solution-card p{
    margin:0;
    color:#aaa;
    line-height:1.55;
    font-size:13px
}

.solution-card .solution-arrow{
    position:absolute;
    right:22px;
    bottom:20px;
    font-size:22px;
    color:#ddd
}

.solution-card:hover{
    transform:translateY(-4px);
    border-color:#4a4a4a;
    background:#232323
}

.solution-card>div:not(.solution-thumb){
    padding:25px 27px 55px
}

.solution-thumb{
    width:100%;
    height:130px;
    overflow:hidden;
    border-bottom:1px solid #2d2d2d;
    background:#111
}

.solution-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.8;
    filter:saturate(.8)
}

.solution-card h3{
    font-size:29px;
    line-height:.98;
    margin:0 0 8px;
    font-weight:700
}

.solution-card p{
    margin:0;
    color:#aaa;
    line-height:1.55;
    font-size:13px
}

.solution-card .solution-arrow{
    position:absolute;
    right:22px;
    bottom:20px;
    font-size:22px;
    color:#ddd
}

.browse-section{
    padding-bottom:72px
}

.compact-list{
    border-top:1px solid var(--line)
}

.compact-article{
    display:grid;
    grid-template-columns:78px 1fr auto;
    align-items:center;
    gap:18px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    transition:padding .2s,background .2s
}

.compact-article:hover{
    padding-left:14px;
    padding-right:14px;
    background:#0d0d0d
}

.compact-thumb{
    width:78px;
    height:58px;
    object-fit:cover;
    border:1px solid #303030
}

.compact-article h3{
    font-size:28px;
    line-height:1;
    margin:0 0 8px
}

.compact-article p{
    margin:0;
    max-width:780px;
    color:#999;
    font-size:13px;
    line-height:1.5
}

.compact-date{
    white-space:nowrap;
    color:#777;
    font-size:10px;
    font-weight:800
}

.compact-date span{
    font-size:18px;
    color:#aaa;
    margin-left:8px
}

.cta-section{
    max-width:1372px;
    margin:0 auto 90px;
    background:#141414;
    border:1px solid #2c2c2c;
    padding:30px 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px
}

.cta-copy h2{
    font-size:44px;
    line-height:.9;
    margin:0 0 8px
}

.cta-copy p{
    margin:0;
    color:#999
}

.site-footer{
    min-height:90px;
    border-top:1px solid #1c1c1c;
    background:#050505;
    padding:27px 58px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#777;
    font-size:11px;
    font-weight:800
}

.site-footer>div{
    display:flex;
    align-items:center;
    gap:12px
}

.footer-icon{
    width:23px;
    filter:invert(1);
    opacity:.8
}

.page-intro{
    max-width:1500px;
    margin:0 auto;
    padding:78px 64px 42px;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px
}

.page-intro h1{
    font-size:82px;
    line-height:.88;
    margin:0 0 11px
}

.page-intro p{
    margin:0;
    color:#999
}

.search-form{
    display:flex;
    border:1px solid #444;
    min-width:min(500px,100%)
}

.search-form input{
    border:0;
    background:#151515;
    color:#fff;
    outline:0;
    padding:15px 16px;
    flex:1;
    min-width:0
}

.search-form button{
    background:#fff;
    color:#080808;
    border:0;
    padding:0 21px;
    font-size:11px;
    font-weight:900
}

.section-pad{
    max-width:1372px;
    margin:0 auto;
    padding-bottom:90px
}

.article-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}

.article-card{
    display:flex;
    flex-direction:column;
    background:#161616;
    border:1px solid #2d2d2d;
    overflow:hidden;
    transition:transform .2s,border-color .2s
}

.article-card:hover{
    transform:translateY(-4px);
    border-color:#4b4b4b
}

.article-thumb{
    height:180px;
    background:#0c0c0c;
    border-bottom:1px solid #2d2d2d
}

.article-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.article-card-body{
    min-height:285px;
    display:flex;
    flex-direction:column;
    padding:27px
}

.article-category{
    font-size:10px;
    font-weight:900;
    color:#8e8e8e;
    letter-spacing:.08em;
    margin-bottom:12px
}

.article-card h2{
    font-size:35px;
    line-height:.98;
    margin:0 0 14px
}

.article-card p{
    color:#999;
    font-size:14px;
    line-height:1.6;
    margin:0
}

.read-more{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
    padding-top:26px;
    font-size:11px;
    font-weight:800
}

.read-more span{
    font-size:18px
}

.article-shell{
    max-width:1100px;
    margin:0 auto;
    padding:70px 32px 110px
}

.article-breadcrumb{
    display:flex;
    gap:11px;
    color:#777;
    font-size:11px;
    font-weight:700;
    margin-bottom:28px
}

.article-hero-image{
    height:340px;
    margin-bottom:45px;
    background:#0d0d0d;
    border:1px solid #292929;
    overflow:hidden
}

.article-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.9
}

.article-page{
    max-width:850px;
    margin:0 auto
}

.article-page h1{
    font-size:clamp(60px,8vw,96px);
    line-height:.83;
    margin:0 0 21px
}

.article-lead{
    font-size:19px;
    line-height:1.6;
    color:#aaa;
    margin:0
}

.article-meta{
    font-size:10px;
    color:#777;
    margin:21px 0 48px
}

.article-content{
    font-size:17px;
    line-height:1.8;
    color:#d0d0d0
}

.article-content h2{
    font-size:37px;
    line-height:1;
    margin:52px 0 13px
}

.article-content h3{
    font-size:25px;
    margin:34px 0 10px
}

.article-content p{
    margin:0 0 16px
}

.article-content a{
    color:#fff;
    text-decoration:underline
}

.article-content ul,
.article-content ol{
    padding-left:22px
}

.article-content li{
    margin:7px 0
}

.article-content blockquote{
    margin:25px 0;
    padding:18px 20px;
    border-left:3px solid #fff;
    background:#161616;
    color:#aaa
}

.article-content code{
    font-family:Consolas,monospace;
    background:#202020;
    padding:2px 5px
}

.article-content pre{
    background:#020202;
    border:1px solid #2a2a2a;
    color:#fff;
    padding:20px;
    overflow:auto
}

.md-spacer{
    height:3px
}

.empty-state,
.empty-page{
    padding:70px;
    border:1px dashed #444;
    color:#999
}

.empty-page{
    max-width:1372px;
    margin:70px auto 110px
}

.empty-page h1{
    font-size:65px;
    color:#fff;
    margin:0 0 12px
}

.request-shell{
    max-width:1060px;
    margin:0 auto;
    padding:72px 32px 110px
}

.request-heading{
    margin-bottom:38px
}

.request-heading h1{
    font-size:78px;
    line-height:.88;
    margin:0 0 13px
}

.request-heading p{
    max-width:720px;
    font-size:17px;
    line-height:1.65;
    color:#999
}

.wizard-progress{
    display:flex;
    align-items:center;
    gap:10px;
    margin:25px 0 35px
}

.wizard-progress span{
    width:31px;
    height:31px;
    border:1px solid #393939;
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:900;
    color:#777
}

.wizard-progress span.active{
    background:#fff;
    color:#080808;
    border-color:#fff
}

.wizard-progress span.done{
    background:#222;
    color:#fff;
    border-color:#555
}

.wizard-progress i{
    width:42px;
    height:1px;
    background:#2c2c2c
}

.wizard-progress i.filled{
    background:#777
}

.wizard-title{
    margin-bottom:24px
}

.wizard-title h2{
    font-size:50px;
    line-height:.9;
    margin:0 0 10px
}

.wizard-title p{
    margin:0;
    color:#999;
    line-height:1.6
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}

.service-card,
.wizard-option{
    position:relative;
    display:block;
    cursor:pointer
}

.service-card input,
.wizard-option input{
    position:absolute;
    opacity:0;
    pointer-events:none
}

.service-card-inner{
    display:flex;
    flex-direction:column;
    min-height:260px;
    background:#151515;
    border:1px solid #2b2b2b;
    padding:0;
    transition:transform .2s,border-color .2s,background .2s
}

.service-card:hover .service-card-inner,
.wizard-option:hover .wizard-option-inner{
    transform:translateY(-3px);
    border-color:#505050
}

.service-card input:checked+.service-card-inner{
    border-color:#fff;
    background:#1b1b1b
}

.service-card img{
    width:100%;
    height:145px;
    object-fit:cover;
    border-bottom:1px solid #2b2b2b
}

.service-copy{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:19px 20px
}

.service-copy strong{
    font-family:Rajdhani,Inter,sans-serif;
    font-size:25px;
    line-height:1
}

.service-copy small{
    color:#999;
    line-height:1.55;
    font-size:12px
}

.service-check{
    margin-top:auto;
    padding:0 20px 17px;
    font-size:18px;
    color:#aaa
}

.service-icon.star{
    height:145px;
    display:grid;
    place-items:center;
    font-size:70px;
    border-bottom:1px solid #2b2b2b;
    color:#ddd
}

.wizard-form{
    margin-top:15px
}

.wizard-options{
    display:grid;
    gap:12px
}

.wizard-option-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:20px 22px;
    background:#151515;
    border:1px solid #2b2b2b;
    transition:transform .2s,border-color .2s,background .2s
}

.wizard-option input:checked+.wizard-option-inner{
    border-color:#fff;
    background:#1b1b1b
}

.wizard-option-inner strong{
    font-size:15px
}

.option-arrow{
    font-size:20px;
    color:#888
}

.redirect-card{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:25px;
    background:#151515;
    border:1px solid #2c2c2c;
    padding:30px
}

.redirect-icon{
    width:64px;
    height:64px;
    border:1px solid #555;
    display:grid;
    place-items:center;
    font-size:30px
}

.redirect-card h2{
    font-size:48px;
    line-height:.9;
    margin:0 0 12px
}

.redirect-card p{
    color:#aaa;
    line-height:1.65;
    max-width:680px
}

.request-form{
    background:#111;
    border:1px solid #292929;
    padding:30px
}

.request-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}

.request-field.full{
    grid-column:1/-1
}

.request-field{
    display:grid;
    gap:8px
}

.request-field label{
    font-size:11px;
    font-weight:800;
    color:#ddd
}

.request-field label span{
    color:#ff9fc5
}

.request-field input,
.request-field textarea,
.request-field select{
    width:100%;
    background:#181818;
    border:1px solid #353535;
    color:#fff;
    padding:13px 14px;
    outline:none
}

.request-field textarea{
    min-height:150px;
    resize:vertical;
    line-height:1.55
}

.request-field input:focus,
.request-field textarea:focus,
.request-field select:focus{
    border-color:#8a8a8a
}

.request-field small{
    color:#777;
    font-size:11px;
    line-height:1.5
}

.request-submit{
    margin-top:0
}

.form-notice{
    padding:15px 18px;
    border:1px solid #333;
    margin-bottom:20px
}

.form-notice.success{
    background:#112016;
    border-color:#294e35
}

.form-notice.error{
    background:#241313;
    border-color:#5a2c2c
}

.honeypot-input{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0
}

.admin-body{
    background:#080808
}

.admin-wrap{
    max-width:1500px;
    margin:0 auto;
    padding:20px 30px 70px
}

.admin-header{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px
}

.admin-header .brand img{
    width:140px;
    filter:invert(1)
}

.admin-actions{
    display:flex;
    gap:18px;
    font-size:11px;
    font-weight:800
}

.admin-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(440px,.8fr);
    gap:18px
}

.admin-panel{
    background:#121212;
    border:1px solid #2b2b2b;
    padding:27px;
    margin-bottom:18px
}

.panel-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px
}

.admin-panel h1,
.admin-panel h2{
    font-size:36px;
    line-height:1;
    margin:0
}

.admin-panel h2{
    font-size:29px
}

.editor-form{
    display:grid;
    gap:15px
}

.editor-form label,
.check{
    font-size:10px;
    font-weight:800;
    color:#ddd
}

.editor-form input,
.editor-form textarea,
.editor-form select{
    width:100%;
    background:#1a1a1a;
    color:#fff;
    border:1px solid #363636;
    padding:11px 12px;
    outline:none
}

.editor-form textarea{
    line-height:1.55;
    resize:vertical
}

.form-two,
.form-three{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px
}

.form-three{
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.check-row{
    display:flex;
    gap:18px;
    flex-wrap:wrap
}

.check{
    display:flex;
    align-items:center;
    gap:8px
}

.check input{
    width:auto
}

.admin-list{
    margin-top:15px;
    border-top:1px solid #2c2c2c
}

.admin-list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:13px 0;
    border-bottom:1px solid #2c2c2c
}

.admin-list-item strong{
    font-size:13px
}

.admin-list-item span{
    font-size:10px;
    color:#777
}

.list-actions{
    display:flex;
    gap:12px
}

.list-actions a,
.list-actions button,
.danger-link{
    border:0;
    background:none;
    color:#ddd;
    text-decoration:underline;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
    padding:0
}

.danger-link{
    color:#ef9d9d
}

.label-hint,
.admin-help{
    font-size:10px;
    color:#777;
    font-weight:500
}

.header-link-fields,
.workflow-editor{
    border-top:1px solid #2a2a2a;
    padding-top:16px
}

.header-link-fields h3,
.workflow-editor h3{
    margin:0 0 12px;
    font-size:20px
}

.notice{
    padding:13px 15px;
    border:1px solid #333;
    background:#151515;
    margin-bottom:18px;
    font-size:12px
}

.notice.error{
    border-color:#5a2c2c;
    background:#241313
}

.notice.success{
    border-color:#294e35;
    background:#112016
}

.login-wrap{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:30px
}

.login-card{
    width:min(450px,100%);
    background:#121212;
    border:1px solid #333;
    padding:38px
}

.login-logo{
    width:150px;
    filter:invert(1);
    margin-bottom:28px
}

.login-card h1{
    font-size:53px;
    line-height:.9;
    margin:0 0 11px
}

.login-card p{
    color:#999;
    line-height:1.6
}

.login-card form{
    display:grid;
    gap:15px;
    margin-top:22px
}

.login-card label{
    display:grid;
    gap:7px;
    font-size:10px;
    font-weight:800
}

.login-card input{
    background:#1a1a1a;
    color:#fff;
    border:1px solid #363636;
    padding:13px
}

.back-link{
    display:inline-block;
    margin-top:20px;
    font-size:10px;
    font-weight:800
}

.builder-list{
    display:grid;
    gap:12px
}

.builder-field{
    border:1px solid #303030;
    background:#0e0e0e;
    padding:17px
}

.builder-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:13px
}

.builder-title span{
    font-size:9px;
    color:#777
}

.builder-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:4px
}

.builder-actions{
    display:flex;
    justify-content:flex-end
}

.add-field-form{
    margin-top:12px
}

.request-admin-list{
    display:grid;
    gap:9px;
    margin-top:14px
}

.request-item{
    border:1px solid #2e2e2e;
    background:#0e0e0e
}

.request-item summary{
    cursor:pointer;
    list-style:none;
    padding:15px;
    display:flex;
    justify-content:space-between;
    gap:14px
}

.request-item summary::-webkit-details-marker{
    display:none
}

.request-item summary span{
    color:#777;
    font-size:10px
}

.request-detail{
    padding:0 15px 15px;
    border-top:1px solid #2e2e2e
}

.request-detail>div{
    padding:13px 0;
    border-bottom:1px solid #202020
}

.request-detail strong{
    font-size:10px;
    color:#aaa
}

.request-detail p{
    margin:5px 0 0;
    white-space:pre-wrap;
    color:#ddd;
    font-size:13px
}

.clear-form{
    margin-top:15px
}

.danger-button{
    background:#331717;
    color:#ffdada;
    border:1px solid #663333;
    padding:10px 13px;
    font-size:10px;
    font-weight:800
}

.danger-button:hover{
    background:#432020
}

.admin-thumb{
    width:88px;
    height:58px;
    object-fit:cover;
    float:right;
    border:1px solid #333
}

@media(max-width:1050px){

    .site-header{
        padding:0 24px
    }

    .nav-links{
        gap:19px;
        margin-left:28px
    }

    .hero-inner{
        padding:60px 32px
    }

    .quick-section,
    .browse-section{
        padding-left:32px;
        padding-right:32px
    }

    .solution-grid,
    .article-grid{
        grid-template-columns:1fr
    }

    .page-intro{
        padding:70px 32px 38px
    }

    .section-pad{
        padding-left:32px;
        padding-right:32px
    }

    .request-shell{
        padding-left:22px;
        padding-right:22px
    }

    .request-fields{
        grid-template-columns:1fr
    }

    .request-field.half,
    .request-field.full{
        grid-column:auto
    }

    .admin-grid{
        grid-template-columns:1fr
    }

    .form-three{
        grid-template-columns:1fr
    }

    .service-grid{
        grid-template-columns:1fr
    }
}

@media(max-width:720px){

    .site-header{
        height:70px
    }

    .brand img{
        width:122px
    }

    .nav-links{
        display:none
    }

    .header-request{
        padding:10px 12px;
        font-size:10px
    }

    .hero,
    .hero-inner{
        min-height:500px
    }

    .hero-inner{
        padding:52px 24px
    }

    .hero h1{
        font-size:67px
    }

    .hero p{
        font-size:16px
    }

    .hero-actions,
    .wizard-actions{
        flex-direction:column;
        align-items:flex-start
    }

    .section-heading{
        align-items:flex-start;
        flex-direction:column
    }

    .section-heading h2{
        font-size:41px
    }

    .quick-section,
    .browse-section{
        padding:60px 20px 0
    }

    .browse-section{
        padding-bottom:65px
    }

    .compact-article{
        grid-template-columns:1fr
    }

    .compact-thumb{
        display:none
    }

    .cta-section{
        margin:0 20px 70px;
        flex-direction:column;
        align-items:flex-start;
        padding:25px
    }

    .page-intro{
        padding:60px 20px 34px;
        display:block
    }

    .page-intro h1,
    .request-heading h1{
        font-size:61px
    }

    .search-form{
        margin-top:25px;
        min-width:0
    }

    .section-pad{
        padding:0 20px 70px
    }

    .article-shell{
        padding:45px 20px 80px
    }

    .article-page h1{
        font-size:58px
    }

    .article-hero-image{
        height:230px
    }

    .request-shell{
        padding:60px 20px 80px
    }

    .request-form{
        padding:22px
    }

    .site-footer{
        padding:25px 20px;
        gap:15px
    }

    .service-grid{
        grid-template-columns:1fr
    }

    .redirect-card{
        grid-template-columns:1fr
    }

    .wizard-title h2{
        font-size:40px
    }

    .admin-wrap{
        padding:14px
    }

    .admin-panel{
        padding:20px
    }

    .form-two{
        grid-template-columns:1fr
    }

    .admin-header .brand img{
        width:120px
    }
}

.cta-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-shrink:0
}

.discord-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:42px
}

.discord-logo{
    width:20px;
    height:20px;
    flex-shrink:0
}

.discord-button span:last-child{
    font-size:18px;
    line-height:1;
    margin-left:3px
}

.cta-actions .primary-button{
    min-height:42px
}

@media(max-width:720px){
    .cta-actions{
        width:100%;
        flex-direction:column;
        align-items:stretch
    }

    .cta-actions a{
        width:100%
    }
}