:root{
    --navy:#020914;
    --navy2:#061529;
    --blue:#0b2340;
    --gold:#c8a85a;
    --white:#f4f7fb;
    --muted:#aeb9c9;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--navy);
    color:var(--white);
    font-family:Georgia,"Times New Roman",serif;
  }

  /* The supplied artwork is the hero background.
     It scales with the viewport width, keeping the central emblem centered
     while the rest of the page continues seamlessly into the same navy. */
  .hero{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    min-height:520px;
    background:#020914;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(to bottom,
        rgba(1,7,18,.02) 48%,
        rgba(1,7,18,.28) 68%,
        rgba(1,7,18,.82) 88%,
        #020914 100%);
    z-index:2;
    pointer-events:none;
  }
  .hero-art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
  }

  .hero-content{
    position:absolute;
    z-index:3;
    inset:auto 0 0;
    padding:clamp(24px,5vw,70px);
    text-align:center;
  }
  .eyebrow{
    margin:0 0 10px;
    color:#d7bc70;
    letter-spacing:.28em;
    font:600 clamp(11px,1.1vw,15px)/1.2 Arial,sans-serif;
    text-transform:uppercase;
  }
  h1{
    margin:0;
    font-size:clamp(34px,5vw,72px);
    letter-spacing:.06em;
    text-transform:uppercase;
    text-shadow:0 3px 20px #000;
  }
  .scroll-cue{
    margin-top:24px;
    color:#bfc9d8;
    font:12px Arial,sans-serif;
    letter-spacing:.22em;
    text-transform:uppercase;
    opacity:.8;
  }

  nav{
    position:absolute;
    z-index:10;
    top:0; left:0; right:0;
    display:flex;
    justify-content:flex-end;
    gap:clamp(18px,3vw,42px);
    padding:24px clamp(20px,5vw,70px);
    background:linear-gradient(to bottom,rgba(0,5,15,.7),transparent);
    font:600 12px Arial,sans-serif;
    letter-spacing:.18em;
    text-transform:uppercase;
  }
  nav a{color:#e7ebf1;text-decoration:none}
  nav a:hover{color:#d8b966}

  main{
    background:
      radial-gradient(ellipse at 50% 0%, #0c2644 0%, #061529 34%, #020914 72%);
  }
  .section{
    width:min(1080px,calc(100% - 40px));
    margin:auto;
    padding:clamp(70px,9vw,130px) 0;
  }
  .intro{text-align:center}
  .intro h2{
    margin:0 0 18px;
    font-size:clamp(30px,4vw,52px);
    letter-spacing:.04em;
  }
  .intro p{
    max-width:700px;
    margin:0 auto;
    color:var(--muted);
    font:17px/1.8 Arial,sans-serif;
  }
  .gold-line{
    width:80px;height:2px;
    background:var(--gold);
    margin:28px auto 0;
  }



  .details{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    margin-top:20px;
  }
  .detail{
    padding:34px;
    border-top:1px solid rgba(200,168,90,.45);
  }
  .detail .label{
    color:#c9a95c;
    font:700 11px Arial,sans-serif;
    letter-spacing:.2em;
    text-transform:uppercase;
  }
  .detail .value{
    margin-top:10px;
    font-size:22px;
    line-height:1.5;
  }

  footer{
    border-top:1px solid rgba(255,255,255,.08);
    background:#010711;
    padding:55px 20px;
    text-align:center;
    color:#8290a3;
    font:13px/1.8 Arial,sans-serif;
  }
  footer strong{color:#d5b76b;letter-spacing:.15em}
  .hero-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 30px;
}



.hero-action {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid rgba(220, 190, 100, 0.8);
  color: #fff;
  background: rgba(5, 20, 45, 0.65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: all 0.25s ease;
}



.hero-action:hover {
  background: rgba(220, 190, 100, 0.9);
  color: #06142c;
}

  .cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:60px;
  }
.cards .hero-action {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
}

.cards .card {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height:210px;
  padding:32px;
  border:1px solid rgba(200,168,90,.28);
  background:linear-gradient(145deg,rgba(13,39,67,.82),rgba(3,12,25,.82));
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}

.cards .card img {
  display:block;
  width:250px;
  max-width:100%;
  height:160px;
  object-fit:cover;
  margin:15px auto 0;
}

  .card{
    min-height:210px;
    padding:32px;
    border:1px solid rgba(200,168,90,.28);
    background:linear-gradient(145deg,rgba(13,39,67,.82),rgba(3,12,25,.82));
    box-shadow:0 20px 60px rgba(0,0,0,.2);
  }
  .card h3{
    margin:0 0 12px;
    color:#dec477;
    font-size:20px;
    letter-spacing:.05em;
  }
  .card p{
    margin:0;
    color:#aeb9c9;
    font:15px/1.7 Arial,sans-serif;
  }
  @media(max-width:700px){
    nav{
      justify-content:center;
      gap:18px;
      padding:18px 12px;
      font-size:10px;
    }
    .hero{
      /* On phones the artwork scales to the phone width, so the emblem
         becomes smaller rather than becoming a giant cropped background. */
      aspect-ratio:16/9;
      min-height:0;
    }
    .hero-content{
      padding:18px 16px 22px;
    }
    .hero-content h1{font-size:28px}
    .scroll-cue{display:none}
    .cards,.details{grid-template-columns:1fr}
    .section{width:min(100% - 28px,1080px)}
      .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .hero-action {
    width: 180px;
    text-align: center;
  }
  }

@media (max-width: 600px) {
  .hero-content h1 {
    display: none;
  }
 
  .hero {
    min-height: 420px;
  }

  .hero-content {
    bottom: 25px;
  }
}

/* =========================================================
   MISHMAR SIGN-UP FORM
   ========================================================= */
/* Form page uses the same page background as the site */

.form-eyebrow { margin-bottom: 10px; color: #d7bc70; font: 600 12px/1.2 Arial, sans-serif; letter-spacing: .28em; text-transform: uppercase; } 
/* Submit button */ #formContainer #submitBtn { width: 100%; margin-top: 10px; padding: 15px 28px; background: var(--gold); color: #061529; font-size: 14px; font-weight: 700; letter-spacing: .18em; }

.form-page {
  min-height: 100vh;
  padding: clamp(50px, 7vw, 90px) 20px;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      #0c2644 0%,
      #061529 34%,
      #020914 72%
    );
}


/* Form title area */

.form-header {
  width: min(950px, 100%);
  margin: 0 auto 45px;
  text-align: center;
}

.form-header h1 {
  margin: 0;
}

.form-header p {
  margin: 12px 0 0;
  color: var(--muted);
  font: 15px/1.6 Arial, sans-serif;
}


/* Each step */

.form-step {
  width: min(950px, 100%);
  margin: 0 auto 45px;
  position: relative;
}


/* Step number */

.form-step .step-number {
  position: absolute;
  top: 0;
  left: 0;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--gold);
  color: var(--navy);

  border-radius: 50%;

  font: 700 16px Arial, sans-serif;

  box-shadow: 0 4px 15px rgba(0,0,0,.3);
}


/* Step title */

.form-step > h2 {
  margin: 0 0 25px;
  padding-left: 55px;
}


/*
   IMPORTANT:
   .form-section already has the homepage .section class.

   We only make the section behave like a card.
*/

.form-section {
  width: 100%;
  padding: 30px;
  background:
    linear-gradient(
      145deg,
      rgba(13,39,67,.82),
      rgba(3,12,25,.82)
    );
  border: 1px solid rgba(200,168,90,.28);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}


/* Section heading */

.form-section h3 {
  margin: 0 0 22px;
  color: #dec477;
  font: 700 12px/1.3 Arial,sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}


/* Form rows */

.form-row {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
}


/* Individual fields */

.field-wrapper {
  min-width: 0;
  display: flex;
  flex-direction: column;
}


/* Form labels use the same visual language as .detail .label */

.field-wrapper > label {
  margin-bottom: 7px;
  color: #c9a95c;
  font: 700 11px/1.3 Arial,sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}


/* Required star */

.field-wrapper .required {
  color: #d8b966;
}


/* Inputs */

.field-wrapper input:not([type="hidden"]),
.field-wrapper select,
.field-wrapper textarea {

  width: 100%;
  min-height: 42px;

  padding: 9px 12px;

  color: var(--white);
  background: rgba(2,9,20,.75);

  border: 1px solid rgba(174,185,201,.35);
  border-radius: 0;

  font: 15px Arial,sans-serif;

  outline: none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


/* Placeholder */

.field-wrapper input::placeholder,
.field-wrapper textarea::placeholder {
  color: #718096;
}


/* Dropdown options */

.field-wrapper select option {
  background: var(--navy2);
  color: var(--white);
}


/* Focus */

.field-wrapper input:not([type="hidden"]):focus,
.field-wrapper select:focus,
.field-wrapper textarea:focus {

  border-color: var(--gold);

  box-shadow: 0 0 0 1px rgba(200,168,90,.2);
}


/* Disabled fields */

.field-wrapper input:disabled,
.field-wrapper select:disabled {
  opacity: .45;
}


/* Textarea */

.field-wrapper textarea {
  height: 100px;
  resize: vertical;
}




.form-button {
  cursor: pointer;
}


/* Submit button */

#submitBtn {
  width: 100%;
  margin-top: 10px;
}


/* Modal */

.form-page .modal {
  display: none;

  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  padding: 20px;

  background: rgba(0,5,15,.82);

  z-index: 9999;
}


/* Modal */

.form-page .modal-content {
  position: relative;

  max-width: 650px;
  max-height: 75vh;

  margin: 5% auto;
  padding: 35px;

  overflow-y: auto;

  background:
    linear-gradient(
      145deg,
      #0d2743,
      #030c19
    );

  border: 1px solid rgba(200,168,90,.4);

  box-shadow: 0 20px 70px rgba(0,0,0,.6);
}


/* Modal text */

.form-page .modal-text {
  margin-bottom: 25px;

  color: #d9e0ea;

  font: 15px/1.7 Arial,sans-serif;

  white-space: pre-line;
}


/* Modal close */

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;
  border: 1px solid rgba(174, 185, 201, .35);

  color: var(--muted);

  font: 20px Arial, sans-serif;

  cursor: pointer;

  transition: all .25s ease;
}

.modal-close:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200, 168, 90, .08);
}


/* Loading overlay */

#loading-overlay {
  position: fixed;
  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  background: rgba(0,5,15,.75);

  z-index: 99999;
}


/* Loading spinner */

#loading-overlay .spinner {
  width: 35px;
  height: 35px;

  border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--gold);

  border-radius: 50%;

  animation: mishmar-spin .8s linear infinite;
}

@keyframes mishmar-spin {
  to {
    transform: rotate(360deg);
  }
}



/* Accepted state */
button.hero-action.open-modal.accepted {
  background: rgba(80, 130, 95, 0.12);
  border-color: rgba(130, 175, 140, 0.65);
  color: #b7d8be;
}

button.hero-action.open-modal.accepted:hover {
  background: rgba(80, 130, 95, 0.20);
  border-color: rgba(150, 195, 160, 0.8);
  color: #d0e6d4;
}
.left-align p {
  text-align: left;
}

.intro.left-align p {
  text-align: left;
}

/* =========================================================
   FORM MOBILE
   ========================================================= */

@media(max-width:700px) {

  .form-page {
    padding: 45px 14px 70px;
  }

  .form-header {
    margin-bottom: 35px;
  }

  .form-header h1 {
    font-size: 32px;
  }

  .form-step > h2 {
    padding-left: 50px;
    font-size: 28px;
  }

  .form-section {
    padding: 22px 18px;
  }

  .form-row {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .field-wrapper {
    width: 100% !important;
    flex: none !important;
  }

  .form-step .step-number {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .form-page .modal-content {
    margin: 10% auto;
    padding: 30px 20px;
  }
}