/* /join: "Register your interest" page. A short photo banner, then one form card.
   The form keeps the site's forms.js handling (validation, status, submission). */

.rg-page main{background:#f3f7fc}

/* ---------- banner ---------- */
.rg-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  min-height:160px;margin-top:var(--ds-header);padding:24px var(--ds-gutter);
  background:#031428;color:#fff}
.rg-hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:72% 32%}
.rg-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#031428 0%,#031428e8 26%,#03142899 46%,#0314281a 70%,transparent 85%),
             linear-gradient(0deg,#031428cc 0%,transparent 45%)}
.rg-hero-copy{max-width:760px}
.rg-eyebrow{margin:0 0 10px;font:600 var(--ds-eyebrow)/1.25 var(--ds-ui);letter-spacing:.14em;text-transform:uppercase;color:#22c3ff;}
.rg-hero h1{margin:0;font:400 var(--ds-compact)/1.1 var(--ds-display);letter-spacing:0;color:#fff;}
.rg-hero h1 em{font-style:normal;color:#1f7cff}
.rg-lede{margin:14px 0 0;font:400 clamp(17px,1.5vw,22px)/1.4 Barlow,sans-serif;color:#e3ecf8}

/* ---------- form card ---------- */
.rg.znf{position:relative;padding:28px 5% clamp(48px,5vw,72px);background:#f3f7fc;color:#0d1b2e}
.rg-card{position:relative;max-width:960px;margin:0 auto;padding:30px clamp(20px,3vw,32px) 34px;background:#fff;
  border:1px solid #cfe0f4;border-radius:14px;box-shadow:0 18px 44px #0b3d7a14}
.rg-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,#0062ff,#2aa8ff 70%,#7fdcff);box-shadow:0 0 14px #1a8cff88}
.rg .znf-form{margin:0}
.rg.znf .rg-required-note{margin:0 0 20px;font-size:15px;color:#5b6b82}
.rg-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rg-wide{grid-column:1/-1}
.rg-field{display:flex;flex-direction:column;gap:9px;min-width:0}
.rg-field label{font:600 .875rem/1.4 var(--ds-body);color:#0d1b2e;}
.rg-req{margin-left:1px;color:#e2384f}
.rg-opt{font-weight:400;color:#6b7a90}
.rg.znf .rg-field input:not([type=radio]),.rg.znf .rg-field select,.rg.znf .rg-field textarea{
  width:100%;height:48px;padding:0 16px;font:400 16px/1.4 Barlow,sans-serif;color:#0d1b2e;
  background:#fff;border:1px solid #cddaea;border-radius:7px;box-shadow:none}
.rg.znf .rg-field textarea{height:auto;min-height:86px;padding:12px 16px;resize:vertical}
.rg.znf .rg-field select{padding-right:44px;background-color:#fff;background-position:right 14px center}
.rg.znf .rg-field input.rg-city{background:#eef3f9}
.rg.znf .rg-field input:focus,.rg.znf .rg-field select:focus,.rg.znf .rg-field textarea:focus{
  outline:none;border-color:#0062ff;box-shadow:0 0 0 3px #0062ff1f}
.rg.znf .rg-field input::placeholder,.rg.znf .rg-field textarea::placeholder{color:#8b98ab}
.rg.znf .rg-field [aria-invalid=true]{border-color:#d93a52;box-shadow:0 0 0 3px #d93a521a}
.rg-phone{display:flex;align-items:stretch;height:48px;border:1px solid #cddaea;border-radius:7px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.rg-phone:focus-within{border-color:#0062ff;box-shadow:0 0 0 3px #0062ff1f}
.rg-prefix{display:flex;align-items:center;padding:0 14px 0 16px;border-right:1px solid #cddaea;font-size:16px;color:#2b3a50}
.rg.znf .rg-phone input:not([type=radio]){height:100%;border:0;border-radius:0;box-shadow:none!important;flex:1;min-width:0}

.rg-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:26px}
.rg-submit{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 26px;border:0;border-radius:10px;cursor:pointer;
  font:700 1rem/1.25 var(--ds-ui);color:#fff;background:linear-gradient(180deg,#1673ff,#0055f0);
  box-shadow:0 10px 22px #0062ff40;transition:transform .2s,box-shadow .2s}
.rg-submit:hover,.rg-submit:focus-visible{transform:translateY(-1px);box-shadow:0 12px 26px #0062ff55}
.rg-submit:focus-visible{outline:3px solid #7cc7ff;outline-offset:3px}
.rg-submit:disabled{opacity:.7;cursor:wait;transform:none}
.rg-submit .zi-arrow{--zi:22px;translate:0 .06em}
.rg.znf .rg-reassure{margin:0;font-size:15px;color:#5b6b82}
.rg .znf-status{margin:18px 0 0!important}
.rg .znf-motion{display:none!important}
.rg .znf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The footer and header calls to action point at this page; hide them here. */
.rg-page .zgf-cta{display:none}
/* The header button on this page reads "Contact us" (see join.html). */

@media(max-width:760px){
  .rg-hero{min-height:120px;padding:24px var(--ds-gutter)}
  .rg-hero-img{object-position:68% 40%}
  .rg-hero::before{background:linear-gradient(90deg,#031428f2 0%,#031428cc 45%,#03142855 100%),linear-gradient(0deg,#031428 0%,transparent 55%)}
  .rg.znf{padding:20px 16px 48px}
  .rg-card{padding:24px 18px 26px;border-radius:12px}
  .rg-grid{grid-template-columns:1fr;gap:18px}
  .rg-actions{flex-direction:column;align-items:stretch}
  .rg-submit{justify-content:center}
  .rg.znf .rg-reassure{text-align:center}
}

@media(min-width:768px) and (max-width:1023px){.rg-hero{min-height:140px}.rg-card{max-width:640px}}