:root{
    --knf-dark:#073f3a;
    --knf-dark-2:#0a4f48;
    --knf-green:#12b978;
    --knf-green-hover:#0ea86d;
    --knf-yellow:#e1b52d;
    --knf-bg:#f7faf9;
    --knf-card:#ffffff;
    --knf-soft:#eef8f4;
    --knf-text:#18312e;
    --knf-muted:#71807c;
    --knf-border:#dfe8e5;
}

.kn-form-overlay{
    position:fixed;
    inset:0;
    z-index:999998;
    background:rgba(2,31,28,.64);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    opacity:0;
    visibility:hidden;
    transition:opacity .28s ease,visibility .28s ease;
}

.kn-form-drawer{
    position:fixed;
    top:16px;
    right:16px;
    bottom:16px;
    z-index:999999;
    width:min(620px,calc(100vw - 32px));
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    background:var(--knf-bg);
    border:1px solid rgba(255,255,255,.5);
    border-radius:30px;
    box-shadow:-28px 0 80px rgba(0,0,0,.22);
    transform:translateX(calc(100% + 28px));
    transition:transform .38s cubic-bezier(.2,.78,.2,1);
    font-family:'Rethink Sans',Arial,sans-serif;
    color:var(--knf-text);
    scrollbar-width:thin;
    scrollbar-color:#cbd8d4 transparent;
}

.kn-form-drawer::-webkit-scrollbar{width:7px;}
.kn-form-drawer::-webkit-scrollbar-track{background:transparent;}
.kn-form-drawer::-webkit-scrollbar-thumb{background:#cbd8d4;border-radius:999px;}

body.kn-form-open{overflow:hidden;}
body.kn-form-open .kn-form-overlay{opacity:1;visibility:visible;}
body.kn-form-open .kn-form-drawer{transform:translateX(0);}

/* The close button stays accessible, but only the button stays sticky —
   the form header itself scrolls away naturally with the form. */
.kn-form-close{
    position:sticky;
    top:14px;
    z-index:30;
    float:right;
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:14px 14px -57px 0;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:background .2s ease,color .2s ease,transform .2s ease;
}
.kn-form-close:hover{background:#fff;color:var(--knf-dark);transform:rotate(4deg);}
.kn-form-close:focus-visible{outline:3px solid rgba(225,181,45,.38);outline-offset:2px;}

.kn-form-drawer-head{
    position:relative;
    overflow:hidden;
    padding:46px 74px 32px 32px;
    background:
        radial-gradient(circle at 96% 6%,rgba(225,181,45,.17),transparent 30%),
        radial-gradient(circle at 78% 105%,rgba(18,185,120,.18),transparent 33%),
        var(--knf-dark);
    color:#fff;
    border-radius:29px 29px 26px 26px;
}
.kn-form-drawer-head:after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    bottom:-105px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    pointer-events:none;
}

.kn-form-eyebrow{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:var(--knf-yellow);
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.kn-form-eyebrow:before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--knf-yellow);
}

.kn-form-drawer h2{
    position:relative;
    z-index:1;
    margin:0;
    max-width:470px;
    color:#fff;
    font-size:clamp(34px,5vw,48px);
    line-height:1.08;
    font-weight:800;
    letter-spacing:-.045em;
}
.kn-form-drawer-head p{
    position:relative;
    z-index:1;
    max-width:470px;
    margin:15px 0 0;
    color:rgba(255,255,255,.68);
    font-size:15px;
    line-height:1.7;
}

/* Header is deliberately NOT sticky. The drawer is the scroll container. */
.kn-form-body{
    overflow:visible;
    padding:26px 26px 36px;
}

.kn-form-message{
    display:none;
    margin-bottom:18px;
    padding:13px 15px;
    border-radius:15px;
    font-size:14px;
    line-height:1.55;
}
.kn-form-message.is-error{display:block;background:#fff1ef;color:#922f29;border:1px solid #efcbc6;}
.kn-form-message.is-success{display:block;background:#e9f8f1;color:#0b6946;border:1px solid #c3ead8;}

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

.kn-form-section-label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:6px 0 -2px;
    color:var(--knf-dark);
    font-size:12px;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}
.kn-form-section-label:before{
    content:"";
    width:18px;
    height:2px;
    border-radius:999px;
    background:var(--knf-green);
}

.kn-field label{
    display:block;
    margin:0 0 7px 2px;
    color:var(--knf-dark);
    font-size:12px;
    font-weight:800;
    letter-spacing:.065em;
    text-transform:uppercase;
}
.kn-field label .optional{
    color:#99a5a1;
    font-weight:700;
    text-transform:none;
    letter-spacing:0;
}

.kn-field input,
.kn-field select,
.kn-field textarea{
    width:100%;
    min-height:52px;
    border:1px solid var(--knf-border);
    border-radius:17px;
    background:#fff;
    color:var(--knf-text);
    padding:13px 16px;
    font:600 16px/1.5 'Rethink Sans',Arial,sans-serif;
    outline:none;
    box-shadow:0 5px 16px rgba(7,63,58,.025);
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.kn-field textarea{
    min-height:128px;
    resize:vertical;
}
.kn-field input::placeholder,
.kn-field textarea::placeholder{color:#9aa6a2;font-weight:500;}
.kn-field input:focus,
.kn-field select:focus,
.kn-field textarea:focus{
    border-color:rgba(18,185,120,.72);
    box-shadow:0 0 0 4px rgba(18,185,120,.09);
    background:#fff;
}
.kn-field select{
    appearance:auto;
}
.kn-field input[type=file]{
    min-height:58px;
    padding:9px;
    background:#fff;
}
.kn-field input[type=file]::file-selector-button{
    min-height:38px;
    margin-right:10px;
    padding:0 14px;
    border:0;
    border-radius:999px;
    background:var(--knf-soft);
    color:var(--knf-dark);
    font:800 13px/1 'Rethink Sans',Arial,sans-serif;
    cursor:pointer;
}
.kn-field input[type=file]::file-selector-button:hover{background:#dff2eb;}
.kn-field small{
    display:block;
    margin:7px 2px 0;
    color:var(--knf-muted);
    font-size:12px;
    line-height:1.5;
}

.kn-check-field{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px;
    border:1px solid var(--knf-border);
    border-radius:17px;
    background:#fff;
}
.kn-check-field input{margin-top:2px;}
.kn-check-field span{font-size:14px;line-height:1.55;color:var(--knf-text);}

.kn-context-box{
    position:relative;
    overflow:hidden;
    padding:15px 16px 15px 18px;
    border:1px solid #d7ebe4;
    border-radius:17px;
    background:var(--knf-soft);
    color:var(--knf-dark);
    font-size:14px;
    line-height:1.6;
}
.kn-context-box:before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:4px;
    background:var(--knf-green);
}
.kn-context-box strong{font-weight:800;}

.kn-form-actions{
    margin-top:20px;
    padding-top:4px;
}
.kn-form-submit{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:999px;
    background:var(--knf-green);
    color:#fff;
    font:800 14px/1 'Rethink Sans',Arial,sans-serif;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(18,185,120,.18);
    transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.kn-form-submit:hover{
    background:var(--knf-dark);
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(7,63,58,.16);
}
.kn-form-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none;}

.kn-form-footnote{
    margin:12px 2px 0;
    color:#8a9793;
    font-size:11px;
    line-height:1.6;
    text-align:center;
}

.kn-form-honeypot{
    position:absolute!important;
    left:-9999px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}

@media(min-width:640px){
    .kn-form-row{grid-template-columns:1fr 1fr;}
    .kn-form-drawer-head{padding:54px 88px 36px 38px;}
    .kn-form-body{padding:30px 38px 42px;}
}

@media(max-width:639px){
    .kn-form-drawer{
        top:0;
        right:0;
        bottom:0;
        width:100vw;
        max-width:none;
        border:0;
        border-radius:0;
        box-shadow:none;
        transform:translateX(105%);
        padding-bottom:env(safe-area-inset-bottom,0px);
    }
    .kn-form-drawer-head{
        padding:
            max(38px,env(safe-area-inset-top,0px))
            66px
            28px
            22px;
        border-radius:0 0 28px 28px;
    }
    .kn-form-close{
        top:max(12px,env(safe-area-inset-top,0px));
        margin-right:12px;
    }
    .kn-form-body{padding:24px 20px 38px;}
    .kn-form-drawer h2{font-size:36px;}
}

@media(max-width:390px){
    .kn-form-drawer h2{font-size:33px;}
    .kn-form-drawer-head{padding-left:18px;}
    .kn-form-body{padding-left:16px;padding-right:16px;}
}

@media(prefers-reduced-motion:reduce){
    .kn-form-overlay,
    .kn-form-drawer,
    .kn-form-submit,
    .kn-form-close{transition:none!important;}
}