/* Targeted additions reuse the original typography, palette, and motion. */
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#inquiry-security { margin-bottom: 20px; max-width: 100%; }
#inquiry-submit:disabled { cursor: not-allowed; opacity: .6; transform: none; }
#inquiry-status { min-height: 24px; }
.contact-details { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.contact-details a { transition: color .2s ease; }
.contact-details a:hover { color: var(--ink); }
@media (max-width: 600px) { .contact-details { flex-direction: column; gap: 6px; } .contact-details a { display: inline-flex; align-items: center; min-height: 44px; } }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 20px; }
.project-kind { display: inline-block; color: var(--accent); font-size: 11px; margin-top: 12px; letter-spacing: .04em; }
.service-intro { max-width: 760px; margin-bottom: 36px; }
.service-intro p { color: var(--muted); font-size: 18px; line-height: 1.8; }
.service-intro .service-capabilities { font-size: 14px; margin-bottom: 24px; }
.engagements > summary { cursor: pointer; padding: 22px 0; font-size: 14px; color: var(--ink); }
.engagements .service { min-width: 0; }
.inquiry-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; margin: 0 0 64px; scroll-margin-top: 110px; }
.inquiry-intro h3 { font-size: 30px; font-weight: 400; letter-spacing: -.04em; margin: 0 0 20px; }
.inquiry-intro p { color: var(--muted); line-height: 1.8; font-size: 15px; max-width: 380px; }
.inquiry-intro #inquiry-help { font-size: 13px; margin: 24px 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-bottom: 28px; }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, #inquiry-result label { display: block; font-size: 13px; margin-bottom: 10px; }
.field label span { color: var(--muted); font-size: 11px; }
.field input, .field select, .field textarea, #inquiry-draft { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 5px; padding: 13px 14px; color: var(--ink); background: var(--panel); font: inherit; font-size: 14px; }
.field textarea, #inquiry-draft { resize: vertical; line-height: 1.7; }
.field input, .field select, .field textarea { scroll-margin-top: 110px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field :user-invalid { border-color: #e7ad9b; }
#inquiry-form button { cursor: pointer; font-family: inherit; }
.form-status, .draft-help { font-size: 13px; line-height: 1.8; color: var(--muted); }
#inquiry-result { padding: 24px 0; border-top: 1px solid var(--line); }
#inquiry-result[hidden] { display: none; }
#inquiry-draft { margin-bottom: 16px; }
.hero-bottom p, .project p, .service p { overflow-wrap: break-word; }
@media (max-width: 900px) { .inquiry-layout { grid-template-columns: 1fr; gap: 32px; } .inquiry-intro p { max-width: 600px; } }
@media (max-width: 600px) { .hero-cta { justify-content: start; } .form-grid { grid-template-columns: 1fr; gap: 20px; } .field input, .field select, .field textarea, #inquiry-draft { font-size: 16px; } .section-head { flex-wrap: wrap; } }

/* Keep complete desktop screenshots visible inside consistent portfolio frames. */
.project-visual {
  aspect-ratio: 1.6;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.project-visual:has(> img) {
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.4vw, 34px);
  background: radial-gradient(ellipse at top, #444434, #23271f);
}

.project-visual > img {
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 5px;
  box-shadow: 0 18px 40px #0005;
}

.project-visual:hover > img {
  transform: translateY(-3px);
}

.project-visual .arrow {
  z-index: 3;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
}

.poster {
  padding: 7%;
  gap: 12px;
  overflow: hidden;
}

.poster strong {
  font-size: clamp(28px, 3.5vw, 54px);
}

.poster small,
.poster strong,
.poster > p {
  position: relative;
  z-index: 2;
}

.poster > p {
  max-width: 65%;
  margin: 0;
}

.pickup {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: 16px;
}

.pickup > small {
  grid-column: 1 / -1;
  align-self: start;
}

.pickup .intake {
  width: 100%;
  min-width: 0;
  align-self: center;
  padding: clamp(10px, 1.4vw, 20px);
  transform: rotate(-4deg);
}

.intake small {
  font-size: 8px;
  letter-spacing: 0.08em;
}

.intake span {
  font-size: clamp(9px, 0.9vw, 12px);
  padding: 10px 0;
}

.intake b {
  font-size: 10px;
  padding: 10px;
}

.hvac .rings {
  z-index: 0;
  width: 210px;
  height: 210px;
  right: -80px;
  bottom: -65px;
  opacity: 0.65;
}

.systems > a {
  display: grid;
  place-items: center;
  padding: clamp(16px, 2.5vw, 36px);
  aspect-ratio: 1.6;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: radial-gradient(ellipse at top, #35392f, #1b1e19);
}

.systems > a > img {
  height: auto;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 5px;
  margin: 0;
  box-shadow: 0 18px 40px #0005;
}

@media (max-width: 600px) {
  .project-visual {
    aspect-ratio: 1.5;
  }

  .poster strong {
    font-size: clamp(26px, 7vw, 42px);
  }

  .poster small {
    font-size: 8px;
  }

  .poster > p {
    font-size: 11px;
  }

  .intake span {
    font-size: 9px;
    padding: 8px 0;
  }

  .intake b {
    font-size: 8px;
    padding: 8px;
  }
}