body.modal-open{overflow:hidden}
.form-note{margin:0;color:var(--ink)!important;font:13px/1.5 Inter,sans-serif}.form-note a{text-underline-offset:3px}

/* Shared contact dialog: opening the small CTA post-it reveals the same object at a larger scale. */
.contact-dialog{
  width:min(560px,calc(100% - 30px));
  max-height:calc(100dvh - 28px);
  border:0;
  padding:18px 10px;
  background:transparent;
  color:var(--ink);
  overflow:visible;
}
.contact-dialog::backdrop{
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(6px);
}

.contact-sheet{
  position:relative;
  width:min(520px,100%);
  min-height:520px;
  aspect-ratio:1/1;
  margin:auto;
  padding:62px 48px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,var(--sand) 0%,rgba(232,209,158,.88) 100%);
  color:var(--ink);
  box-shadow:0 24px 62px -8px rgba(0,0,0,.68),0 0 0 1px rgba(0,0,0,.08);
  transform:rotate(-1.7deg);
  transform-origin:center;
  animation:contactPostitIn .34s var(--spring) both;
}

.contact-sheet::before{
  content:"";
  position:absolute;
  top:-12px;
  left:50%;
  width:92px;
  height:26px;
  transform:translateX(-50%);
  border-radius:4px;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(4px);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.contact-close{
  position:absolute;
  z-index:3;
  right:18px;
  top:18px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(30,19,51,.12);
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:var(--ink);
  cursor:pointer;
  font:800 25px/1 Outfit,sans-serif;
  transition:transform .18s ease,background .18s ease;
}
.contact-close:hover{transform:rotate(5deg) scale(1.05);background:rgba(255,255,255,.3)}
.contact-close:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.contact-sheet h2{
  max-width:390px;
  margin:0 auto;
  color:var(--ink);
  font-family:"Caveat","Segoe Print","Bradley Hand",cursive;
  font-size:clamp(42px,7vw,62px);
  font-weight:700;
  line-height:.9;
  letter-spacing:.005em;
  text-align:center;
  transform:rotate(-.8deg);
}

.contact-sheet-intro{
  max-width:400px;
  margin:22px auto 0;
  color:rgba(30,19,51,.72);
  font:500 14px/1.55 Inter,sans-serif;
  text-align:center;
}

.contact-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px;
}

.contact-option{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  padding:16px;
  border:1px solid rgba(30,19,51,.13);
  border-radius:14px 17px 15px 18px;
  background:rgba(255,255,255,.16);
}
.contact-option:nth-child(1){transform:rotate(.45deg)}
.contact-option:nth-child(2){transform:rotate(-.55deg)}

.contact-option strong{
  color:var(--ink);
  font:900 17px/1 Outfit,sans-serif;
}
.contact-option>a{
  max-width:100%;
  color:var(--plum);
  font:800 13px/1.35 Inter,sans-serif;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}

.contact-copy{
  margin-top:auto;
  padding:8px 12px;
  border:1px solid rgba(30,19,51,.15);
  border-radius:999px;
  background:rgba(30,19,51,.08);
  color:var(--ink);
  cursor:pointer;
  font:800 11px/1 Outfit,sans-serif;
  transition:transform .18s ease,background .18s ease;
}
.contact-copy:hover{transform:translateY(-2px);background:rgba(30,19,51,.14)}
.contact-copy:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.contact-legal-links{
  margin:20px auto 0;
  color:rgba(30,19,51,.58)!important;
  text-align:center;
}
.contact-legal-links a{color:inherit}

@keyframes contactPostitIn{
  from{opacity:0;transform:rotate(-4deg) scale(.72)}
  72%{opacity:1;transform:rotate(-1deg) scale(1.025)}
  to{opacity:1;transform:rotate(-1.7deg) scale(1)}
}

@media(max-width:620px){
  .contact-dialog{
    width:calc(100% - 18px);
    padding:14px 4px;
  }
  .contact-sheet{
    width:min(420px,100%);
    min-height:0;
    aspect-ratio:1/1;
    padding:48px 20px 22px;
    border-radius:14px 18px 15px 17px;
    transform:rotate(-1.3deg);
  }
  .contact-sheet::before{
    top:-10px;
    width:76px;
    height:22px;
  }
  .contact-sheet h2{
    max-width:300px;
    font-size:clamp(36px,11.5vw,48px);
  }
  .contact-sheet-intro{
    margin-top:14px;
    font-size:12.5px;
    line-height:1.45;
  }
  .contact-options{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:16px;
  }
  .contact-option{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:7px 12px;
    padding:10px 12px;
  }
  .contact-option strong,
  .contact-option>a{grid-column:1}
  .contact-copy{
    grid-column:2;
    grid-row:1 / span 2;
    margin:0;
    align-self:center;
  }
  .contact-close{
    right:11px;
    top:11px;
    width:34px;
    height:34px;
    font-size:22px;
  }
  .contact-legal-links{
    margin-top:12px;
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .contact-sheet{animation:none}
  .contact-copy,.contact-close{transition:none}
}


/* Small screens: let the contact post-it size itself to its content and viewport. */
@media(max-width:620px){
  .contact-dialog{
    max-height:calc(100dvh - 12px);
    overflow:auto;
  }
  .contact-sheet{
    min-height:min(520px,calc(100dvh - 40px));
    aspect-ratio:auto;
  }
}
@media(max-width:360px){
  .contact-sheet{padding:46px 16px 20px}
  .contact-options{gap:10px}
  .contact-option{
    grid-template-columns:1fr;
    align-items:start;
  }
  .contact-option strong,
  .contact-option>a,
  .contact-copy{grid-column:1}
  .contact-copy{
    grid-row:auto;
    justify-self:start;
  }
  .contact-option>a{font-size:12.5px}
}