html {
  scroll-behavior: smooth;
}
[x-cloak] {
  display: none !important;
}
body {
  margin: 0;
  font-family: "Roboto", sans-serif;
}
.section-anchor {
  scroll-margin-top: 76px;
}

.mega-card:hover img {
  transform: scale(1.06);
}

.hero-overlay-dark {
  background: linear-gradient(
    90deg,
    rgba(4, 20, 34, 0.94) 0%,
    rgba(4, 20, 34, 0.72) 42%,
    rgba(4, 20, 34, 0.42) 70%,
    rgba(4, 20, 34, 0.22) 100%
  );
}
.hero-overlay-light {
  background: linear-gradient(
    90deg,
    rgba(4, 20, 34, 0.82) 0%,
    rgba(4, 20, 34, 0.58) 45%,
    rgba(4, 20, 34, 0.28) 75%,
    rgba(4, 20, 34, 0.12) 100%
  );
}
.blueprint-dark {
  background:
    linear-gradient(rgba(5, 24, 41, 0.9), rgba(5, 24, 41, 0.9)),
    url("../images/about/about-blueprint-dark.png") center/cover no-repeat;
}
.blueprint-light {
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    url("../images/about/about-blueprint-light.png") center/cover no-repeat;
}
.map-dark {
  background:
    linear-gradient(rgba(5, 24, 41, 0.9), rgba(5, 24, 41, 0.9)),
    url("../images/about/about-map-dark.png") center/cover no-repeat;
}
.map-light {
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url("../images/about/about-map-light.png") center/cover no-repeat;
}

.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(3, 20, 35, 0.98) 0%,
    rgba(3, 20, 35, 0.91) 34%,
    rgba(3, 20, 35, 0.66) 50%,
    rgba(3, 20, 35, 0.2) 68%,
    rgba(3, 20, 35, 0.08) 100%
  );
}

@media (max-width: 1023px) {
  .hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(3, 20, 35, 0.94) 0%,
      rgba(3, 20, 35, 0.8) 55%,
      rgba(3, 20, 35, 0.48) 100%
    );
  }
}

/* =========================================================
   SHARED QUOTE FORM FIELDS
========================================================= */

.contact-field {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: #12314f;
  color: #ffffff;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.contact-field::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.contact-field:focus {
  border-color: #95d318;
  outline: none;
  box-shadow: 0 0 0 3px rgba(149, 211, 24, 0.16);
}

.contact-field[aria-invalid="true"] {
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.14);
}

.field-error {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  color: #fda4af;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

.form-status {
  display: none;
}

.form-status.is-visible {
  display: block;
}

/* =========================================================
   SHARED QUOTE FORM ALERT
========================================================= */

.quote-form-alert {
  display: none;
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.quote-form-alert:not(.hidden),
.quote-form-alert.is-visible {
  display: block;
}

/* Dark-mode success */
html[data-theme="dark"] .quote-form-alert.is-success {
  border-color: rgba(149, 211, 24, 0.55);
  background-color: rgba(149, 211, 24, 0.12);
  color: #f5ffe3;
  box-shadow: 0 0 0 1px rgba(149, 211, 24, 0.06);
}

/* Light-mode success */
html[data-theme="light"] .quote-form-alert.is-success {
  border-color: #75a815;
  background-color: #edf8d8;
  color: #294205;
  box-shadow: 0 0 0 1px rgba(117, 168, 21, 0.08);
}

/* Dark-mode error */
html[data-theme="dark"] .quote-form-alert.is-error {
  border-color: rgba(248, 113, 113, 0.65);
  background-color: rgba(127, 29, 29, 0.32);
  color: #fee2e2;
}

/* Light-mode error */
html[data-theme="light"] .quote-form-alert.is-error {
  border-color: #dc2626;
  background-color: #fef2f2;
  color: #991b1b;
}

/* Dark-mode information */
html[data-theme="dark"] .quote-form-alert.is-info {
  border-color: rgba(96, 165, 250, 0.55);
  background-color: rgba(30, 64, 175, 0.24);
  color: #dbeafe;
}

/* Light-mode information */
html[data-theme="light"] .quote-form-alert.is-info {
  border-color: #60a5fa;
  background-color: #eff6ff;
  color: #1e3a8a;
}