/* Focused alignment trial; the page sections and content order stay the same. */
.hero-context {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  display: grid;
  gap: 20px;
  max-width: 390px;
  padding-right: 22px;
  border-right: 1px solid var(--line);
  justify-items: end;
  text-align: right;
  min-width: 0;
}
.hero-context .hero-intro {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
}
.hero-context .hero-actions {
  grid-column: auto;
  grid-row: auto;
  gap: 8px;
  width: 100%;
  max-width: 250px;
  align-items: stretch;
  justify-self: end;
}
.hero-context .hero-actions .button { width: 100%; padding-inline: 18px; }
.page-contact .contact-layout { align-items: start; }
.page-contact .contact-guide { align-self: start; min-width: 0; }
.page-contact .contact-guide-intro { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.project-gallery > .project-gallery-photo { margin-bottom: 0; }
.project-photo-divider {
  height: 1px;
  margin: 30px 0;
  background: var(--fx-frame);
  opacity: .65;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
@media(min-width:901px) {
  .page-contact .contact-guide { margin-top: -44px; transform: translateY(var(--contact-action-shift, 0px)); }
  .page-contact .alt-brief h3 { margin: 10px 0 12px; }
  .page-contact .alt-brief > p { margin-bottom: 12px; }
  .page-contact .alt-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-block: 16px; row-gap: 16px; }
}
@media(max-width:900px) {
  .hero-context { grid-column: 1; grid-row: auto; margin-top: 24px; padding: 0; border: 0; max-width: 560px; }
  .hero-context .hero-actions { max-width: 520px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 12px; }
  .hero-context .hero-actions .button { min-height: 48px; gap: 12px; }
  .hero-context .hero-actions .button .arrow-icon { flex-shrink: 0; }
}
@media(max-width:600px) {
  .project-photo-divider { margin-block: 22px; }
  .hero-context { margin-top: 22px; gap: 18px; }
  .hero-context .hero-actions .button { font-size: 11px; padding-inline: 12px; gap: 8px; }
}