/* Case-study accents: brand-led, with the site layout kept intentionally neutral. */
.accent {
  color: var(--forest);
  font-weight: 800;
  letter-spacing: -.065em;
}

.brand-dumuc {
  font-family: Manrope, Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.06em;
}

.brand-dumuc span { color: var(--coral); }

.case-lalamove {
  background: #fff0e9;
  color: #7a2d0a;
  border: 1px solid #ffc7ad;
}

.case-base {
  background: #e4f0ff;
  color: #0057a8;
}

.case-topdev {
  background: #f6f5f2;
  color: #424242;
  border: 1px solid #d9d6d0;
}

.case-company {
  display: flex;
  align-items: center;
  height: 36px;
}

.case-company img {
  display: block;
  max-width: 158px;
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
}

/* The official Lalamove download includes generous clear space. */
.case-lalamove .case-company img {
  max-width: 148px;
  max-height: 42px;
  background: transparent;
  padding: 0;
}

.case-base .case-company img { max-width: 145px; max-height: 42px; }

/* This square asset is the older TopDev mark used during the case period. */
.case-topdev .case-company img {
  max-width: 74px;
  max-height: 74px;
  mix-blend-mode: multiply;
}

@media (min-width: 801px) {
  .case { grid-template-columns: 70px 165px 1fr 150px; }
  .case-company { height: 44px; }
}

.case-base .case-mark,
.case-topdev .case-mark { opacity: .12; }

.contact-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: start;
}

.contact-layout .contact-card h2 { max-width: 560px; }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  position: relative;
  z-index: 2;
}

.contact-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
}

.contact-form label span { font-weight: 500; opacity: .68; }
.contact-form label:nth-of-type(3),
.contact-form label:nth-of-type(4) { grid-column: 1 / -1; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(30, 73, 61, .35);
  border-radius: 3px;
  background: rgba(255, 255, 255, .35);
  color: var(--ink);
  padding: 11px 12px;
  font: 500 14px Manrope, Arial, sans-serif;
  outline: none;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(30, 73, 61, .12); }
.contact-form textarea::placeholder { color: rgba(21, 39, 32, .55); }
.contact-form .button { justify-self: start; border: 0; cursor: pointer; margin-top: 3px; }
.contact-form .button:disabled { cursor: wait; opacity: .7; }
.form-status { grid-column: 1 / -1; min-height: 22px; margin: 0; font-size: 12px; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }

@media (max-width: 800px) {
  .contact-layout { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 460px) {
  .contact-form { grid-template-columns: 1fr; }
  .contact-form label:nth-of-type(3),
  .contact-form label:nth-of-type(4) { grid-column: auto; }
}