/* =========================================================
   Request a demo / Get in touch: native CarbonAI form pages.
   Built on index.css (header, footer, tokens). The form is the hero:
   form ~57% on the left, an image panel ~43% on the right.
   ========================================================= */
.fm-page { --fm-ink: #1f2d2f; --fm-line: #d6e1e2; --fm-error: #a33a2c; background: #f7fafa; }
.fm-main { padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.fm-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 14px clamp(28px, 4vw, 56px); align-items: stretch; }
.fm-col { display: contents; }
.fm-intro { grid-column: 1; grid-row: 1; }
.fm-card { grid-column: 1; grid-row: 2; }
.fm-visual { grid-column: 2; grid-row: 2; }

/* intro */
.fm-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }
.fm-intro h1 { margin: 0; font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--fm-ink); }
.fm-intro p { max-width: 34em; margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: var(--body); }

/* form surface */
.fm-card { padding: clamp(18px, 2vw, 24px) clamp(20px, 2.6vw, 32px); border: 1px solid #e3ebec; border-radius: 14px; background: #fff; }
.fm-form { display: grid; gap: 11px; }
.fm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fm-field { display: grid; gap: 4px; align-content: start; }
.fm-label { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fm-ink); }
.fm-label .req { color: var(--teal-dark); }
.fm-label .opt { font-size: 13px; font-weight: 400; color: #6b7280; }
.fm-input, .fm-select, .fm-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--fm-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15.5px;
  color: var(--fm-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fm-input::placeholder, .fm-textarea::placeholder { color: #8a949b; }
.fm-input:hover, .fm-select:hover, .fm-textarea:hover { border-color: #b9cbcd; }
.fm-input:focus, .fm-select:focus, .fm-textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(57, 127, 134, 0.18); }
.fm-textarea { min-height: 108px; max-height: 360px; resize: vertical; line-height: 1.5; }
.fm-field.is-invalid .fm-input, .fm-field.is-invalid .fm-select, .fm-field.is-invalid .fm-textarea { border-color: var(--fm-error); }
.fm-field.is-invalid .fm-input:focus, .fm-field.is-invalid .fm-select:focus, .fm-field.is-invalid .fm-textarea:focus { box-shadow: 0 0 0 3px rgba(163, 58, 44, 0.16); }
.fm-help { margin: -1px 0 -3px; font-size: 13px; line-height: 1.4; color: #6b7280; }
.fm-error { display: none; margin: 0; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--fm-error); }
.fm-error::before { content: "! "; font-weight: 700; }
.fm-field.is-invalid .fm-error { display: block; }
.fm-field.is-invalid .fm-help { display: none; }

/* work email status, shown inside the field */
.fm-email-wrap { position: relative; }
.fm-email-wrap .fm-input { padding-right: 132px; }
.fm-email-status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #eef5f5; font-size: 12.5px; font-weight: 600; color: var(--teal-dark); pointer-events: none; }
.fm-field.is-ok .fm-email-status { display: inline-flex; }
.fm-email-status svg { width: 13px; height: 13px; }

/* phone: country code + number */
.fm-phone { display: grid; grid-template-columns: minmax(118px, 0.32fr) minmax(0, 1fr); gap: 8px; }
.fm-select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; cursor: pointer; }

/* legal + submit */
.fm-legal { margin: -3px 0 0; font-size: 13.5px; line-height: 1.5; color: #4b5563; }
.fm-legal a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.fm-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 14px 24px;
  border: 1px solid var(--teal);
  border-radius: 6px;
  background: var(--teal);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.fm-submit:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.fm-submit:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.fm-submit[disabled] { cursor: progress; opacity: 0.8; }
.fm-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: fm-spin 0.8s linear infinite; }
.fm-form.is-sending .fm-spinner { display: inline-block; }
@keyframes fm-spin { to { transform: rotate(360deg); } }
.fm-alert { display: none; margin: 0; padding: 12px 14px; border: 1px solid #efc9c2; border-left: 3px solid var(--fm-error); border-radius: 0 8px 8px 0; background: #fdf5f3; font-size: 14px; line-height: 1.5; color: #5e2a22; }
.fm-alert.is-shown { display: block; }

/* success */
.fm-success { display: none; padding: clamp(8px, 1.4vw, 16px) 0; }
.fm-card.is-done .fm-form { display: none; }
.fm-card.is-done .fm-success { display: block; }
.fm-success-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: #eef5f5; color: var(--teal-dark); }
.fm-success-mark svg { width: 22px; height: 22px; }
.fm-success h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--fm-ink); }
.fm-success h2:focus { outline: none; }
.fm-success p { max-width: 32em; margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.fm-success a { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--teal-dark); }

/* image panel */
.fm-visual { position: relative; overflow: hidden; isolation: isolate; min-height: 380px; border-radius: 14px; background: #1f4a4f; color: #fff; }
.fm-visual > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.03); }
.fm-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 52, 57, 0.18); }
.fm-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 28, 32, 0) 30%, rgba(10, 28, 32, 0.55) 62%, rgba(10, 28, 32, 0.86) 100%); }
.fm-visual-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 2.6vw, 32px); }
.fm-visual-copy h2 { margin: 0; font-size: clamp(22px, 1.9vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.fm-visual-copy p { max-width: 30em; margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); }
.fm-points { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.fm-points li { position: relative; padding-left: 22px; font-size: 15.5px; font-weight: 500; color: #fff; }
.fm-points li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 5px; height: 10px; border: solid #a8d8db; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fm-visual-copy .fm-tagline { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.22); font-size: 14.5px; color: rgba(255, 255, 255, 0.82); }

/* header: subtle current-page state for the Request a demo button */
.header-demo.is-current { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }

/* responsive */
@media (max-width: 960px) {
  .fm-grid { grid-template-columns: minmax(0, 1fr); }
  .fm-visual { grid-column: 1; grid-row: 3; margin-top: 14px; }
  /* the copy sits in flow so the panel grows with it; the image shows above */
  .fm-visual { min-height: 0; }
  .fm-visual-copy { position: relative; padding-top: 150px; }
  .fm-visual::after { background: linear-gradient(180deg, rgba(10, 28, 32, 0) 10%, rgba(10, 28, 32, 0.6) 45%, rgba(10, 28, 32, 0.88) 100%); }
}
@media (max-width: 560px) {
  .fm-row { grid-template-columns: minmax(0, 1fr); }
  .fm-email-wrap .fm-input { padding-right: 14px; }
  .fm-email-status { position: static; transform: none; margin-top: 6px; width: fit-content; }
  .fm-phone { grid-template-columns: minmax(104px, 0.4fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .fm-spinner { animation-duration: 2.4s; } .fm-input, .fm-select, .fm-textarea, .fm-submit { transition: none; } }

/* image panel with the copy at the top, for photos whose subject sits low
   (Get in touch: the figure on the rock stays clear) */
.fm-visual--top::after { background: linear-gradient(0deg, rgba(10, 28, 32, 0) 42%, rgba(10, 28, 32, 0.5) 66%, rgba(10, 28, 32, 0.84) 100%); }
.fm-visual--top .fm-visual-copy { top: 0; bottom: auto; }
@media (max-width: 960px) {
  .fm-visual--top::after { background: linear-gradient(0deg, rgba(10, 28, 32, 0) 30%, rgba(10, 28, 32, 0.62) 60%, rgba(10, 28, 32, 0.88) 100%); }
  .fm-visual--top .fm-visual-copy { padding-top: clamp(22px, 2.6vw, 32px); padding-bottom: 190px; }
}
/* honeypot: off-screen rather than display:none, which some bots skip */
.fm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }