/* Contact widget, on every page: a docked button that opens a short contact form. It stays put across page loads:
   the open view and the draft are restored from sessionStorage, and the dock keeps its place in view transitions. */
.pe-dock, .pe-dock *, .pe-dock *::before, .pe-dock *::after { box-sizing: border-box; }
.pe-dock { view-transition-name: pe-dock; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
/* Page-level element styles (site.css) must not leak into the widget. Widget rules that set a text colour on a
   paragraph are written as `.pe-cw .name` so they outrank this reset. */
.pe-dock p, .pe-dock h2 { margin: 0; color: inherit; font-family: inherit; }
.pe-dock em { color: inherit; }
.pe-dock {
  position: fixed; right: 24px; bottom: 24px; z-index: 30; width: min(400px, calc(100% - 32px));
  display: flex; flex-direction: column; align-items: flex-end; font-family: var(--pe-sans); color: var(--pe-forest); text-align: left;
  pointer-events: none;
}
.pe-dock > * { pointer-events: auto; }
.pe-launch {
  display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 14px;
  font: inherit; font-size: 15px; font-weight: 500; background: var(--pe-cream); color: var(--pe-forest);
  border: 1px solid var(--pe-forest); border-radius: 26px; cursor: pointer; box-shadow: 0 10px 30px rgba(8, 24, 17, 0.35);
}
.pe-launch img { display: block; }
.pe-launch[hidden] { display: none; }
/* As tall as the form needs, up to the space under the pinned top bar (73px, plus 16px above and 24px below).
   Past that the fields scroll and the send button stays in view. */
.pe-cw {
  width: 100%; max-height: calc(100vh - 113px); max-height: calc(100dvh - 113px);
  display: flex; flex-direction: column; background: var(--pe-paper); border: 6px solid #FFFFFF; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(18, 53, 38, 0.3), 0 24px 60px rgba(8, 24, 17, 0.42);
  font-size: 15px; line-height: 1.5;
}
.pe-cw[hidden], .pe-cw-view[hidden], .pe-cw [hidden] { display: none; }
.pe-cw :focus-visible { outline: 2px solid var(--pe-forest); outline-offset: 2px; }
.pe-cw p, .pe-cw h2, .pe-cw form { margin: 0; }
/* :where keeps this reset weaker than the button styles below. */
.pe-cw :where(button) { font: inherit; }
.pe-cw-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; background: var(--pe-forest); color: var(--pe-cream); }
.pe-cw-head :focus-visible { outline-color: var(--pe-cream); }
.pe-cw-brand { display: flex; align-items: center; gap: 12px; }
.pe-cw-brand img { display: block; }
.pe-cw-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.pe-cw .pe-cw-sub { font-family: var(--pe-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pe-label-dark); line-height: 1.3; }
.pe-cw-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--pe-cream); border: 0; cursor: pointer; }
.pe-cw-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pe-cw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 18px; display: flex; flex-direction: column; gap: 14px; }

/* The form */
.pe-cw-lead { font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.pe-cw-field { display: flex; flex-direction: column; gap: 6px; }
.pe-cw-field label { font-family: var(--pe-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pe-label); }
.pe-cw-field input, .pe-cw-field textarea {
  display: block; width: 100%; margin: 0; padding: 0 12px; font: inherit; font-size: 16px; line-height: 1.5;
  background: #FFFFFF; color: var(--pe-forest); border: 1px solid var(--pe-forest); border-radius: 2px;
}
.pe-cw-field input { height: 46px; }
.pe-cw-field textarea { height: 104px; padding: 10px 12px; resize: none; }
.pe-cw-field ::placeholder { color: var(--pe-label); opacity: 1; }
.pe-cw-field [aria-invalid="true"] { border-color: #8A2B14; box-shadow: inset 0 0 0 1px #8A2B14; }
.pe-cw .pe-cw-field-error, .pe-cw .pe-cw-error { font-size: 14px; line-height: 1.4; color: #8A2B14; }
.pe-cw-check { display: flex; gap: 12px; align-items: flex-start; }
.pe-cw-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; accent-color: var(--pe-forest); }
.pe-cw-check label { font-size: 14px; line-height: 1.45; color: var(--pe-ink-soft); }
.pe-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pe-cw-foot { flex: none; padding: 12px 16px 14px; border-top: 1px solid rgba(18, 53, 38, 0.22); display: flex; flex-direction: column; gap: 10px; }
.pe-cw-primary {
  height: 46px; font-size: 15px; font-weight: 600; background: var(--pe-forest); color: var(--pe-cream);
  border: 1px solid var(--pe-forest); border-radius: 2px; cursor: pointer;
}
.pe-cw-primary:disabled { opacity: 0.7; cursor: progress; }
.pe-cw .pe-cw-privacy { font-size: 13px; line-height: 1.45; color: var(--pe-label); }
.pe-cw-privacy a { color: var(--pe-forest); }

/* After sending */
.pe-cw-sent .pe-cw-body { min-height: 340px; padding: 32px 24px 24px; gap: 20px; justify-content: center; }
.pe-cw-sent img { display: block; }
.pe-cw-sent h2 { font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; }
.pe-cw-sent h2:focus { outline: none; }
.pe-cw-sent p { font-size: 16px; line-height: 1.5; color: var(--pe-ink-soft); }
.pe-cw-outline {
  flex: 0 0 auto; height: 46px; margin-top: 12px; font-size: 15px; font-weight: 600; background: transparent; color: var(--pe-forest);
  border: 1px solid var(--pe-forest); border-radius: 2px; cursor: pointer;
}

@media (max-width: 760px) {
  .pe-dock { right: 12px; bottom: 12px; width: calc(100% - 24px); }
  .pe-cw-body { padding: 18px 20px 16px; gap: 12px; }
  .pe-cw-field textarea { height: 96px; }
  /* The cookie card spans the phone's bottom edge until it is answered. */
  body:has(#pe-cc:not([hidden])) .pe-launch { display: none; }
}

/* On a phone, upright or on its side, the open form may need the whole screen, so it sits over the top bar
   instead of under it. */
@media (max-width: 760px), (max-height: 440px) {
  .pe-dock:has(.pe-cw:not([hidden])) { z-index: 45; }
  .pe-cw { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}

/* A very short window: the whole form scrolls, so the send button can still be reached. */
@media (max-height: 440px) {
  .pe-dock { bottom: 12px; }
  .pe-cw-view { overflow-y: auto; overscroll-behavior: contain; }
  .pe-cw-body { flex: none; overflow: visible; }
}