.nav-links { gap: 24px; font-size: .84rem; }

.collagen {
  max-width: 1200px;
  margin: 0 auto 120px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: .34fr .66fr;
}

.collagen-label {
  background: var(--ink);
  color: #fff;
  padding: 48px 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 650px;
}

.collagen-label span {
  font: 500 .72rem "Manrope";
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
}

.collagen-label strong {
  font: 600 clamp(4.5rem, 9vw, 8.2rem)/.8 "Manrope";
  letter-spacing: -.08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
}

.collagen-label small { color: #b9b0c4; }
.collagen-copy { background: #e8e4dc; padding: 70px 62px; }

.collagen-copy h2 {
  font: 500 clamp(2.8rem, 5vw, 5rem)/.98 "Manrope", sans-serif;
  letter-spacing: -.06em;
  margin: 0;
}

.collagen-copy h2 em { font-style: normal; color: #7560b6; }
.collagen-lede { font-size: 1.15rem; color: #554e59; max-width: 720px; margin: 28px 0 42px; }
.collagen-details { border-top: 1px solid var(--ink); }

.collagen-details div {
  display: grid;
  grid-template-columns: .34fr .66fr;
  gap: 24px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(28,18,48,.25);
}

.collagen-details strong { font: 600 .85rem "Manrope"; }
.collagen-details span { font-size: .84rem; color: #655e68; }
.portfolio-note { margin: 35px 0 28px; padding-left: 18px; border-left: 3px solid #7560b6; }
.portfolio-note strong { font: 600 .75rem "Manrope"; text-transform: uppercase; letter-spacing: .1em; }
.portfolio-note p { font-size: .82rem; color: #655e68; margin: 6px 0; }
.collagen-button { margin-top: 8px; }

@media (max-width: 850px) {
  .collagen { grid-template-columns: 1fr; }
  .collagen-label { min-height: auto; display: grid; grid-template-columns: 1fr auto; gap: 20px; }
  .collagen-label strong { writing-mode: initial; transform: none; align-self: auto; grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .collagen { padding: 0 20px; margin-bottom: 80px; }
  .collagen-label, .collagen-copy { padding: 34px 26px; }
  .collagen-details div { grid-template-columns: 1fr; gap: 4px; }
}

.form-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-note.success{color:var(--lime)}.form-note.error{color:#ff9c9c}.contact button:disabled{cursor:wait;opacity:.7;transform:none}