/* ---------- CTA DOORS + FORM (Get Started) ---------- */
.get-started-section{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:var(--midnight);
  color:var(--white);
}
.get-started-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,37,69,0.08) 0%, rgba(6,24,47,0.20) 100%);
  pointer-events:none;
}
.get-started-section > .wrap{position:relative;z-index:1;}
.get-started-section .eyebrow{color:var(--garnet-lt);}
.get-started-section .eyebrow::before{background:var(--garnet-lt);}
.get-started-section h2,
.get-started-section h3,
.get-started-section h4{color:var(--white);}

.gs-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:56px;align-items:start;}
.gs-door{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,0.28);
  border-radius:var(--radius-card);
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.gs-door:hover{
  border-color:rgba(255,255,255,0.50);
  background:rgba(255,255,255,0.16);
  transform:translateY(-1px);
}
/* .gs-door's own transition shorthand above would otherwise win over
   .monark-reveal-item's (same specificity, loads after design-system.css)
   and silently drop the opacity fade. Override with the entrance
   transition while revealing, then hand back to the fast hover-only
   transition once .is-visible lands so the hover lift stays snappy. */
.gs-door.monark-reveal-item{
  transition:
    opacity .5s cubic-bezier(.2,.65,.3,1),
    transform .5s cubic-bezier(.2,.65,.3,1),
    border-color .15s ease,
    background .15s ease;
}
.gs-door.monark-reveal-item.is-visible{
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.gs-door h3{font-size:16.5px;margin-bottom:5px;color:var(--white);}
.gs-door p{font-size:13.5px;color:rgba(255,255,255,0.78);}
.gs-door .arrow{font-size:20px;color:var(--white);flex:none;}

.gs-form{
  background:rgba(255,255,255,0.90);
  border:1px solid rgba(255,255,255,0.48);
  border-radius:var(--radius-card);
  padding:36px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(6,24,47,0.18);
}
.gs-form h3{font-size:21px;margin-bottom:8px;color:var(--navy);}
.gs-form > p{color:var(--slate);font-size:14px;margin-bottom:26px;}

/* Ninja Forms field styling, matched to the approved concept's .field
   treatment. Targets Ninja Forms' default template classes
   (.nf-field-container/.ninja-forms-field/.nf-response-msg) — if the site's
   Ninja Forms → Settings → Styles template is changed away from the
   default, re-check these selectors against the actual rendered markup.
   Label markup differs by field type: checkbox/radio/image-list/date/
   star-rating/signature/html/hr fields render a <span class="nf-label-span">,
   every other type (textbox/email/textarea/listselect/…) renders a bare
   <label> with no nf-label-span class — both live inside .nf-field-label,
   so both selectors are needed or text/email/textarea/select labels are
   left unstyled and inherit this section's white on-dark text color. */
.gs-form .nf-field-container{margin-bottom:18px;}
.gs-form .label-above .nf-field-label,
.gs-form .nf-field-label{margin-bottom:5px;}
.gs-form .nf-field-label label,
.gs-form .nf-label-span{display:block;font-size:12.5px;font-weight:600;color:var(--navy-85);}
.gs-form .nf-form-fields-required{font-size:12.5px;color:var(--navy-70);margin-bottom:16px;}
.gs-form input.ninja-forms-field[type="text"],
.gs-form input.ninja-forms-field[type="email"],
.gs-form input.ninja-forms-field[type="tel"],
.gs-form select.ninja-forms-field,
.gs-form textarea.ninja-forms-field{
  width:100%;padding:12px 14px;border:var(--hairline) solid var(--navy-30);border-radius:var(--radius);
  font-family:var(--font-body);font-size:14.5px;color:var(--navy);background:rgba(255,255,255,0.72);height: auto;
}

.gs-form .nf-field-element textarea {
	height: auto;
}
.gs-form input.ninja-forms-field:focus,
.gs-form select.ninja-forms-field:focus,
.gs-form textarea.ninja-forms-field:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal);}
.gs-form textarea.ninja-forms-field{resize:vertical;min-height:88px;}
.gs-form input.ninja-forms-field[type="submit"],
.gs-form button.ninja-forms-field{
  width:100%;margin-top:4px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:14.5px;
  padding:14px 26px;border-radius:var(--radius);border:none;
  background:var(--garnet);color:var(--white);
  transition:background .15s ease;
}
.gs-form input.ninja-forms-field[type="submit"]:hover,
.gs-form button.ninja-forms-field:hover{background:#711F28;}
.gs-form .nf-response-msg{margin-top:14px;font-size:13px;color:var(--deep-sea);border-radius:var(--radius);}
.form-embed-notice{color:var(--slate);font-size:13.5px;font-style:italic;}

/* ---------- Light theme ---------- */
.get-started-section--theme-light{background-color:var(--paper);color:var(--navy);}
.get-started-section--theme-light::before{background:linear-gradient(180deg, rgba(11,37,69,0.02) 0%, rgba(11,37,69,0.05) 100%);}
.get-started-section--theme-light .eyebrow{color:var(--garnet);}
.get-started-section--theme-light .eyebrow::before{background:var(--garnet);}
.get-started-section--theme-light h2,
.get-started-section--theme-light h3,
.get-started-section--theme-light h4{color:var(--navy);}
.get-started-section--theme-light .rte,
.get-started-section--theme-light .rte p{color:var(--slate);}
.get-started-section--theme-light .gs-door{
  border-color:var(--border-light);
  background:var(--white);
}
.get-started-section--theme-light .gs-door:hover{
  border-color:rgba(11,37,69,0.30);
  background:var(--white);
}
.get-started-section--theme-light .gs-door h3{color:var(--navy);}
.get-started-section--theme-light .gs-door p{color:var(--slate);}
.get-started-section--theme-light .gs-door .arrow{color:var(--navy);}