/* 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; }
/* The panel itself takes focus on open (project-sheet.js); it is not a control. */
.project-sheet:focus { outline: none; }
.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;
  /* As much room under Close as above it: scrolled content stops short of
     the button instead of running into it (Alexa, 31.10.2026). */
  padding: 12px max(16px, var(--g, 24px));
}
.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, box-shadow 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) {
  /* The outline belongs to focus, so the keyline of the fill is two inset
     shadows: the gap in the fill colour, then the line (Alexa, 26.10.2026). */
  .project-sheet-close:hover {
    background: #36363a;
    box-shadow: inset 0 0 0 var(--btn-keyline-gap, 2px) #36363a,
                inset 0 0 0 calc(var(--btn-keyline-gap, 2px) + var(--btn-keyline-w, 1px)) #eeeef0;
  }
}
.project-sheet-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  /* The panel scrolls like an app screen, without a scrollbar (Alexa, 31.10.2026). */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.project-sheet-scroll::-webkit-scrollbar { display: none; }
.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);
}
/* Service forms share the contact section's columns, light card, brief rows,
   controls and channels at every width. More fields add height to that card. */
.offer-project-form { min-width: 0; margin-bottom: 0; }
.offer-project .ltk-intro { container: offer-project-intro / inline-size; }
.offer-project .ltk-intro .ltk-channels {
  --ltk-ch-icon: 40px;
  --ltk-icon-bg: #242427;
  --ltk-channel-fill: #36363a;
  grid-template-columns: auto minmax(16px, 24px) auto minmax(16px, 24px) auto;
  justify-content: start;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}
.offer-project .ltk-intro .ltk-channel { gap: 10px; color: var(--ltk-ink); }
.offer-project .ltk-intro .ltk-channel-icon { color: var(--ltk-ink); }
.offer-project .ltk-intro .ltk-channel-address { color: var(--ltk-ink-mute); }
.offer-project .ltk-intro .ltk-sep { background: var(--ltk-line); }
.offer-project .ltk-intro .ltk-channel[data-state="soon"] { opacity: .55; }
.offer-project .ltk-intro .ltk-channel[href]:focus-visible { outline-color: var(--ltk-focus-dark); }
.offer-project .ltk-intro:not(:has(.ltk-briefs)) .ltk-channels { margin-top: auto; padding-top: 24px; }
@container offer-project-intro (max-width: 560px) {
  .offer-project .ltk-intro .ltk-channels {
    grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
    justify-content: stretch;
  }
  .offer-project .ltk-intro .ltk-channels > li { justify-content: center; }
  .offer-project .ltk-intro .ltk-channel { flex-direction: column; gap: 8px; text-align: center; }
  .offer-project .ltk-intro .ltk-channel-text { align-items: center; white-space: normal; }
}
.offer-project-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ltk-field-gap);
}
.offer-project-field { min-width: 0; }
.offer-project-field--wide { grid-column: 1 / -1; }
.offer-project-field .ltk-field-icon {
  top: calc(var(--ltk-field-h) / 2);
  left: calc(var(--ltk-field-pad) + var(--ltk-field-icon) * .15);
  width: calc(var(--ltk-field-icon) * .7);
  height: calc(var(--ltk-field-icon) * .7);
  stroke-width: max(1px, calc(var(--ltk-stroke) * .7));
}
.offer-project-field textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--ltk-field-h) * 1.6);
  margin: 0;
  padding: clamp(16px, var(--ltk-field-pad), 24px) var(--ltk-field-pad);
  border: 1px solid rgba(23, 23, 25, .08);
  border-radius: var(--ltk-radius-s);
  background: var(--silver-field, #e8e8eb);
  color: #171719;
  caret-color: var(--ltk-focus-light);
  font: 400 var(--ltk-field-font) / 1.45 Inter, system-ui, sans-serif;
  resize: vertical;
}
.offer-project-field textarea::placeholder { color: var(--silver-on-light, #6c6c73); opacity: 1; }
/* One interaction model for both the short contact form and service forms.
   Keep the surface steady; focus and validation only change its edge. */
.project-sheet .ltk .ltk-field :is(input, textarea) {
  --field-surface: var(--silver-field, #e8e8eb);
  --field-edge: transparent;
  background: var(--field-surface);
  border-width: 1px;
  border-color: rgba(23, 23, 25, .08);
  box-shadow: none;
  outline: none;
  caret-color: #41434a;
  transition: border-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .project-sheet .ltk .ltk-field :is(input, textarea):hover:where(:not(:disabled)) {
    border-color: #a5a7ac;
  }
}
.project-sheet .ltk .ltk-field :is(input, textarea):focus {
  --field-edge: #787b80;
  background: var(--field-surface);
  border-color: var(--field-edge);
}
.project-sheet .ltk .ltk-field :is(input, textarea)[aria-invalid="true"] {
  --field-edge: #a52a25;
  border-width: 1px;
  border-color: var(--field-edge);
}
.project-sheet .ltk .ltk-field :is(input, textarea):disabled {
  cursor: not-allowed;
  opacity: .6;
}
.project-sheet .ltk .ltk-field input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: #171719;
  box-shadow: inset 0 0 0 1000px var(--field-surface);
}
@media (forced-colors: active) {
  .project-sheet .ltk .ltk-field :is(input, textarea):focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-sheet .ltk .ltk-field :is(input, textarea) { transition: none; }
}
.offer-project-error { margin: 8px 0 0; color: #a52a25; font-size: 13px; line-height: 1.4; }
.offer-project-error[hidden] { display: none; }
.offer-project-note { margin: 0; color: #62636a; font-size: 14px; line-height: 1.4; }
.offer-project-status { margin: 0; }
.offer-project-status:empty { display: none; }
/* The service section takes all space above the real footer. Its card and
   form grow together; extra height belongs to the message field, while
   padding and controls keep a comfortable scale for the window height. */
@media (min-width: 1025px) {
  .project-sheet .offer-project {
    --ltk-pad: clamp(28px, calc(8dvh - 32px), 76px);
    --ltk-title: clamp(40px, 4.5dvh, 60px);
    --ltk-card-title: var(--ltk-title);
    --ltk-card-title-gap: clamp(12px, 1.5dvh, 20px);
    --ltk-card-sub-gap: clamp(8px, 1dvh, 14px);
    --ltk-form-gap: clamp(20px, calc(5dvh - 20px), 48px);
    --ltk-field-h: clamp(48px, calc(8dvh - 16px), 88px);
    --ltk-field-gap: clamp(10px, calc(2dvh - 6px), 20px);
    --ltk-send-h: clamp(48px, calc(7dvh - 8px), 72px);
    --ltk-send-gap: 0;
    --ltk-ch-gap: 14px;
    --ltk-ch-top: 12px;
    --ltk-ch-icon: 40px;
    --ltk-radius-s: 12px;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    padding-bottom: 24px;
  }
  .project-sheet .offer-project > .ltk-grid { flex: 1 0 auto; }
  .project-sheet.is-offer .project-sheet-tail { margin-top: 0; }
  .offer-project .ltk-card { display: flex; flex-direction: column; }
  .offer-project .ltk-card-body { flex: 1 0 auto; height: auto; }
  .offer-project .offer-project-form {
    flex: 1 0 auto;
    grid-template-rows: minmax(min-content, 1fr) auto auto;
    margin-bottom: 0;
  }
  .offer-project-fields { grid-template-rows: repeat(3, auto) minmax(min-content, 1fr); }
  .offer-project-field:has(textarea) { display: flex; flex-direction: column; }
  .offer-project-field:has(#offer-name, #offer-business) { grid-column: auto; }
  .offer-project-field textarea {
    flex: 1 0 auto;
    height: 80px;
    min-height: 80px;
  }
}
@media (min-width: 1025px) and (max-height: 1080px) {
  .project-sheet.is-offer .ftr-legal { padding-top: clamp(0px, calc(6.667dvh - 60px), 12px); }
  .project-sheet.is-offer .ftr {
    margin-top: clamp(8px, calc(8.889dvh - 72px), 24px);
    margin-bottom: clamp(12px, calc(6.667dvh - 48px), 24px);
  }
  .project-sheet.is-offer .ftr-inner { height: clamp(64px, calc(31.111dvh - 216px), 120px); }
  .project-sheet.is-offer .ftr-lockup {
    width: clamp(240px, calc(40dvh - 120px), 312px);
    height: auto;
    bottom: 0;
  }
}
@media (max-width: 620px) {
  .offer-project-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 721px) and (max-width: 1024px) {
  /* Keep the contact card full width in the sheet, even when its own
     container query would lay the heading and fields side by side. */
  .project-sheet .ltk-card-body { display: flex; flex-direction: column; height: auto; }
  .project-sheet .ltk-card-head { grid-column: auto; grid-row: auto; }
  .project-sheet .ltk-form {
    grid-column: auto;
    grid-row: auto;
    grid-template-rows: none;
    margin: var(--ltk-form-gap) 0 var(--ltk-ch-gap);
  }
  .project-sheet .ltk-send { align-self: stretch; }
  .project-sheet .ltk-channels {
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
    margin: 0;
    padding-top: var(--ltk-ch-top);
  }
  .project-sheet .ltk-channel { flex-direction: row; gap: calc(14 * var(--ltk-u)); text-align: left; }
  .project-sheet .ltk-channel-text { align-items: flex-start; }
}
@media (max-width: 1024px) {
  /* The contact card comes before the questions in the scrollable panel. */
  .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-block: 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; }
}