/* Shared contact component, based on the homepage. */
body #contact.cta {
      padding: 80px 40px;
      background: var(--bg2)
    }

    body #contact .cta-box {
      max-width: 1160px;
      margin: 0 auto;
      background: linear-gradient(135deg, var(--brand) 0%, #024d56 60%, #046068 100%);
      border-radius: 32px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      box-shadow: 0 32px 80px rgba(1, 60, 66, .22), 0 0 0 1px rgba(100, 201, 154, .15)
    }

    body #contact .cta-l {
      padding: 64px 56px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    body #contact .cta-l::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at -10% 50%, rgba(100, 201, 154, .18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 100% 10%, rgba(13, 172, 172, .12) 0%, transparent 70%);
      pointer-events: none
    }

    body #contact .cta-l>* {
      position: relative;
      z-index: 1
    }

    body #contact .cta-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--olive);
      background: rgba(211, 216, 0, .1);
      border: 1px solid rgba(211, 216, 0, .28);
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 22px;
      align-self: flex-start
    }

    body #contact .cta-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--olive);
      flex-shrink: 0
    }

    body #contact .cta-l h2 {
      font-family: var(--display);
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 14px;
      line-height: 33px;
      letter-spacing: -.03em
    }

    body #contact .cta-l h2 em {
      font-style: normal;
      color: var(--mint)
    }

    body #contact .cta-l .cta-sub {
      font-size: 15.5px;
      color: #fff;
      margin-bottom: 0;
      line-height: 1.72;
      max-width: 380px
    }

    body #contact .cta-perks {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    body #contact .cta-perks li {
      font-size: 14px;
      color: #fff;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5
    }

    body #contact .cta-perks li::before {
      content: '';
      margin-top: 1.5px;
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--mint);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23013c42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: 10px;
      background-repeat: no-repeat;
      background-position: center
    }

    body #contact .cta-links {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    body #contact .cta-link-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13.5px;
      color: #fff;
      text-decoration: none;
      transition: .18s;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(4px)
    }

    body #contact .cta-link-item:hover {
      color: #fff;
      background: rgba(255, 255, 255, .07);
      border-color: rgba(100, 201, 154, .3)
    }

    body #contact .cta-link-ico {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: .18s
    }

    body #contact .cta-link-item:hover .cta-link-ico {
      background: rgba(100, 201, 154, .2)
    }

    body #contact .cta-link-ico svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    body #contact .cta-reply {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .07)
    }

    body #contact .cta-reply svg {
      width: 13px;
      height: 13px;
      stroke: var(--mint);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    body #contact .cta-r {
      background: #fff;
      padding: 52px 52px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    body #contact .cta-r-head {
      margin-bottom: 28px
    }

    body #contact .cta-r-head h3 {
      font-family: var(--display);
      font-size: 20px;
      font-weight: 700;
      color: var(--t1);
      letter-spacing: -.02em;
      margin-bottom: 6px
    }

    body #contact .cta-r-head p {
      font-size: 13.5px;
      color: var(--t3);
      line-height: 1.55
    }

    body #contact .cta-f {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    body #contact .cta-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    body #contact .cta-field {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    body #contact .cta-field label {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--t3);
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .cta-f input,
    body #contact .cta-f textarea {
      font-family: var(--body);
      font-size: 14px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1.5px solid var(--brd);
      background: #fff;
      color: var(--t1);
      outline: none;
      transition: .2s;
      width: 100%;
      box-sizing: border-box
    }

    .cta-f input::placeholder,
    body #contact .cta-f textarea::placeholder {
      color: var(--t3);
      opacity: .55
    }

    .cta-f input:focus,
    body #contact .cta-f textarea:focus {
      border-color: var(--mint);
      box-shadow: 0 0 0 3px rgba(100, 201, 154, .12)
    }

    body #contact .cta-f textarea {
      resize: vertical;
      min-height: 90px
    }

    body #contact .cta-f button {
      font-family: var(--body);
      font-size: 15px;
      font-weight: 700;
      padding: 15px 28px;
      border-radius: 12px;
      background:var(--brand);
      color:#fff;
      border: none;
      cursor: pointer;
      transition: .22s;
      width: 100%;
      letter-spacing: .01em;
      box-shadow:0 4px 14px rgba(1,60,66,.18)}

    body #contact .cta-f button:hover {
      background:var(--brand-l);
      box-shadow:0 8px 24px rgba(1,60,66,.28);
      transform: translateY(-2px)
    }

    body #contact .cta-privacy {
      font-size: 11.5px;
      color: var(--t3);
      text-align: center;
      margin-top: 8px
    }
body #contact .cta-l, body #contact .cta-r { justify-content: flex-start; min-width: 0; }
body #contact .cta-l .cta-sub { max-width: none; }
body #contact .cta-r { padding: 64px 52px; }
body #contact .cta-f { flex: none; }
body #contact .cta-f > .cta-field { flex: none; }
body #contact .cta-f > .cta-field textarea { flex: none; height: auto; min-height: 76px; field-sizing: content; }
body #contact .cta-row > * { min-width: 0; }
body #contact .cta-link-ico svg.contact-symbol { width: 18px; height: 18px; fill: currentColor; stroke: none; stroke-width: 0; }
@media (max-width: 900px) {
  body #contact.cta { padding: 56px 20px; }
  body #contact .cta-box { grid-template-columns: 1fr; border-radius: 24px; }
  body #contact .cta-l { padding: 44px 28px; }
  body #contact .cta-r { padding: 40px 28px; }
  body #contact .cta-f > .cta-field textarea { min-height: 76px; }
}
@media (max-width: 480px) {
  body #contact .cta-row { grid-template-columns: 1fr; }
  body #contact .cta-l, body #contact .cta-r { padding: 32px 22px; }
}