/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */

:root{
  --bg: #fffbf9;
  --pill-bg:#fa820259;
  --chip-bg:#bbb;
  --band-bg:#fff;
  --text: #111;
  --muted: #222;
  --muted-2: #333;
  --card: #121212;
  --card-2: #1a1a1a;
  --border: #eee;
  --border-2: rgb(255 255 255 / 6%);
  --accent-1: #be4300;
  --accent-2: #eea847;
  --accent-3: #f5c600;
  --white: #fff;
  --black: #001428;
  --container: 80rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --shadow-lg: 0 20px 40px rgb(0 0 0 / 35%);
}

body,*{
    font-family: Inter, serif;
  
}


body{
    margin: 0 8px;
    overflow: overlay;
}



/* Progressive scaling for headings */
@media (width >= 768px) {
    h1, .h1 { font-size: 51px; }
    h2, .h2 { font-size: 44px; }
    h3, .h3 { font-size: 36px; }
    h4, .h4 { font-size: 30px; }
    h5, .h5 { font-size: 1rem; }
}

@media (width >= 1120px) {
    h1, .h1 { font-size: 68px; }
    h2, .h2 { font-size: 56px; }
    h3, .h3 { font-size: 46px; }
    h4, .h4 { font-size: 38px; }
    h5, .h5 { font-size: 1.2rem; }
}

@media (width >= 1600px) {
    h1, .h1 { font-size: 85px; }
    h2, .h2 { font-size: 70px; }
    h3, .h3 { font-size: 58px; }
    h4, .h4 { font-size: 48px; }
    h5, .h5 { font-size: 1.4rem; }
}

@media (width >= 1920px) {
    h1, .h1 { font-size: 92px; }
    h2, .h2 { font-size: 76px; }
    h3, .h3 { font-size: 63px; }
    h4, .h4 { font-size: 52px; }
    h5, .h5 { font-size: 1.6rem; }
}

@media (width >= 2560px) {
    h1, .h1 { font-size: 110px; }
    h2, .h2 { font-size: 90px; }
    h3, .h3 { font-size: 75px; }
    h4, .h4 { font-size: 62px; }
    h5, .h5 { font-size: 1.8rem; }
}

@media (width >= 3200px) {
    h1, .h1 { font-size: 125px; }
    h2, .h2 { font-size: 105px; }
    h3, .h3 { font-size: 88px; }
    h4, .h4 { font-size: 72px; }
    h5, .h5 { font-size: 2rem; }
}

@media (width >= 3840px) {
    h1, .h1 { font-size: 140px; }
    h2, .h2 { font-size: 118px; }
    h3, .h3 { font-size: 98px; }
    h4, .h4 { font-size: 82px; }
    h5, .h5 { font-size: 2.2rem; }
}

/* Header */
.nc-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.nc-header-row{height:4rem;display:flex;align-items:center;justify-content:space-between; gap: 1rem;}

.nc-brand{display:flex;align-items:center;gap:.75rem}
.nc-brand-badge{height:2.25rem;width:2.25rem;border-radius:1rem;background:linear-gradient(135deg,var(--accent-1),var(--accent-2) 60%,var(--accent-3));box-shadow:0 8px 30px rgb(240 171 252 / 25%)}
.nc-brand-text{line-height:1.1}
.nc-brand-title{font-weight:600;letter-spacing:.02em;white-space:nowrap;}

.nc-brand-title svg{    
  width: min(650px, 80dvw);
  height: calc(min(650px, 80dvw) / 216 * 45);}
.nc-brand-sub{font-size:.75rem;color:var(--muted)}

/* Nav */   
.nc-nav{display:none;align-items:center;gap:1.5rem}

@media (width >=768px){.nc-nav{display:flex;        justify-content: flex-end;}}
.nc-nav-link{font-size:.9rem;color:var(--muted);background:none;border:none;cursor:pointer;transition:.2s color}
.nc-nav-link:hover{color:#002f4a}
.nc-cta{display:inline-flex;align-items:center;font-size:.9rem;font-weight:600;border-radius:1rem;padding:.5rem 1rem;background:#002d4824;color:#0a0a0a;text-decoration:none;box-shadow:0 10px 24px rgb(255 255 255 / 8%);border:1px solid var(--border);}

.nc-cta--full{justify-content:center;padding-left: 3rem;padding-right: 3rem;background-color: #002d48;
    color: white;}

    /* Enhanced nav link scaling */
@media (width >= 1920px) {
    .nc-nav-link { font-size: 1rem; }
    .nc-cta { font-size: 1rem; padding: .6rem 1.2rem; }
}

@media (width >= 2560px) {
    .nc-nav-link { font-size: 1.1rem; }
    .nc-cta { font-size: 1.1rem; padding: .7rem 1.4rem; }
}

@media (width >= 3200px) {
    .nc-nav-link { font-size: 1.25rem; }
    .nc-cta { font-size: 1.25rem; padding: .8rem 1.6rem; }
}

@media (width >= 3840px) {
    .nc-nav-link { font-size: 1.4rem; }
    .nc-cta { font-size: 1.4rem; padding: .9rem 1.8rem; }
}

/* Burger */
.nc-burger { 
            display: block;
            border: 1px solid #de8c4261;
            border-radius: 1rem;
            width: 50px; height: 50px; 
            position: relative; 
            margin-left: auto; margin-right: 0;
            transform: scale(0.9);
          }

          input#hamburg {display:none}

          .line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 30px; 
   background: #de8c4261; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

header:has(#hamburg:checked) .nc-mobile-drawer {
    opacity: 1;
    max-height: 100dvh;
}


@media (width >=768px){.nc-burger{display:none}}
.nc-burger-icon{height:1.25rem;width:1.25rem}

/* Mobile drawer */
.nc-mobile-drawer{
    transition: all 0.5s ease-out;
    max-height: 0;
    opacity: 0;
    position: relative;
    overflow: hidden;
    background: rgb(255 250 247);
  }

@media (width >=768px){.nc-mobile-drawer{display:none}}
.nc-mobile-drawer-inner{padding-block:1rem;display:flex;flex-direction:column;gap:.5rem}
.nc-mobile-link{text-align:left;color:var(--text);background:none;border:none;padding:.5rem 0;font-size:1rem}



    

    .global-header-main-desktop {
        background-color: rgb(255 255 255 / 90%);
        border-bottom: 1px solid rgb(17 17 13 / 10%);
        display: none;
        position: sticky;
        top: -1px;
        transition-duration: 0.5s;
        transition-property: transform;
        z-index: 10;
        padding-top: 24px;
    }

    .global-header-main-desktop::before {
        backdrop-filter: blur(30px);
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    @media (width >= 1120px) {
        .global-header-main-desktop {
            display: block;
            top: -24px;
        }
    }

    nav {
        width: 100%;
    }

    

.responsive-wrapper {
    margin: 0 auto;
    width: 100%;
}



@media (width >= 0) {
    .responsive-wrapper {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (width >= 481px) {
    .responsive-wrapper {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (width >= 768px) {
    .responsive-wrapper {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (width >= 1120px) {
    .responsive-wrapper {
        padding-right: 24px;
        padding-left: 24px;
        max-width: 1120px;
    }
}

@media (width >= 1600px) {
    .responsive-wrapper {
        padding-right: 40px;
        padding-left: 40px;
        max-width: 1600px;
    }
}

@media (width >= 1920px) {
    .responsive-wrapper {
        padding-right: 48px;
        padding-left: 48px;
        max-width: 1920px;
    }
}

@media (width >= 2560px) {
    .responsive-wrapper {
        padding-right: 56px;
        padding-left: 56px;
        max-width: 2560px;
    }
}

@media (width >= 3200px) {
    .responsive-wrapper {
        padding-right: 64px;
        padding-left: 64px;
        max-width: 3200px;
    }
}

@media (width >= 3840px) {
    .responsive-wrapper {
        padding-right: 72px;
        padding-left: 72px;
        max-width: 4096px;
    }
}

   

.menu-groups {
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    gap: 14px;
    -webkit-box-pack: end;
    justify-content: space-between;
    position: relative;
}


@media (width >= 481px) {
    .menu-groups {
        gap: 20px;
    }
}

@media (width >= 1120px) {
    .menu-groups {
        gap: 16px;
    }
}

    .menu-group {
    display: flex;
    gap: 16px;
}

    .menu-group.brand-logo {
    flex: 0 0 100px;
    margin-right: 0;
}

    .menu-item {
        -webkit-box-align: stretch;
        align-items: stretch;
        display: flex;
        margin-bottom: -1px;
        line-height: 2.5em;
    }

    
    .menu-item.brand-logo {
        padding-right: 2em;
    }

    .menu-item-text {
        line-height: 1.2em;
        font-size: larger;
    }

    .button-primary{
        border: none;
        border-radius: 16px;
        cursor: pointer;
        display: inline-block;
        gap: 8px;
        outline: transparent solid 0;
        outline-offset: 3px;
        overflow: visible;
        position: relative;
        white-space: nowrap;
        line-height: 28px;
        padding: 8px 16px;
        background-color: rgb(193 219 240);
        width: 100%;
        font-weight: 600;
        -webkit-font-smoothing: antialiased;
        color: rgb(17 17 13);
        text-decoration: none;
        font-stretch: expanded;
        transition: 600ms cubic-bezier(0.7, 0, 0.3, 1);
    
    }

    .button-secondary{
        border-radius: 16px;
        cursor: pointer;
        display: inline-block;
        gap: 8px;
        outline: transparent solid 0;
        outline-offset: 3px;
        overflow: visible;
        position: relative;
        white-space: nowrap;
        line-height: 28px;
        padding: 8px 16px;
        background-color: rgb(255 255 255 / 0%);
        border:1px solid rgb(149 149 149);
        width: 100%;
        font-weight: 600;
        -webkit-font-smoothing: antialiased;
        color: rgb(17 17 13);
        text-decoration: none;
        font-stretch: expanded;
        transition: 600ms cubic-bezier(0.7, 0, 0.3, 1);
    
    }

   

    main {
        background: rgb(255 255 255);

        --headerHeight: 65px;
    }

    .main-container {
        background: rgb(255 255 255);
        position: relative;
        overflow: hidden;
    }

    .main-container>svg{
        position: absolute;
        top: calc(-1 * var(--headerHeight));
        height: calc(100dvh);
        width: max(100dvw,calc(783 / 338 * (100dvh - var(--headerHeight))));
        opacity: 0.8;

    }

    @media (width >= 1120px) {
        .main-container>svg{
            position: absolute;
            height: calc(100dvh - var(--headerHeight));
            width: max(100dvw,calc(783 / 338 * (100dvh - var(--headerHeight))));
            opacity: 0.8;

        }

    }

   

    section {
        background-color: rgb(255 255 255);
        overflow-x: hidden;
        position: relative;
    }

    section.insights {
        padding: min(3em,1dvw);
        background: #fff9f0;
    }

    @media (width >= 0) {
        section {
            padding-bottom: rem;
            padding-top: rem;
        }
    }

    @media (width >= 481px) {
        section {
            padding-bottom: 5rem;
            padding-top: 5rem;
        }
    }

    @media (width >= 768px) {
        section {
            padding-bottom: 6rem;
            padding-top: 6rem;
        }
    }

    @media (width >= 1120px) {
        section {
            padding-bottom: 7rem;
            padding-top: 7rem;
        }
    }

    @media (width >= 1600px) {
        section {
            padding-bottom: 10rem;
            padding-top: 10rem;
        }
    }

    @media (width >= 1920px) {
        section {
            padding-bottom: 120px;
            padding-top: 120px;
        }
    }

    @media (width >= 2560px) {
        section {
            padding-bottom: 140px;
            padding-top: 140px;
        }
    }

    @media (width >= 3200px) {
        section {
            padding-bottom: 160px;
            padding-top: 160px;
        }
    }

    section.hero {
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0;
            background-color:transparent;
            min-height: min-content;
    }

     @media (height >= 600px) {
        section.hero {
            height: calc(100dvh - var(--headerHeight));
        }
     }

    section.hero:first-of-type + section {
        padding: 0 0 64px;
    }


    .section-container {
        margin: 2rem auto 0;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .section-container:first-child {
        margin: 0 auto;
       
    }

    @media (width >= 0) {
        .section-container {
            padding-right: 16px;
            padding-left: 16px;
            width: calc(100% - 32px);
        }
    }

    @media (width >= 481px) {
        .section-container {
            padding-right: 16px;
            padding-left: 16px;
            width: calc(100% - 32px);
        }
    }

    @media (width >= 768px) {
        .section-container {
            padding-right: 24px;
            padding-left: 24px;
            width: calc(100% - 48px);
        }
    }

    @media (width >= 1120px) {
        .section-container {
            margin: 3rem auto 0;
            padding-right: 24px;
            padding-left: 24px;
            width: calc(100% - 48px);
            max-width: 1120px;
        }
    }

    @media (width >= 1600px) {
        .section-container {
            margin: 4rem auto 0;
            padding-left: 40px;
            padding-right: 40px;
            width: calc(100% - 80px);
            max-width: 1600px;
        }
    }

    @media (width >= 1920px) {
        .section-container {
            margin: 4rem auto 0;
            padding-left: 48px;
            padding-right: 48px;
            width: calc(100% - 96px);
            max-width: 1920px;
        }
    }

    @media (width >= 2560px) {
        .section-container {
            margin: 5rem auto 0;
            padding-left: 56px;
            padding-right: 56px;
            width: calc(100% - 112px);
            max-width: 1920px;
        }
    }

    @media (width >= 3200px) {
        .section-container {
            margin: 5rem auto 0;
            padding-left: 64px;
            padding-right: 64px;
            width: calc(100% - 128px);
            max-width: 2024px;
        }
    }

    @media (width >= 3840px) {
        .section-container {
            margin: 6rem auto 0;
            padding-left: 72px;
            padding-right: 72px;
            width: calc(100% - 144px);
            max-width: 3000px;
        }
    }

    .section-card{
        display: flex;
        gap: min(4em,1dvw);
        flex-direction: column;
    }

     @media (width >= 980px) {
        .section-card{
            flex-direction: row;
        }

        .section-card.from-right{
            flex-direction: row-reverse;
    }
        
    }

    .section-card .card-eye-catcher{
        padding: min(4em,1dvw);
    }

    .section-card.from-left .card-eye-catcher{
        padding: min(4em,1dvw) 0 min(4em,1dvw) min(4em,1dvw);
    }

    .section-card.from-right .card-eye-catcher{
        padding: min(4em,1dvw) min(4em,1dvw) min(4em,1dvw) 0;
    }

    .section-card .card-eye-catcher img{
        border-radius: 30px;
        width:400px;
        box-shadow: 3px 2px 12px 0 #00000026;
        border: 1px solid #bdbdbd;
    }

    @media (width >= 1920px) {
        .section-card .card-eye-catcher img{
            width: 500px;
        }
    }

    @media (width >= 2560px) {
        .section-card .card-eye-catcher img{
            width: 600px;
        }
    }

    @media (width >= 3200px) {
        .section-card .card-eye-catcher img{
            width: 700px;
        }
    }

    @media (width >= 3840px) {
        .section-card .card-eye-catcher img{
            width: 800px;
        }
    }

    .section-card .card-content{
        padding: min(4em,1dvw);
    }

    .section-card .card-content h1,h2,h3,h4,h4{
        margin-top: 0;
            margin-bottom: 2rem;
    }

    .section-card .card-content h1,h2,h3{
            white-space: normal;
            text-align: center;
            
        }

    
    @media (width >= 500px) {
        .section-card .card-content h1,h2,h3{
        white-space: nowrap;
        line-height: 1.3em;
        text-align: left;
    }

    }

    .flex-row {
        display: flex;
        box-sizing: border-box;
        flex-wrap: wrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        margin-right: -16px;
        margin-left: -16px;
    }

    .flex-col {
        display: flex;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        padding-right: 16px;
        padding-left: 16px;
    }

    .section-cols{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2em;
        margin: auto 2em;
    }

    .section-cols p ul {
        display: flex;
        list-style: none;
        gap: 2em;
        flex-flow: column nowrap;
        align-items: center;
        padding: 0;
    }

    .section-cols p ul li {
        display: flex;
        flex-direction: column;
            gap: 0;
        font-family: "Open Sans";
        max-width: 60rem;
        width: 80dvw;
        
    }

    .section-cols p ul li span.title {
        font-weight: 700;
        height: 3em;
        background-color: #edf7ff;
        padding: 0.5em;
        border-radius: 10px 10px 0 0;
    }

    .section-cols p ul li span.content {
        font-weight: 200;
        font-size: medium;
        font-family: "Open Sans";
        padding: 0.5em;
        background-color: white;
        border-radius: 0 0 10px 10px;
    }

    @media (width >= 1920px) {
    .section-cols p ul li span.title {
        font-size: 18px;
        padding: 0.75em;
    }

    .section-cols p ul li span.content {
        font-size: 17px;
        padding: 0.75em;
    }
}

@media (width >= 2560px) {
    .section-cols p ul li span.title {
        font-size: 20px;
        padding: 0.9em;
    }

    .section-cols p ul li span.content {
        font-size: 19px;
        padding: 0.9em;
    }
}

@media (width >= 3200px) {
    .section-cols p ul li span.title {
        font-size: 24px;
        padding: 1em;
    }

    .section-cols p ul li span.content {
        font-size: 22px;
        padding: 1em;
    }
}

@media (width >= 3840px) {
    .section-cols p ul li span.title {
        font-size: 26px;
    }

    .section-cols p ul li span.content {
        font-size: 24px;
    }
}

    @media (width >= 0) {
        .flex-col {
            flex: 0 0 100%;
            -webkit-box-flex: 0;
            order: 0;
            max-width: 100%;
            text-align: center;
        }
    }

    @media (width >= 768px) and (height >= 600px) {
        .flex-col {
            flex: 0 0 66.6667%;
            -webkit-box-flex: 0;
            order: 0;
            margin-left: 0;
            max-width: 66.6667%;
        }
    }

    @media (width >= 1120px) {
        .flex-col {
            flex: 0 0 max(66dvw, 60em);
            -webkit-box-flex: 0;
            max-width: max(66dvw, 60em);
        }
    }

    @media (width >= 1600px) {
        .flex-col {
            flex: 0 0 max(66dvw, 60em);
            -webkit-box-flex: 0;
            max-width: max(66dvw, 60em);
        }
    }

    @media (width >= 1920px) {
        .flex-col {
            flex: 0 0 1920px;
            -webkit-box-flex: 0;
            max-width: 1920px;
        }
    }

    @media (width >= 2560px) {
        .flex-col {
            flex: 0 0 2024px;
            -webkit-box-flex: 0;
            max-width: 1920px;
        }
    }

    @media (width >= 3200px) {
        .flex-col {
            flex: 0 0 2024px;
            -webkit-box-flex: 0;
            max-width: 2024px;
        }
    }

    @media (width >= 3840px) {
        .flex-col {
            flex: 0 0 3000px;
            -webkit-box-flex: 0;
            max-width: 3000px;
        }
    }

    
    .flex-col p{
        display: flex;
        place-items: center center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1em;
        
    }

    p {
        color: rgb(17 17 13);
        font-family: "Vanilla Sans", Arial, sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.45;
        margin: 0 0 16px;
    }

    @media (width >= 768px) {
        p {
            margin-bottom: 16px;
            font-size: 15px;
        }
    }

    @media (width >= 1120px) {
        p {
            font-size: 16px;
            line-height: 1.5;
        }
    }

    @media (width >= 1600px) {
        p {
            font-size: 18px;
            line-height: 1.55;
        }
    }

    @media (width >= 1920px) {
        p {
            font-size: 20px;
            line-height: 1.6;
        }
    }

    @media (width >= 2560px) {
        p {
            font-size: 24px;
            line-height: 1.6;
        }
    }

    @media (width >= 3200px) {
        p {
            font-size: 28px;
            line-height: 1.65;
        }
    }

    @media (width >= 3840px) {
        p {
            font-size: 32px;
            line-height: 1.7;
        }
    }

    @media (width >= 1120px) {
        .flex-col p{
            flex-wrap: nowrap;
        }
    }

    form {
        text-align: left;
        width: 100%;
        position: relative;
    }

    @media (width >= 768px) {
        form {
            max-width: 60rem;
        }
    }

    @media (width >= 0) {
        form > div:first-child {
            gap: 0 !important;
        }
    }


    .form-grid {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(2, 1fr);
    }

    

    

    .form-grid-flex {
        display: flex;
        flex-direction: column;
        gap: 20px;
        grid-column: 1 / 3;
    }


    .form-grid-flex:has(input:focus) ~ .form-grid-flex.expanded {
        max-height: fit-content;
        opacity: 1;
    }

    @media (width >= 1120px) {
        .form-grid-flex {
            flex-direction: row;
        }
    }

    @media (width >= 1120px) {
        .form-grid-flex div:nth-of-type(1) {
            -webkit-box-flex: 10;
            flex-grow: 10;
        }
    }

    .form-entry-wrapper {
        grid-column: span 2;
        z-index: 5;
    }

    .form-entry-wrapper-style{
        position: relative;
        direction: ltr;
        margin: 0;
        border: 0;
        padding: 0;
        font-size: 0;
    }

    .form-entry-style {
        margin-top: 8px;
        position: relative;
    }

    


    .form-grid-flex input, .form-grid-flex input:invalid {
        box-shadow: rgb(184 66 66) 0 0 0 2px inset;
    }

    .form-grid-flex input {
        background: rgb(17 17 13 / 5%);
        border-radius: 12px;
        box-shadow: rgb(17 17 13 / 47%) 0 0 0 1px inset;
        font-size: 16px;
        line-height: 24px;
        min-height: 48px;
        padding: 12px;
        color: rgb(17 17 13);
        appearance: none;
        transition: border-color 0.25s ease-in-out, box-shadow 0.1s ease-in-out, background-color 0.25s ease-in-out, color 0.25s ease-in-out, z-index 0.25s ease-in-out;
        border: 1px solid rgb(175 44 44);
        width: 100%;
        box-sizing: border-box;
        vertical-align: middle;
        font-family: inherit;
        background-color: rgb(255 255 255);
    }

    @media (width >= 768px) {
        .form-grid-flex input {
            min-width: 30rem;
        }
    }

    

    .form-grid-flex .button-primary{
        padding: 10px 20px;
        line-height: calc(1.25em + 6px);
        font-size: 18px;
        min-height: calc(1.25em + 8px);
    
    }


    @media (width >= 1120px) {
        .form-grid-flex button {
            margin-top: 7px;
        }
    }

    @media (width >= 0) {
        .form-grid-flex.expanded {
            margin-top: 24px;
        }
    }

     @media (width >= 1920px) {
        .form-grid-flex .button-primary,
        .form-grid-flex input,
    .button-primary, .button-secondary { 
        font-size: 18px; 
        padding: 10px 20px;
        line-height: 32px;
    }
}

@media (width >= 2560px) {
    .form-grid-flex .button-primary,
    .form-grid-flex input,
    .button-primary, .button-secondary { 
        font-size: 20px; 
        padding: 12px 24px;
        line-height: 36px;
    }
}

@media (width >= 3200px) {
    .form-grid-flex .button-primary,
    .form-grid-flex input,
    .button-primary, .button-secondary { 
        font-size: 24px; 
        padding: 14px 28px;
        line-height: 40px;
    }
}

@media (width >= 3840px) {
    .form-grid-flex .button-primary,
    .form-grid-flex input,
    .button-primary, .button-secondary { 
        font-size: 26px; 
        padding: 16px 32px;
        line-height: 44px;
    }
}

    .form-grid-flex.expanded {
        max-height: 240px;
        opacity: 1;
    }

    .form-grid-flex.expanded {
        grid-column: 1 / 3;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 800ms, opacity 900ms;
    }

    p.form-info-text{
        font-size: 12px;
        display: inline;
    }

    .form-info-text a {
        display: inline-flex;
    }

    @media (width >= 1120px) {
        .form-info-text{
            font-size: 14px;
        }
    }

     section.hero .capture-circle {
                display: flex;
                color: rgb(0 54 112 / 80%);
                flex-flow: row nowrap;
                align-items: center;
                justify-content: center;
                height: 2em;
                overflow: hidden;
                min-width: min(25em,80dvw);
            }

            section.hero .capture-circle ul {
                display: inline;
                list-style: none;
                height: 2em;
                margin: 0;
                padding: 0 1em;
                position: relative;
                text-align: center;
            }

            section.hero .capture-circle ul li {
                height: 2em;
                margin: 0;
                padding: 0;
                position: relative;
                top: 0;
                font-weight: 500;
                font-size: larger;
                animation-name: updown;
                animation-timing-function: ease-in-out;
                animation-duration: 30s;
                animation-iteration-count: infinite;
            }

            @keyframes updown {
                0% {
                    top: 0;
                }

                15% {
                    top: 0;
                }

                18% {
                    top: -2em;
                }

                34% {
                    top: -2em;
                }

                37% {
                    top: -4em;
                }

                53% {
                    top: -4em;
                }

                56% {
                    top: -6em;
                }

                72% {
                    top: -6em;
                }

                75% {
                    top: -8em;
                }

                91% {
                    top: -8em;
                }

                95% {
                    top: 0;
                }
            }

            
            .nc-hero-title {
                margin-top: 1rem;
                font-weight: 700;
            }

            

            .nc-gradient-text {
                display: block;
                background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
                background-clip: text;
                color: transparent;
            }
/* Form */
.nc-form{border:1px solid var(--border);border-radius:1rem;padding:1.25rem;background:rgb(250 237 231);display: flex;flex-direction: column;gap: 1rem;}
.nc-form-row{display:grid;gap:1rem}

@media (width >=640px){.nc-form-row{grid-template-columns:1fr 1fr}}
.nc-field{display:flex;flex-direction:column;gap:.35rem}
.nc-field label{font-size:.9rem;color:var(--muted-2)}
.nc-field input,.nc-field select,.nc-field textarea{border-radius:.75rem;background:white;border:1px solid var(--border);padding:.6rem .75rem;color:var(--text);outline:none}
.nc-field input:focus,.nc-field textarea:focus{box-shadow:0 0 0 3px rgb(240 171 252 / 35%)}
.nc-check{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.nc-form-actions{margin-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}

.form-error-message{
  border: 1px solid lightgray;
  padding: 1rem;
  border-radius: 1rem;
  background: #ff5405;
}

.hidden{
  color: transparent; 
  width: 0;
  height: 0;
  display: inline;
  position:absolute;

}

.contact-form {
    position: relative;
}

.success-overlay{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s ease;
}

.success-overlay.show{
  top: 0 ;
  opacity: 1;
}

genuine-captcha {
    width: 100%;
}