.source-request {
  --source-request-ink: var(--landing-navy, #16033a);
  --source-request-muted: var(--landing-muted, #665a76);
  --source-request-purple: var(--landing-cobalt, #7839ee);
  --source-request-line: #d9d1e5;
  box-sizing: border-box;
  width: min(1180px, calc(100% - 96px));
  margin: 80px auto 112px;
  color: var(--source-request-ink);
  font-family: Inter, Arial, sans-serif;
  text-align: left;
}

.source-request *, .source-request *::before, .source-request *::after { box-sizing: border-box; }
.source-request [hidden] { display: none !important; }
.source-request ::selection { color: #fff; background: var(--source-request-purple); }
.source-request__frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
  padding: 12px;
  overflow: hidden;
  border-radius: 24px;
  background: #6728d4 url('/assets/hero/soceo-glass/background-1600.webp') center / cover no-repeat;
}
.source-request__tag {
  position: absolute;
  z-index: 1;
  top: 42px;
  left: 44px;
  margin: 0;
  color: var(--source-request-purple);
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .12em;
}
.source-request__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 76px 32px 44px;
  border-radius: 14px 0 0 14px;
  background: var(--landing-cream, #f6f2ed);
}
.source-request__intro h2 {
  max-width: 12em;
  margin: 0 0 18px;
  color: inherit;
  font-family: "Bricolage Grotesque", Inter, sans-serif;
  font-size: clamp(32px, 2.8vw, 40px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.source-request__intro p {
  max-width: 31ch;
  margin: 0;
  color: var(--source-request-muted);
  font-size: 18px;
  line-height: 1.55;
}
.source-request__surround {
  display: flex;
  min-width: 0;
  border-left: 1px solid var(--source-request-line);
  border-radius: 0 14px 14px 0;
  background: #fff;
}
.source-request__form { position: relative; flex: 1; min-width: 0; padding: 34px 34px 28px; border-radius: inherit; background: #fff; }
.source-request__field { display: grid; min-width: 0; gap: 7px; margin-bottom: 17px; }
.source-request__field label {
  color: var(--source-request-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.source-request__field input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--source-request-line);
  border-radius: 8px;
  background: #fff;
  color: var(--source-request-ink);
  caret-color: var(--source-request-purple);
  font: 16px/1.5 Inter, Arial, sans-serif;
}
.source-request__field input::placeholder { color: var(--source-request-muted); opacity: 1; }
.source-request__field input[aria-invalid="true"] { border-color: #a02b44; }
.source-request__field input:read-only { color: var(--source-request-muted); background: #f8f6fb; }
.source-request__form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--source-request-purple);
  font: 600 15px/1.4 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}
.source-request__form button:not(:disabled):hover { background: var(--soceo-violet-700, #6728d4); transform: translateY(-1px); }
.source-request__form button:not(:disabled):active { transform: translateY(0); }
.source-request__form button:disabled { cursor: default; opacity: .65; }
.source-request__form button[aria-busy="true"] { cursor: progress; }
.source-request :is(input, button, a):focus-visible { outline: 3px solid var(--source-request-purple); outline-offset: 5px; }
.source-request__privacy {
  max-width: 65ch;
  margin: 15px 0 0;
  color: var(--source-request-muted);
  font-size: 12px;
  line-height: 1.6;
}
.source-request__privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.source-request__status { min-height: 1.5em; margin: 12px 0 0; color: var(--source-request-muted); font-size: 13px; line-height: 1.5; }
.source-request__status[data-state="success"] { color: #215d43; }
.source-request__status[data-state="error"], .source-request__field-error { color: #a02b44; }
.source-request__field-error { font-size: 12px; line-height: 1.5; }
.source-request__trap { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 800px) {
  .source-request { width: calc(100% - 40px); margin-block: 64px 80px; }
  .source-request__frame { grid-template-columns: 1fr; padding: 10px; border-radius: 20px; background-image: url('/assets/hero/soceo-glass/background-800.webp'); }
  .source-request__tag { top: 36px; left: 34px; }
  .source-request__intro { padding: 64px 24px 30px; border-radius: 12px 12px 0 0; }
  .source-request__intro h2 { max-width: 19em; }
  .source-request__intro p { max-width: 48ch; font-size: 16px; }
  .source-request__surround { border-left: 0; border-top: 1px solid var(--source-request-line); border-radius: 0 0 12px 12px; }
  .source-request__form { padding: 28px 24px 22px; }
}
@media (max-width: 400px) {
  .source-request__frame { padding: 8px; }
  .source-request__tag { top: 32px; left: 28px; }
  .source-request__intro { padding-inline: 20px; }
  .source-request__form { padding-inline: 20px; }
  .source-request__form button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .source-request__form button { transition: none; } }
