/* 14 — Contact slide-out (Figma desktop 1022:57553 / mobile 1022:57613) */
.contact-scrim {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(8, 42, 28, .5);
  opacity: 0;
  transition: opacity .4s ease;
}
.contact-scrim.is-open { opacity: 1; }

/* the panel: a white card floating 24px off the top, right and bottom edges */
.contact-drawer {
  position: fixed; top: 24px; right: 24px; bottom: 24px; z-index: 300;
  width: 600px;
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 48px;
  border-radius: var(--radius-16);
  background: var(--surface-white);
  color: var(--text-ink);
  font-family: var(--font);
  /* closed: fully transparent shadow and hidden, so nothing bleeds into the viewport from the off-screen panel */
  box-shadow: -24px 12px 60px rgba(0, 0, 0, 0);
  visibility: hidden;
  transform: translateX(calc(100% + 24px));
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .55s ease, visibility 0s linear .55s;
  overflow-y: auto;
}
.contact-drawer.is-open { transform: none; box-shadow: -24px 12px 60px rgba(0, 0, 0, .28); visibility: visible; transition-delay: 0s, 0s, 0s; }

/* ---- intro: the founder's portrait, the greeting and the close button share one row ---- */
.contact-intro {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.contact-intro__avatar {
  position: relative;
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(8, 42, 28, .18);
}
.contact-intro__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}
/* the "online" dot: the copy promises a personal reply, the dot says someone is really there */
.contact-intro__avatar::after {
  content: "";
  position: absolute; right: 4px; bottom: 4px;
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  background: #22a06b;
  box-shadow: 0 0 0 3px var(--surface-white);
}
.contact-intro__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.contact-intro__title { margin: 0; font: 500 32px/36px var(--font); letter-spacing: -0.96px; color: var(--text-ink); }
.contact-intro__lead { margin: 0; font: 400 16px/22px var(--font); letter-spacing: -0.32px; color: var(--text-muted); }
.contact-drawer__close {
  width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-12);
  background: var(--surface-subtle);
  color: var(--text-ink);
  transition: background-color .25s ease;
}
.contact-drawer__close:hover { background: #cfd7dd; }
.contact-drawer__close svg { width: 24px; height: 24px; }

/* ---- form ---- */
.contact-form { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.contact-form__fields { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.contact-form__group { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.contact-form__label { font: 500 16px/20px var(--font); letter-spacing: -0.32px; color: var(--text-ink); }
.contact-form__req { color: var(--text-muted); }
.contact-form__opt { font-weight: 400; color: var(--text-muted); }
.contact-form__field {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  padding: 16px 20px;
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-12);
  background: transparent;
  color: var(--text-ink);
  font: 400 16px/20px var(--font);
  letter-spacing: -0.64px;
  outline: none;
  appearance: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.contact-form__field::placeholder { color: var(--text-muted); opacity: 1; }
.contact-form__field:hover:not(:focus):not(.is-error) { border-color: var(--brand-primary); }
.contact-form__field:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); }
/* Error state. The red is #c3392b and not something brighter because the status
   block below tints its own background with it: on that ground a lighter red lands
   at 4.26:1 and fails WCAG AA, and the error message is the one line a person most
   needs to be able to read. This value clears 4.5:1 on the tint and on white. */
.contact-form__field.is-error { border-color: #c3392b; }
.contact-form__field.is-error:focus { box-shadow: 0 0 0 1px #c3392b; }
.contact-form__msg { margin: -2px 0 0; padding: 0 4px; font: 400 13px/16px var(--font); letter-spacing: -0.26px; color: #c3392b; }
.contact-form__field--area { height: 140px; resize: none; display: block; }

.contact-form__required { margin: -8px 0 0; font: 400 14px/18px var(--font); letter-spacing: -0.28px; color: var(--text-muted); }

.contact-form__submit {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-12);
  background: var(--brand-primary);
  color: var(--text-inverse);
  font: 600 16px/24px var(--font);
  letter-spacing: -0.64px;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.contact-form__submit:hover { background: #0c3a27; }
.contact-form__submit:active { transform: translateY(1px); }

/* the consent line opens the legal pages in a new tab: the legal drawers would replace
   this one, and a half-typed message must survive a glance at the terms */
.contact-form__consent { margin: -8px 0 0; text-align: center; font: 400 13px/18px var(--font); letter-spacing: -0.26px; color: var(--text-muted); }
.contact-form__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.contact-form__consent a:hover { color: var(--text-ink); }

/* mobile: 24px inset on every side, 24px inner padding; the greeting drops under the portrait */
@media (max-width: 767px) {
  .contact-drawer {
    left: 24px;
    width: auto;
    max-width: none;
    gap: 32px;
    padding: 24px;
    transform: translateX(calc(100% + 24px));
  }
  .contact-drawer.is-open { transform: none; }
  /* row 1 is the portrait and the close button; the greeting wraps under both,
     so the close stays in the corner a thumb reaches for */
  .contact-intro { flex-wrap: wrap; align-items: center; gap: 16px; }
  .contact-intro__avatar { order: 1; width: 88px; height: 88px; }
  .contact-drawer__close { order: 2; margin-left: auto; }
  .contact-intro__text { order: 3; flex-basis: 100%; padding-top: 0; }
  .contact-intro__title { font: 500 24px/28px var(--font); letter-spacing: -0.48px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-drawer, .contact-scrim { transition: none; }
}

/* ---- submission states (loading / success / error) ----
   The delivered design had no status affordance at all; these are the styles for the
   aria-live region and the busy button that js/lb-integrations.js drives. */
.contact-form__status {
  margin: 0 0 -8px;
  padding: 12px 16px;
  border-radius: var(--radius-12);
  font: 400 14px/20px var(--font);
  letter-spacing: -0.28px;
}
.contact-form__status--ok {
  background: var(--surface-accent);
  color: var(--text-ink);
}
.contact-form__status--error {
  background: rgba(207, 63, 48, .08);
  color: #c3392b;
}
.contact-form__submit[disabled] { opacity: .6; cursor: progress; }
.contact-form__submit[disabled]:hover { background: var(--brand-primary); }