/* The launch message replaces the portfolio link below the original cover. */
.launch-note {
  position: absolute;
  top: calc(var(--layout-height) - var(--home-frame-y) + 16px);
  right: var(--home-frame-x);
  left: var(--home-frame-x);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  color: var(--green);
}
.launch-note p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}
.contact-button {
  flex: none;
  min-height: 44px;
  padding: 10px 23px;
  border: 1px solid var(--green);
  border-radius: 10px;
  background: var(--green);
  color: var(--sage);
  font-size: 14px;
  font-weight: 600;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.contact-button:hover, .contact-button:focus-visible { background: var(--sage); border-color: var(--sage); color: var(--green); }
.contact-button:active { font-weight: 700; }

html:has(.contact-dialog[open]) { overflow: hidden; }
.contact-dialog {
  width: min(640px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--sage);
  border-radius: 20px;
  background: var(--cream);
  color: var(--green);
  box-shadow: 0 20px 80px rgb(20 40 35 / 18%);
}
.contact-dialog::backdrop { background: rgb(22 44 40 / 62%); }
.contact-dialog[open] { animation: contact-appear 180ms ease-out; }
.contact-dialog-inner { position: relative; padding: 52px 48px 44px; }
.contact-close-form { position: absolute; top: 14px; right: 14px; }
.contact-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
}
.contact-close span { position: relative; width: 20px; height: 20px; }
.contact-close span::before, .contact-close span::after {
  position: absolute;
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
  content: "";
  background: currentColor;
  transform: rotate(45deg);
}
.contact-close span::after { transform: rotate(-45deg); }
.contact-close:hover { background: var(--sage); }
.contact-eyebrow { margin-bottom: 12px; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.contact-dialog h2 { max-width: 420px; font-size: clamp(27px, 4vw, 36px); font-weight: 500; line-height: 1.12; }
.contact-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
  padding-block: 26px;
  border-block: 1px solid var(--sage);
}
.contact-addresses address { font-size: 15px; font-style: normal; line-height: 1.6; }
.contact-addresses strong { display: block; margin-bottom: 8px; font-weight: 600; }
.contact-direct { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 20px; }
.contact-direct a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 500; }
.contact-direct a:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-fallback { padding: 28px; color: var(--green); background: var(--cream); text-align: center; }
.contact-fallback p { margin-top: 12px; }
html:has(.contact-fallback), .home-page:has(.contact-fallback) { height: auto; overflow: auto; }
.home-page:has(.contact-fallback) .contact-button { display: none; }

@keyframes contact-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 841px) {
  /* Keep enough room for the new button on a short desktop window. */
  .home-cover { padding-bottom: max(68px, var(--home-frame-y)); }
  .launch-note { top: calc(var(--layout-height) - max(68px, var(--home-frame-y)) + 16px); }
}
@media (max-width: 840px) {
  .home-cover { --home-link-space: max(106px, 14dvh); }
  .launch-note { position: static; flex-direction: column; justify-content: center; gap: 10px; padding-block: 12px; text-align: center; }
  .launch-note p { max-width: 270px; font-size: 13px; line-height: 1.3; text-wrap: balance; }
  .contact-button { padding-inline: 22px; font-size: 13px; }
}
@media (max-width: 480px) {
  .contact-dialog { width: calc(100% - 32px); max-height: calc(100dvh - 32px); border-radius: 18px; }
  .contact-dialog-inner { padding: 52px 26px 24px; }
  .contact-close-form { top: 8px; right: 8px; }
  .contact-dialog h2 { font-size: 28px; }
  .contact-addresses { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; padding-block: 20px; }
  .contact-addresses address { font-size: 14px; }
  .contact-addresses strong { margin-bottom: 4px; }
  .contact-direct { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 12px; }
}
@media (max-width: 840px) and (max-height: 500px) {
  .home-cover { --home-link-space: 100px; }
  .home-card { padding-top: 12px; padding-bottom: 12px; }
  .home-brand { width: min(263px, 100%, 24dvh); }
  .home-actions { margin-top: 10px; }
  .home-action + .home-action { padding-top: 0; }
  .home-action span, .home-action:first-child span { margin-top: 8px; }
  .home-cover { --home-mobile-picto: min(42px, 8dvh); }
  .contact-dialog-inner { padding-top: 32px; padding-bottom: 20px; }
  .contact-dialog h2 { padding-right: 24px; }
  .contact-addresses { margin-top: 20px; padding-block: 16px; }
}