.oa-contact {
  --oa-contact-field-bg: #f7f8f9;
  --oa-contact-placeholder: #9aa1a8;
  --oa-contact-card-border: #e6e8ea;
  background: #f5f6f7;
  color: var(--oa-text-dark);
  font-family: var(--oa-font-body);
  font-weight: 400;
  box-sizing: border-box;
}
.oa-contact *, .oa-contact *::before, .oa-contact *::after { box-sizing: border-box; }
.oa-contact p, .oa-contact h1, .oa-contact h2, .oa-contact h3 { margin: 0; }
.oa-contact ul { list-style: none; margin: 0; padding: 0; }
.oa-contact a { color: inherit; }

.oa-contact-content-wrap {
  padding: 96px var(--oa-content-padding) 130px;
}

/* ---------- top: headline + form ---------- */

.oa-contact-main {
  display: grid;
  grid-template-columns: minmax(0, 512px) minmax(0, 591px);
  justify-content: space-between;
  gap: 64px;
  align-items: start;
}

.oa-contact .oa-contact-eyebrow {
  font-family: var(--oa-font-mono);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--oa-text-regular);
  margin-bottom: 22px !important;
}

.oa-contact .oa-contact-headline {
  font-family: var(--oa-font-heading);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.19;
  letter-spacing: -.6px;
  color: var(--oa-text-dark);
}
.oa-contact .oa-contact-headline .accent {
  display: block;
  font-family: var(--oa-font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--oa-green-500);
}

.oa-contact-rule {
  height: 1px;
  background: var(--oa-border-light);
  margin: 47px 0 42px !important;
}

.oa-contact .oa-contact-desc {
  font-size: 16px;
  line-height: 1.62;
  color: var(--oa-text-regular);
  max-width: 512px;
}

.oa-contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 106px !important;
}

.oa-contact .oa-contact-detail {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 23px;
  align-items: center;
}

.oa-contact .oa-contact-detail-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--oa-contact-card-border);
  border-radius: var(--oa-radius-sm);
  color: #7e8994;
}
.oa-contact .oa-contact-detail-icon svg { display: block; width: 20px; height: 20px; }

.oa-contact .oa-contact-detail-text {
  font-size: 16px;
  line-height: 1.45;
  color: var(--oa-text-dark);
}
.oa-contact-detail-text a {
  text-decoration: none;
  transition: color .18s ease;
}
.oa-contact-detail-text a:hover { color: var(--oa-green-600); }

/* ---------- form card ---------- */

.oa-contact-card {
  background: #fff;
  border-radius: 7px;
  padding: 48px 32px 32px;
}

.oa-contact .oa-contact-form-title {
  font-family: var(--oa-font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  color: var(--oa-green-500);
  margin-bottom: 40px !important;
}

.oa-contact-embed {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.oa-contact-embed > *:first-child { margin-top: 0; }
.oa-contact-embed > *:last-child { margin-bottom: 0; }

/* ---------- third-party embed reset (HubSpot, etc.) ---------- */

.oa-contact-embed,
.oa-contact-embed * {
  box-sizing: border-box !important;
}
.oa-contact-embed iframe,
.oa-contact-embed img,
.oa-contact-embed table {
  max-width: 100% !important;
}
.oa-contact-embed iframe {
  width: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* HubSpot's new "Forms Component" embed (the hsfc-* classes injected by
   forms/embed/developer/*.js). Its own theme bakes in a huge button
   padding (250px each side by default), which is what actually blows out
   the card — override the real rendered classes with !important so it
   wins regardless of when HubSpot injects its <style> into <head>. */
.oa-contact-embed [class*="hsfc-"] {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.oa-contact-embed .hsfc-Step,
.oa-contact-embed .hsfc-Step__Content,
.oa-contact-embed .hsfc-Form,
.oa-contact-embed .hsfc-Row {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.oa-contact-embed .hsfc-TextInput,
.oa-contact-embed .hsfc-TextareaInput {
  width: 100% !important;
}
.oa-contact-embed .hsfc-NavigationRow__Buttons {
  flex-wrap: wrap;
}
.oa-contact-embed .hsfc-Button {
  width: 100% !important;
  padding: 14px 24px !important;
  font-family: var(--oa-font-body) !important;
  background-color: var(--oa-green-500) !important;
}
.oa-contact-embed .hsfc-Button:hover {
  background-color: var(--oa-green-600) !important;
}

/* Legacy HubSpot embed (hs-form / hs-input classes) — kept in case an
   older-style embed is used elsewhere. */
.oa-contact-embed .hs-form-html,
.oa-contact-embed .hbspt-form,
.oa-contact-embed form.hs-form {
  width: 100% !important;
  max-width: 100% !important;
}
.oa-contact-embed .hs-form fieldset {
  max-width: 100% !important;
  float: none !important;
}
.oa-contact-embed .hs-form-field,
.oa-contact-embed .hs-fieldtype-text,
.oa-contact-embed .field {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}
.oa-contact-embed .input {
  margin-right: 0 !important;
}
.oa-contact-embed .hs-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 46px;
  padding: 0 14px;
  font-family: var(--oa-font-body);
  font-size: 15px;
  color: var(--oa-text-dark);
  background: var(--oa-contact-field-bg);
  border: 1px solid var(--oa-contact-card-border);
  border-radius: var(--oa-radius-sm);
}
.oa-contact-embed textarea.hs-input {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
}
.oa-contact-embed .hs-form-field > label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--oa-font-body);
  font-size: 13px;
  color: var(--oa-text-regular);
}
.oa-contact-embed ul.hs-error-msgs {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.oa-contact-embed ul.hs-error-msgs label {
  font-size: 12px;
  color: #d64545;
}
.oa-contact-embed .hs-button {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--oa-radius-sm);
  background: var(--oa-green-500);
  color: #fff;
  font-family: var(--oa-font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background-color .18s ease;
}
.oa-contact-embed .hs-button:hover { background: var(--oa-green-600); }
.oa-contact-embed .submitted-message {
  font-family: var(--oa-font-body);
  color: var(--oa-text-dark);
  text-align: center;
}

.oa-contact-embed.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--oa-border-light);
  border-radius: var(--oa-radius-sm);
  background: var(--oa-contact-field-bg);
}
.oa-contact-embed.is-placeholder span {
  font-family: var(--oa-font-mono);
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--oa-contact-placeholder);
}

/* ---------- divider ---------- */

.oa-contact-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 122px !important;
  color: rgba(19, 27, 37, .16);
}
.oa-contact-divider > span { flex: 1; height: 1px; background: currentColor; }
.oa-contact-divider i { display: none; }
.oa-contact-divider b { display: flex; margin: 0 8px; font-weight: 400; }
.oa-contact-divider svg { display: block; }
.oa-contact-divider img { display: block; width: 26px; height: auto; }

/* ---------- cards ---------- */

.oa-contact-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 122px !important;
}

.oa-contact-card-item {
  display: flex;
  flex-direction: column;
  min-height: 312px !important;
  background: #fff;
  border: 1px solid var(--oa-contact-card-border);
  border-radius: 7px;
  padding: 24px;
}

.oa-contact-card-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto !important;
}
.oa-contact-card-icon img { display: block; width: 48px; height: 48px; }

.oa-contact .oa-contact-card-title {
  font-size: 18px;
  line-height: 1.35;
  color: var(--oa-text-dark);
  margin-top: 32px !important;
}

.oa-contact .oa-contact-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--oa-text-regular);
  margin-top: 12px !important;
}

/* ---------- responsive ---------- */

@media (max-width: 1280px) {
  .oa-contact-main { gap: 40px; }
  .oa-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .oa-contact-content-wrap { padding-top: 72px; padding-bottom: 88px; }
  .oa-contact-main { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .oa-contact .oa-contact-headline { font-size: 44px; }
  .oa-contact .oa-contact-headline .accent { font-size: 48px; }
  .oa-contact-rule { margin: 32px 0 28px !important; }
  .oa-contact-details { margin-top: 48px !important; }
  .oa-contact-divider { margin-top: 80px !important; }
  .oa-contact-cards { margin-top: 80px !important; }
  .oa-contact-card-item { min-height: 0 !important; }
  .oa-contact .oa-contact-card-title { margin-top: 56px !important; }
}

@media (max-width: 640px) {
  .oa-contact-content-wrap { padding-top: 56px; padding-bottom: 64px; }
  .oa-contact .oa-contact-headline { font-size: 34px; }
  .oa-contact .oa-contact-headline .accent { font-size: 38px; }
  .oa-contact-card { padding: 32px 24px; }
  .oa-contact .oa-contact-form-title { font-size: 27px; margin-bottom: 28px !important; }
  .oa-contact-divider { margin-top: 56px !important; }
  .oa-contact-cards { grid-template-columns: minmax(0, 1fr); margin-top: 56px !important; gap: 16px; }
  .oa-contact .oa-contact-card-title { margin-top: 32px !important; }
}