:root {
   --green: #2ea94e;
   --navy: #0b3a47;
   --field-light: #6cbf6e;
   --field-dark: #4ca651;
   --text-body: #3c4b53;
   --page-bg: #e9eaec;
 }

 @font-face {
   font-family: 'Neue Haas Grotesk Display Pro';
   src: url('./fonts/NeueHaasDisplay-Light.woff2') format('woff2'),
     url('./fonts/NeueHaasDisplay-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Neue Haas Grotesk Display Pro';
   src: url('./fonts/NeueHaasDisplay-Mediu.woff2') format('woff2'),
     url('./fonts/NeueHaasDisplay-Mediu.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Neue Haas Grotesk Display Pro';
   src: url('./fonts/NeueHaasDisplay-Black.woff2') format('woff2'),
     url('./fonts/NeueHaasDisplay-Black.woff') format('woff');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
 }


 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box
 }

 html,
 body {
   height: 100%
 }

 body {
   font-family: 'Neue Haas Grotesk Display Pro';
   background: var(--page-bg);
   color: var(--navy);
   display: flex;
   flex-wrap:wrap;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   padding: 18px;
   -webkit-font-smoothing: antialiased;
 }

 html .cog-cognito--styled textarea, html .cog-cognito--styled select, html .cog-cognito--styled input[type=text], html .cog-cognito--styled [type=tel], html .cog-cognito--styled [type=password], html .cog-cognito--styled [type=date], html .cog-cognito--styled [type=email], html .cog-cognito--styled [type=url], html .cog-cognito--styled [type=time], :root:root:root:root:root .cog-cognito--styled textarea, :root:root:root:root:root .cog-cognito--styled select, :root:root:root:root:root .cog-cognito--styled input[type=text], :root:root:root:root:root .cog-cognito--styled [type=tel], :root:root:root:root:root .cog-cognito--styled [type=password], :root:root:root:root:root .cog-cognito--styled [type=date], :root:root:root:root:root .cog-cognito--styled [type=email], :root:root:root:root:root .cog-cognito--styled [type=url], :root:root:root:root:root .cog-cognito--styled [type=time] {
    font-family: 'Neue Haas Grotesk Display Pro' !important;
    font-weight: 300 !important;
 }

 img {
   display: block
 }

 /* ===== Reusable badge: navy box + white text + seal on top ===== */
 .badge {
   position: relative;
   background: var(--navy);
   text-align: center;
   color: #fff
 }

 .badge .seal {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   height: auto
 }

 .badge .reg {
   font-weight: 600;
   line-height: 1.18
 }

 .badge .bold {
   display: block;
   font-weight: 800;
   line-height: 1.18
 }

 /* ============ DESKTOP CARD ============ */
 .desktop {
   width: 1120px;
   max-width: 100%;
   display: grid;
   grid-template-columns: 288px 1fr;
   grid-template-rows: 190px 1fr;
   background: #fff;
   box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
   overflow: hidden;
 }

 .d-side-top {
   background: #fff;
   position: relative;
   overflow: hidden
 }

 .d-elephant {
   position: absolute;
   left: 50%;
   bottom: -3px;
   transform: translateX(-50%);
   width: 150px;
   height: auto
 }

 .d-header {
   background: var(--green);
   display: flex;
   align-items: center;
   gap: 54px;
   padding: 0 46px
 }

 .d-header .logo-es {
   width: 250px;
   height: auto
 }

 .d-header .logo-one {
   width: 122px;
   height: auto
 }

 .d-side {
   background: var(--green);
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding-bottom: 0
 }

 .d-side .badge {
   width: 158px;
   padding: 52px 14px 20px
 }

 .d-side .badge .seal {
   top: -42px;
   width: 84px
 }

 .d-side .badge .reg {
   font-size: 18px
 }

 .d-side .badge .bold {
   font-size: 18px;
   margin-top: 2px
 }

 .d-main {
   background: #fff;
   padding: 54px 60px 60px
 }

 .lede {
   font-size: 25px;
   font-weight: 500;
   line-height: 1.18;
   max-width: 470px
 }

 .lede .g {
   color: var(--green)
 }

 .lede .n {
   color: var(--navy)
 }

 .para {
   margin-top: 22px;
   font-size: 18px;
   font-weight: 400;
   color: var(--text-body);
   line-height: 1.45;
   max-width: 520px;
   font-weight: 300;
 }

 .meet {
   margin-top: 22px;
   font-size: 18px;
   color: var(--text-body);
   font-weight: 300;
 }

 .at {
   margin-top: 18px;
   font-size: 19px;
   font-weight: 800;
   color: var(--navy)
 }

 .stay {
   margin-top: 46px;
   font-size: 19px;
   font-weight: 800
 }

 .stay .g {
   color: var(--green)
 }

 .stay .n {
   color: var(--navy)
 }

 .form {
   margin-top: 18px;
   max-width: 540px
 }

 /* ===== Cognito Forms — restyled to match the theme ===== */
 .form .cog-cognito,
 .form .cog-form,
 .form .cog-form__container,
 .form .cog-form__content,
 .form .cog-body {
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
   padding: 0 !important;
   margin: 0 !important;
   color: inherit !important;
   width: 100% !important;
   max-width: 540px !important;
 }

 .form .cog-header {
   display: none !important;
 }

 /* we use our own "Stay Updated" */
 .form .cog-offscreen {
   position: absolute !important;
   left: -9999px !important;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
 }

 .form .cog-row {
   margin: 0 !important;
 }

 .form .cog-col,
 .form .cog-field {
   padding: 0 !important;
   margin: 0 !important;
 }

 .form .cog-field__placeholder {
   display: none !important;
 }

 .form .cog-page,
 .form .cog-page>div,
 .form .cog-row,
 .form .cog-col,
 .form .cog-field {
   margin: 0 !important;
 }

 .form .cog-input,
 .form .el-input {
   margin: 0 !important;
   width: 100% !important;
   display: block !important;
   font-size: 0 !important;
 }

 .form .cog-input .el-input__inner,
 .form .cog-input input {
   width: 100% !important;
   height: auto !important;
   border: 0 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   outline: none !important;
   font-family: 'Nunito', sans-serif !important;
   font-size: 18px !important;
   font-weight: 600 !important;
   padding: 18px 22px !important;
   line-height: 1.2 !important;
   color: #fff !important;
 }

 .form .cog-input input::placeholder {
   color: rgba(255, 255, 255, .92) !important;
   opacity: 1 !important;
 }

 .form .cog-text .el-input__inner {
   background: var(--field-light) !important;
 }

 /* Name field */
 .form .cog-email .el-input__inner {
   background: var(--field-dark) !important;
 }

 /* Email field */
 .form .cog-page__navigation {
   margin: 24px 0 0 !important;
   padding: 0 !important;
   display: block !important;
   text-align: left !important;
   border: 0 !important;
 }

 .form .cog-button--submit {
   background: var(--navy) !important;
   color: #fff !important;
   border: 0 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   font-family: 'Nunito', sans-serif !important;
   font-weight: 800 !important;
   font-size: 17px !important;
   letter-spacing: 1px !important;
   text-transform: uppercase;
   padding: 18px 56px !important;
   width: auto !important;
   min-width: 0 !important;
   cursor: pointer;
   transition: filter .2s !important;
 }

 .form .cog-button--submit:hover {
   filter: brightness(1.18);
 }

 /* ============ MOBILE CARD (full width) ============ */
 .mobile {
   width: 100%;
   max-width: 100%;
   background: #fff;
   display: none
 }

 .m-header {
   background: var(--green);
   padding: 24px 26px
 }

 .m-header .logo-es {
   width: 185px;
   height: auto
 }

 .m-body {
   padding: 26px 26px 0
 }

 .m-body .logo-one {
   width: 115px;
   height: auto
 }

 .m-lede {
   margin-top: 26px;
   font-size: 20px;
   font-weight: 500;
   line-height: 1.2
 }

 .m-lede .g {
   color: var(--green)
 }

 .m-para {
   margin-top: 16px;
   font-size: 15.5px;
   color: var(--text-body);
   line-height: 1.5;
   font-weight: 300
 }

 .m-meet {
   margin-top: 16px;
   font-size: 15.5px;
   color: var(--text-body)
 }

 .m-at {
   margin-top: 14px;
   font-size: 16px;
   font-weight: 800;
   color: var(--navy)
 }

 .m-stay {
   margin-top: 34px;
   font-size: 16px;
   font-weight: 800
 }

 .m-stay .g {
   color: var(--green)
 }

 .m-form {
   margin-top: 14px
 }

 /* Cognito mobile sizing overrides */
 .m-form .cog-input .el-input__inner,
 .m-form .cog-input input {
   font-size: 16px !important;
   padding: 15px 18px !important;
 }

 .m-form .cog-button--submit {
   padding: 15px 40px !important;
   font-size: 15px !important;
 }

 .m-elephant {
   width: 88px;
   height: auto;
   margin: 30px 0 -2px
 }

 .m-footer {
   background: var(--green);
   min-height: 96px;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
   padding-right: 26px
 }

 .m-footer .badge {
   width: 150px;
   padding: 46px 12px 16px;
   transform: translateY(0)
 }

 .m-footer .badge .seal {
   top: -34px;
   width: 72px
 }

 .m-footer .badge .reg {
   font-size: 15px
 }

 .m-footer .badge .bold {
   font-size: 15px;
   margin-top: 2px
 }

 .cog-field__placeholder.cog-input,
 html .cog-form--dark-background .cog-col.is-error::before,
 :root:root:root:root:root .cog-form--dark-background .cog-col.is-error::before,
 html .cog-form--dark-background .cog-col.is-error::after,
 :root:root:root:root:root .cog-form--dark-background .cog-col.is-error::after {
   display: none !important;
 }

 .cog-button__text {
   text-transform: uppercase !important;
 }

 html .cog-input,
 :root:root:root:root:root .cog-input,
 html .cog-page,
 :root:root:root:root:root .cog-page {
   padding: 0 !important;
 }


/* ===== Cognito success state — "Thank You" confirmation message ===== */
.form .cog-confirmation{margin:0 !important;padding:0 !important;}
.form .cog-confirmation-message{
  background:#eef7f1 !important;                 /* overrides the inline red */
  border:1px solid #cfe8d6 !important;
  border-left:5px solid #2ea94e !important;      /* brand green accent */
  border-radius:8px !important;
  padding:22px 24px !important;
  max-width:540px;
}
.form .cog-confirmation__message{padding:0 !important;background:transparent !important;color:#3c4b53 !important;}
.form .cog-confirmation__message h1,.form .cog-confirmation__message h2,
.form .cog-confirmation__message h3,.form .cog-confirmation__message h4,
.form .cog-confirmation__message h5,.form .cog-confirmation__message h6,
.form .cog-confirmation__message p{
  font-family:'Nunito',sans-serif !important;
  font-weight:600 !important;font-size:16px !important;line-height:1.55 !important;
  color:#3c4b53 !important;margin:0 0 8px !important;
}
/* first line = the headline, with a green check badge */
.form .cog-confirmation__message :first-child{
  display:flex;align-items:center;gap:10px;
  font-weight:800 !important;font-size:20px !important;color:#0b3a47 !important;margin-bottom:10px !important;
}
.form .cog-confirmation__message :first-child::before{
  content:"";flex:none;width:26px;height:26px;border-radius:50%;
  background:#2ea94e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/15px no-repeat;
}
.form .cog-confirmation__message :last-child{margin-bottom:0 !important;}
 @media (max-width:760px) {
   body {
     padding: 0;
     background: #fff;
     align-items: stretch;
     display: block
   }

   .desktop {
     display: none
   }

   .mobile {
     display: block
   }

   html [data-old-safari] .cog-row,
   :root:root:root:root [data-old-safari] .cog-row {
     width: 100% !important;
   }
 }
 
 
 span.g {
    color: #2ea94e;
}