/* Cre8zero's contact panel, in the website's own dress: Exo for headings,
   fields and buttons, Albert Sans for text, the navy panel with white
   rounded fields, and the white rounded Submit Now.

   EMBEDDED, SO THE PANEL IS THE WHOLE PAGE. No margin around it and a
   transparent page behind it, so its rounded corners sit on whatever the
   website puts behind the frame. */
:root {
  --navy: #0b3576;
  --ink: #000000;
  --white: #ffffff;
  --bad: #ffd7d2;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: transparent; }
body {
  color: var(--white);
  font: 16px/1.6 "Albert Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
h2, h3, .send, .form input, .form select, .form textarea {
  font-family: Exo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.panel {
  background: var(--navy); color: var(--white);
  border-radius: 20px; margin: 0; padding: 44px 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 44px;
}
.intro h2 { margin: 0 0 26px; font-size: 35px; line-height: 1.25; font-weight: 700; }
.way { margin: 0 0 20px; }
.way:last-child { margin-bottom: 0; }
.way h3 { margin: 0 0 2px; font-size: 22px; font-weight: 500; line-height: 1.2; }
.way p, .way a { margin: 0; color: var(--white); font-size: 17px; text-decoration: none; overflow-wrap: anywhere; }
.way a:hover { text-decoration: underline; }

.form { display: grid; gap: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: block; min-width: 0; }
/* The website keeps its labels for screen readers and shows placeholders. */
.label, .trap {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.form input, .form select, .form textarea {
  width: 100%; border: 0; border-radius: 30px;
  background: var(--white); color: var(--ink);
  font-size: 17px; min-height: 40px; padding: 8px 16px;
}
.form select { padding: 5px 20px 5px 14px; }
.form textarea { border-radius: 22px; padding: 10px 16px; resize: vertical; min-height: 105px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible,
.send:focus-visible { outline: 3px solid #61ce70; outline-offset: 2px; }
.send {
  width: 100%; min-height: 40px; border: 0; border-radius: 30px; padding: 0 24px;
  background: var(--white); color: var(--navy);
  font-size: 17px; font-weight: 500; cursor: pointer;
}
.send:hover { background: #eef3fb; }
.send:disabled { opacity: .6; cursor: progress; }
.status { margin: 0; min-height: 1.6em; }
.status.bad { color: var(--bad); font-weight: 600; }
.thanks h2 { margin: 0 0 8px; font-size: 30px; font-weight: 600; }
.thanks p { margin: 0; font-size: 18px; }

/* A narrow frame - the website on a phone - stacks the two halves. */
@media (max-width: 820px) {
  .panel { grid-template-columns: 1fr; padding: 28px 20px; gap: 26px; }
  .row { grid-template-columns: 1fr; }
  .intro h2 { font-size: 28px; }
}