.contact-main {
  background: radial-gradient(ellipse at 100% 49%, #dcefe3, transparent 55%), #f3f8f3;
}
.contact-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f4fff7;
  background: radial-gradient(ellipse at 85% 40%, #2a7b58, transparent 62%), linear-gradient(111deg, #0b251c, #14513c);
}
.contact-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(0deg, transparent 0 33px, #bff7db25 33px 34px), repeating-linear-gradient(90deg, transparent 0 33px, #bff7db21 33px 34px);
  mask-image: radial-gradient(ellipse at 82% 48%, #000 2%, transparent 64%);
}
.contact-intro { padding-block: 26px clamp(74px, 8vw, 122px); }
.contact-intro h1 { margin-top: 21px; font-size: clamp(2.85rem, 7vw, 5.35rem); text-wrap: balance; }
.contact-intro h1 em { color: #b5f8c9; font-style: normal; }
.contact-intro p { max-width: 51ch; margin-top: 14px; color: #e0f3e7; font-size: clamp(1rem, 2vw, 1.15rem); }
.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(255px, .9fr);
  align-items: start;
  gap: clamp(15px, 2.9vw, 34px);
  margin-top: -39px;
  padding-bottom: clamp(45px, 7vw, 86px);
}
.contact-sheet, .contact-inbox, .contact-library {
  min-width: 0;
  padding: clamp(18px, 3vw, 33px);
  border: 1px solid #c9dfd3;
  border-radius: 19px;
}
.contact-sheet { background: linear-gradient(151deg, #fff 26%, #f8fcf9); box-shadow: 0 18px 60px #1d573618; }
.contact-sheet-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 22px; }
.contact-sheet-head h2, .contact-inbox h2, .contact-library h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
.contact-sheet-head p { margin-top: 5px; color: var(--muted); font-size: .92rem; }
.contact-symbol {
  display: grid;
  flex: none;
  position: relative;
  width: 41px;
  height: 41px;
  place-items: center;
  border: 1px solid #c6e7d6;
  border-radius: 12px;
  color: #1b684d;
  background: linear-gradient(145deg, #e9f9ec, #d2f2e0);
}
.contact-symbol::before { width: 18px; height: 14px; border: 1.5px solid; border-radius: 3px; content: ""; }
.contact-symbol-message::after { position: absolute; width: 5px; height: 5px; left: 14px; top: 23px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; background: #e0f5e6; content: ""; transform: skewY(-34deg); }
.contact-symbol-mail::after { position: absolute; width: 11px; height: 8px; top: 14px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; content: ""; transform: translateY(-1px) rotate(-47deg) skew(5deg, 5deg); }
.contact-form { display: grid; gap: 14px; }
.contact-form[hidden], .contact-status[hidden], .contact-selection[hidden] { display: none; }
.contact-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.contact-form label { display: grid; gap: 6px; min-width: 0; color: var(--ink); font-size: .89rem; font-weight: 700; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid #ccded2;
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 450;
}
.contact-form select { padding-inline-end: 25px; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.contact-actions button { cursor: pointer; font: inherit; font-size: .91rem; font-weight: 730; }
.contact-copy { min-height: 47px; padding: 9px 14px; border: 1px solid #c6dcd0; border-radius: 10px; color: #19523f; background: #f0f8f2; }
.contact-copy:hover { background: #e2f3e8; }
.contact-hint { color: var(--muted); font-size: .84rem; }
.contact-selection, .contact-status { padding: 8px 11px; border-radius: 8px; color: #1c5140; background: #e9f6ed; font-size: .86rem; font-weight: 620; }
.contact-sidebar { display: grid; gap: 13px; }
.contact-inbox {
  display: grid;
  justify-items: start;
  gap: 12px;
  border-color: #54a28270;
  box-shadow: 0 13px 38px #17472923;
  color: #f3fff6;
  background: radial-gradient(ellipse at 100% 0%, #298361, transparent 78%), #123b2d;
}
.contact-inbox .contact-symbol { border-color: #b0f7ce68; color: #ccffdc; background: #aef1ce24; }
.contact-address { color: #c6ffda; overflow-wrap: anywhere; font-weight: 730; font-size: clamp(.94rem, 2vw, 1.13rem); }
.contact-library { background: #fff9; }
.contact-library h2 { margin-bottom: 9px; }
.contact-library a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid #d8e8dd; color: #164a37; text-decoration: none; }
.contact-library a:hover strong { text-decoration: underline; }
.contact-library a small { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; }
@media (max-width: 740px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 450px) {
  .contact-field-row { grid-template-columns: minmax(0, 1fr); }
  .contact-intro { padding-top: 20px; }
}