.cfq-header {
  height: 92px;
  padding: 0 max(18px, calc((100vw - 1160px) / 2));
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .96), rgba(8, 8, 8, .9)),
    linear-gradient(135deg, #171410, #302819 48%, #0c0c0b);
}

.cfq-brand img { width: 44px; height: 44px; object-fit: contain; }

.cfq-shell {
  width: min(1120px, calc(100% - 28px));
  max-width: 100%;
  margin-top: 0;
}

.cfq-intro {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding: clamp(36px, 7vw, 72px) max(18px, calc((100vw - 1160px) / 2));
  grid-template-columns: minmax(0, .85fr) minmax(320px, 1fr);
  align-items: center;
  overflow: hidden;
  color: #fffaf0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .92), rgba(8, 8, 8, .72)),
    radial-gradient(circle at 20% 10%, rgba(198, 161, 91, .28), transparent 34%),
    linear-gradient(135deg, #171410, #302819 48%, #0c0c0b);
  border-bottom: 1px solid rgba(198, 161, 91, .45);
}

.cfq-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%);
  background-size: 38px 38px;
}

.cfq-intro > * { position: relative; z-index: 1; }
.cfq-intro h1 { color: #fff; font-family: inherit; font-size: clamp(2.4rem, 5.3vw, 4.6rem); font-weight: 900; letter-spacing: -.02em; line-height: .98; max-width: 560px; }
.cfq-intro p { color: rgba(255,255,255,.78); max-width: 650px; }
.cfq-intro-copy small { display: block; margin-top: 18px; color: #e4d29e; font-weight: 800; }

.cfq-video-wrap {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.cfq-video-wrap h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 900;
  text-align: center;
}

.cfq-video {
  overflow: hidden;
  border: 2px solid #cda94e;
  border-radius: 18px;
  background: #080808;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.cfq-video video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #080808;
  object-fit: cover;
}

body:not(.cfq-introduction-step) .cfq-intro {
  display: none;
}

.cfq-progress { margin-top: 22px; }

.cfq-card {
  border-color: rgba(198, 161, 91, .35);
  background: #fffdf8;
  box-shadow: 0 16px 36px rgba(8, 8, 8, .08);
}

.cfq-card-head {
  padding: 24px 32px 20px;
  border-bottom: 1px dashed rgba(198, 161, 91, .5);
  background: linear-gradient(135deg, rgba(8, 8, 8, .98), rgba(45, 35, 21, .98)), #080808;
}

.cfq-card-head h2 { color: #f7e7bd; font-family: inherit; font-weight: 900; }
.cfq-card-head p { color: rgba(255, 250, 240, .72); }
.cfq-card-body { background: #fffdf8; }

.cfq-application-choice { max-width: 720px; margin: 0 auto; }
.cfq-application-choice .cfq-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cfq-application-choice .cfq-choice span { min-height: 88px; display: grid; place-items: center; padding: 18px; border-radius: 14px; font-size: 1rem; }

.cfq-applicant-columns { display: grid; gap: 18px; align-items: start; }
.cfq-applicant-columns.two-applicants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfq-applicant-columns > .cfq-person { min-width: 0; margin: 0; }
.cfq-applicant-columns.two-applicants > .cfq-person .cfq-grid { grid-template-columns: 1fr; }

/* Work-and-income is compared person-to-person, not rendered as two stacked forms. */
.cfq-employment-columns.two-applicants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.cfq-employment-columns.two-applicants > .cfq-person { height: 100%; }

.cfq-applicant-columns .cfq-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfq-applicant-columns .cfq-choice span { min-height: 48px; display: grid; place-items: center; padding: 10px 14px; text-align: center; }

@media (max-width: 900px) {
  .cfq-intro { grid-template-columns: 1fr; }
  .cfq-video-wrap { width: min(100%, 620px); }
  .cfq-applicant-columns.two-applicants { grid-template-columns: 1fr; }
  .cfq-employment-columns.two-applicants { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cfq-intro { padding-left: 20px; padding-right: 20px; }
  .cfq-video { border-radius: 14px; }
  .cfq-application-choice .cfq-choice { grid-template-columns: 1fr; }
  .cfq-application-choice .cfq-choice span { min-height: 68px; }
}