/* The existing contact section, temporarily lifted into the native modal.
   Geometry belongs here; contact copy and its normal layout stay canonical. */
:root { --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }
html { scrollbar-gutter: stable; }
html.project-sheet-lock { overflow: hidden; }
[data-project-page] {
  transition: transform 280ms var(--ease-drawer);
}
.project-sheet-open [data-project-page] {
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
}
.project-sheet {
  box-sizing: border-box;
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  height: calc(100dvh - max(32px, env(safe-area-inset-top, 0px)));
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: #171719;
  color: #eeeef0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 280ms var(--ease-drawer);
}
.project-sheet[open] { display: flex; flex-direction: column; }
.project-sheet.is-visible { transform: translateY(0); }
.project-sheet::backdrop {
  background: rgb(0 0 0 / 0%);
  transition: background-color 280ms var(--ease-drawer);
}
.project-sheet.is-visible::backdrop { background: rgb(0 0 0 / 55%); }
.project-sheet-bar {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 12px max(16px, var(--g, 24px)) 4px;
}
.project-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #454549;
  border-radius: 999px;
  background: #242427;
  color: #eeeef0;
  font: 500 14px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, transform 100ms var(--ease-drawer);
  -webkit-tap-highlight-color: transparent;
}
.project-sheet-close:active { transform: scale(0.97); }
.project-sheet-close:focus-visible { outline: 2px solid #eeeef0; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .project-sheet-close:hover { background: #36363a; }
}
.project-sheet-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #77777d #171719;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.project-sheet .ltk {
  flex: 0 0 auto;
  padding-top: 8px;
  padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 0px)));
}
.project-sheet-tail {
  flex: 0 0 auto;
  margin-top: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 1024px) {
  /* The same two sections; form first so it is immediately available. */
  .project-sheet .ltk-card { grid-row: 1; }
  .project-sheet .ltk-intro { grid-row: 2; }
}
@media (max-width: 520px) {
  .project-sheet { border-radius: 22px 22px 0 0; }
  .project-sheet-bar { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-project-page], .project-sheet-open [data-project-page] { transform: none; transition: none; }
  .project-sheet { transform: none; opacity: 0; transition: opacity 160ms ease; }
  .project-sheet.is-visible { transform: none; opacity: 1; }
  .project-sheet::backdrop { transition-duration: 160ms; }
  .project-sheet-close:active { transform: none; }
}