/* =========================================================
   LIMBEST – Request a Quote page
   ========================================================= */

/* ---- Hero: dark band so the transparent header is readable ---- */
/* ---- Hero: background photo + dark fade, header floats over it ---- */
.q-hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + 48px) 0 48px;
  color: var(--white);
  background: var(--navy) url("../images/quote-hero-bg.jpg") center / cover no-repeat;
}
/* Dark fade on the left so the white text stays readable */
.q-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 20, 35, .78) 0%, rgba(10, 20, 35, .55) 50%, rgba(10, 20, 35, .25) 100%);
}
.q-hero .container { position: relative; }

/* Eyebrow: white text with a red line underneath */
.q-hero__label { font-size: 13px; letter-spacing: 1px; line-height: 1.6; text-transform: uppercase; color: var(--white); }
.q-hero__rule { display: block; width: 48px; height: 2px; margin: 10px 0 20px; background: var(--red); }

.q-hero h1 { color: var(--white); text-transform: uppercase; }
.q-hero__text { max-width: 520px; margin-top: 14px; color: rgba(255, 255, 255, .9); }

/* ---- Main layout (mobile first: form first, info below) ---- */
.q-main { padding: 48px 0 var(--space-main); }
.q-grid { display: flex; flex-direction: column; gap: 40px; }
.q-formwrap { order: -1; }

/* ---- Left column ---- */
.q-aside__title { font-size: 16px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--blue); }
.q-steps { margin: 14px 0 32px; }
.q-steps li { display: flex; gap: 10px; padding: 6px 0; font-size: 15px; line-height: 1.6; }
.q-steps strong { flex: none; color: var(--red); }
.q-contact { margin-top: 14px; }
.q-contact li { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; }
.q-icon { flex: none; width: 22px; height: 22px; }
.q-contact svg.q-icon { color: var(--red); }
.q-contact a { color: var(--blue); text-decoration: underline; }
.q-contact a:hover { color: var(--red); }

/* ---- Form ---- */
.q-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.q-field { margin-bottom: 20px; }
.q-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--navy); }
.q-req { color: var(--red); }
.q-opt { font-weight: 400; color: #687487; }

.q-field input,
.q-field select,
.q-field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;          /* 16px stops iOS from zooming into the field */
  color: var(--navy);
  background: var(--white);
  border: 1px solid #c9ced6;
  border-radius: 3px;
}
.q-field textarea { resize: vertical; min-height: 96px; }
.q-field input:focus,
.q-field select:focus,
.q-field textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(38, 63, 123, .18);
}
.q-field.has-error input,
.q-field.has-error textarea { border-color: var(--red); }
.q-error { min-height: 0; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--red); }
.q-error:empty { display: none; }

.q-botcheck { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.q-submit { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font-family: inherit; }
.q-submit[disabled] { opacity: .65; cursor: not-allowed; }

.q-status { margin-top: 16px; font-size: 14px; color: var(--red); }

/* ---- Success box ---- */
.q-success { padding: 28px; background: #f3f5f8; border-left: 4px solid var(--red); }
.q-success h2 { font-size: 24px; color: var(--blue); }
.q-success p { margin-top: 10px; font-size: 15px; }
.q-success a { color: var(--blue); text-decoration: underline; }

/* ---- Swiss grid (desktop): info cols 1-5, form cols 7-12 ---- */
@media (min-width: 901px) {
  .q-main { padding-top: var(--space-main); }
  .q-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .q-aside     { grid-column: 1 / 6;  grid-row: 1; }
  .q-formwrap  { grid-column: 7 / 13; grid-row: 1; order: 0; }
  .q-row       { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
}

@media (max-width: 600px) {
  .q-hero { padding: calc(var(--header-h) + 32px) 0 36px; }
  .q-success { padding: 22px; }
}