.contact-page { background: #fff; color: #292929; }
.contact-page .site-nav { background: transparent; }
.contact-page .site-nav.is-scrolled { background: #fff; }
.contact-page .nav-links a,
.contact-page .nav-actions > a:not(.button) { color: #292929; }
.contact-page .nav-toggle span { background: #0a0f1e; }

/* Hero */
.contact-hero { background: linear-gradient(180deg, #fff 0%, #f6f9ff 35%, #bdd6fd 69%, #3787fa 100%); border-radius: 0 0 12px 12px; overflow: hidden; padding-bottom: 260px; position: relative; }
.contact-hero-glow { left: 50%; pointer-events: none; position: absolute; transform: translateX(-50%); }
.contact-hero-glow-outer { background: url("../assets/contact/hero-glow-outer.svg") center/contain no-repeat; height: 950px; opacity: .85; top: -320px; width: 1550px; }
.contact-hero-glow-inner { background: url("../assets/contact/hero-glow-inner.svg") center/contain no-repeat; height: 650px; opacity: .9; top: -20px; width: 1550px; }
.contact-hero-copy { margin: 96px auto 0; position: relative; text-align: center; width: min(829px, calc(100% - 48px)); z-index: 1; }
.contact-hero-copy h1 { color: #0a0f1e; font: 800 58px/70px "Manrope", sans-serif; letter-spacing: -1.74px; margin: 0; padding-top:45px }
.contact-hero-copy p { color: #292929; font-family: "DM Sans", sans-serif; font-size: 18px; line-height: 1.5; margin: 16px 0 0; }

/* Form card */
.contact-form-section { margin-top: -180px; position: relative; z-index: 2;}
.contact-form-card { background: #fff; border-radius: 16px; box-shadow: 0 3px 10px rgba(0, 0, 0, .08); margin: 0 auto; max-width: 1020px; padding: 48px; width: min(1020px, calc(100% - 32px)); }
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: flex; gap: 24px; }
.form-field { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.form-field label { color: #384250; font: 400 16px/20px "Manrope", sans-serif; }
.form-field input,
.form-field textarea {
  background: #fafafa;
  border: 1px solid #f2f2f7;
  border-radius: 8px;
  color: #292929;
  font: 400 14px/24px "Manrope", sans-serif;
  padding: 12px 16px;
  width: 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #6c737f; }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--blue); outline: none; }
.form-field textarea { min-height: 172px; resize: vertical; }
.contact-submit { border: 1px solid #004eeb; background: #004eeb; font: 600 20px/30px "Manrope", sans-serif; padding: 14px 24px; width: 100%; }
.contact-submit:hover { background: #0040c4; }
.contact-submit:disabled { cursor: not-allowed; opacity: .65; transform: none; }
.contact-form-status { font-size: 14px; margin: 0; min-height: 20px; }
.contact-form-status.is-success { color: #0a7a3d; }
.contact-form-status.is-error { color: #c0292b; }
.form-field.has-error input,
.form-field.has-error textarea { border-color: #c0292b; }
.form-field-error { color: #c0292b; font-size: 13px; margin: 0; }

/* Sales team */
.sales-team { padding: 64px 0; }
.sales-team h2 { color: #141414; font: 600 40px/1.4 "DM Sans", sans-serif; margin: 0 0 56px; text-align: center; }
.sales-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.sales-card { align-items: center; background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); display: flex; gap: 24px; padding: 12px; width: 555px; }
.sales-photo { border-radius: 16px; flex: 0 0 178px; height: 237px; overflow: hidden; position: relative; width: 178px; }
.sales-photo-bg { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }

/* Each team photo is a large, mostly-transparent cutout; frame dimensions/offsets
   are copied from Figma per-card so the crop matches the design exactly. */
.sales-photo-frame { overflow: hidden; position: absolute; }
.sales-photo-frame img { display: block; max-width: none; position: absolute; }
.sales-photo-frame--1 { height: 300px; left: -33px; top: -4px; width: 316px; }
.sales-photo-frame--1 img { height: 105.47%; left: -0.15%; top: 5.95%; width: 100%; }
.sales-photo-frame--2 { height: 234.748px; left: -1.5px; top: 26px; transform: rotate(0.48deg); width: 202.626px; }
.sales-photo-frame--2 img { height: 100%; left: -40.73%; top: 0; width: 174.2%; }
.sales-photo-frame--3 { height: 200.882px; left: -12.31px; top: 43px; transform: rotate(-0.7deg); width: 195.865px; }
.sales-photo-frame--3 img { height: 100%; left: -20.44%; top: 0; width: 153.95%; }
.sales-photo-frame--4 { height: 259.638px; left: -7.5px; top: 20.29px; transform: scaleY(-1) rotate(-178.19deg); width: 229.453px; }
.sales-photo-frame--4 img { height: 100%; left: -35.31%; top: 0; width: 171.12%; }

.sales-info { display: flex; flex: 1; flex-direction: column; gap: 24px; min-width: 0; }
.sales-heading { display: flex; flex-direction: column; gap: 4px; }
.sales-heading h3 { color: #292929; font: 600 24px/1.4 "DM Sans", sans-serif; margin: 0; }
.sales-region { background: #e6f1ff; color: #717680; display: inline-block; font: 400 16px/1.4 "DM Sans", sans-serif; padding: 4px 6px; width: fit-content; }
.sales-contacts { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sales-contacts li { align-items: center; color: #717680; display: flex; font: 400 16px/1.4 "DM Sans", sans-serif; gap: 12px; }
.sales-contacts img { flex: 0 0 20px; height: 20px; width: 20px; }
.sales-contacts a { color: inherit; }
.sales-contacts a:hover { color: var(--blue); }

@media (max-width: 991.98px) {
  .contact-hero-copy h1 { font-size: 44px; line-height: 1.2; }
  .contact-form-card { padding: 32px; }
  .sales-card { width: 100%; }
}

@media (max-width: 767.98px) {
  .contact-hero { padding-bottom: 200px; }
  .contact-hero-copy { margin-top: 56px; }
  .contact-hero-copy h1 { font-size: 34px; letter-spacing: -1px; }
  .contact-hero-copy p { font-size: 15px; }
  .contact-form-section { margin-top: -190px; }
  .contact-form-card { padding: 24px; }
  .form-row { flex-direction: column; gap: 24px; }
  .sales-team h2 { font-size: 30px; }
  .sales-card { align-items: flex-start; flex-direction: column; }
}