.projectDetail--melanq {
  --melanq-accent: #a5e2f6;
  --melanq-accent-glow: rgba(165, 226, 246, 0.18);
  --melanq-text: var(--melanq-accent);
  --melanq-text-dim: rgba(165, 226, 246, 0.82);
}

.projectDetail--melanq .projectDetailBody {
  border: 1px solid var(--melanq-accent);
  border-radius: var(--radius);
}

.melanqHeading {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--melanq-accent);
}

.melanqHeading--center {
  text-align: center;
  text-transform: uppercase;
}

.melanqEmpathyLabel {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--melanq-text);
}

.melanqText {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.65;
  color: var(--melanq-text);
}

.melanqText p {
  margin: 0 0 0.85em;
}

.melanqText p:last-child {
  margin-bottom: 0;
}

.melanqText--quote {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: left;
}

.melanqText--intro {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.5;
}

.melanqText--intro strong {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
}

.melanqText ul,
.melanqText ol {
  margin: 0 0 0.85em;
  padding-left: 1.4em;
}

.melanqText li {
  margin-bottom: 0.35em;
}

.melanqText li:last-child {
  margin-bottom: 0;
}

.melanqText strong {
  font-weight: 700;
}

.melanqDivider {
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--melanq-accent) 12%,
    var(--melanq-accent) 88%,
    transparent 100%
  );
  opacity: 0.55;
  box-shadow: 0 0 var(--glow-blur-divider) var(--melanq-accent-glow);
}

.melanqBlock {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.melanqHero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space);
  align-items: stretch;
}

.melanqHero__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: var(--space);
  border: 1px solid var(--melanq-accent);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75) inset;
}

.melanqHero__overview {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  min-width: 0;
}

.melanqOverviewCard {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  padding: var(--space);
  border: 1px solid var(--melanq-accent);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75) inset;
}

.melanqOverviewCard__title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--melanq-accent);
}

.melanqOverviewTable {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.melanqOverviewTable__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space);
  align-items: center;
  padding: 6px 0;
}

.melanqOverviewTable__label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--melanq-accent);
}

.melanqOverviewTable__value {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: right;
  color: var(--melanq-text);
}

.melanqOverviewTable__divider {
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--melanq-accent) 12%,
    var(--melanq-accent) 88%,
    transparent 100%
  );
  opacity: 0.55;
}

.melanqResultBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid var(--melanq-accent);
  border-radius: var(--radius);
  background: var(--melanq-accent);
  color: #000;
  font-family: var(--font-mono, var(--font));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.melanqResultBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 var(--glow-blur-panel) var(--melanq-accent-glow);
}

.melanqMediaRow {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space);
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.melanqSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 50px);
  align-items: center;
  width: 100%;
  min-width: 0;
}

.melanqSplit__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  min-width: 0;
}

.melanqSplit__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.melanqProfileBlock {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.projectDetail--melanq .projectMediaPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px dashed rgba(165, 226, 246, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  color: rgba(165, 226, 246, 0.45);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  text-transform: lowercase;
  word-break: break-word;
}

.projectDetail--melanq .projectMediaPlaceholder:not(.is-loaded):not(.is-missing) {
  min-height: 80px;
}

.projectDetail--melanq .projectMediaPlaceholder--cover {
  aspect-ratio: 625 / 493;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableLogo {
  flex: 0 0 auto;
  width: 360px;
  max-width: none;
  aspect-ratio: 431 / 243;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableWeb,
.projectDetail--melanq .projectMediaPlaceholder--deliverableSocial {
  flex: 0 0 auto;
  width: 268px;
  max-width: none;
  aspect-ratio: 322 / 242;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableBag {
  flex: 0 0 auto;
  width: 145px;
  max-width: none;
  aspect-ratio: 175 / 244;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableHoodie {
  flex: 0 0 auto;
  width: 159px;
  max-width: none;
  aspect-ratio: 192 / 242;
}

.projectDetail--melanq .projectMediaPlaceholder--context {
  width: min(100%, 363px);
  aspect-ratio: 1 / 1;
}

.projectDetail--melanq .projectMediaPlaceholder--clientResearch {
  width: 100%;
  aspect-ratio: 3840 / 3179;
}

.projectDetail--melanq .projectMediaPlaceholder--mindmap {
  aspect-ratio: 1920 / 1080;
}

.projectDetail--melanq .projectMediaPlaceholder--logoConcept {
  width: min(100%, 599px);
  aspect-ratio: 599 / 231;
}

.projectDetail--melanq .projectMediaPlaceholder--logoLarge {
  aspect-ratio: 1280 / 720;
}

.projectDetail--melanq .projectMediaPlaceholder--packagingSide {
  width: 100%;
  min-height: 220px;
  aspect-ratio: 625 / 493;
}

.melanqHero__cover:has(.projectMediaPlaceholder.is-loaded) {
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: var(--space);
}

.melanqHero__cover .projectMediaPlaceholder.is-loaded {
  border: none;
  box-shadow: none;
  background: transparent;
  width: 100%;
  max-width: 625px;
  margin: 0 auto;
}

.melanqHero__cover .projectMediaPlaceholder.is-loaded img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.projectDetail--melanq .projectMediaPlaceholder.is-loaded {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  border-style: solid;
  overflow: hidden;
  color: transparent;
}

.projectDetail--melanq .projectMediaPlaceholder.is-loaded[class*="projectMediaPlaceholder--"] {
  aspect-ratio: auto;
  height: auto;
}

.projectDetail--melanq .projectMediaPlaceholder.is-missing,
.projectDetail--melanq .projectMediaPlaceholder.is-unresolved {
  min-height: 80px;
}

.projectDetail--melanq .projectMediaPlaceholder.is-unresolved {
  border-style: dashed;
}

.projectDetail--melanq .projectMediaPlaceholder img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableLogo.is-loaded,
.projectDetail--melanq .projectMediaPlaceholder--deliverableWeb.is-loaded,
.projectDetail--melanq .projectMediaPlaceholder--deliverableSocial.is-loaded,
.projectDetail--melanq .projectMediaPlaceholder--deliverableBag.is-loaded,
.projectDetail--melanq .projectMediaPlaceholder--deliverableHoodie.is-loaded {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableLogo.is-loaded {
  width: 360px;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableWeb.is-loaded,
.projectDetail--melanq .projectMediaPlaceholder--deliverableSocial.is-loaded {
  width: 268px;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableBag.is-loaded {
  width: 145px;
}

.projectDetail--melanq .projectMediaPlaceholder--deliverableHoodie.is-loaded {
  width: 159px;
}

.projectDetail--melanq .projectMediaPlaceholder--context.is-loaded {
  width: min(100%, 363px);
}

.projectDetail--melanq .projectMediaPlaceholder--logoConcept.is-loaded {
  width: min(100%, 599px);
}

.projectDetail--melanq .projectMediaPlaceholder--packagingSide.is-loaded {
  width: 100%;
}

.projectDetail--melanq.is-resultView {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

.projectDetail--melanq #projectMelanqResult {
  display: none;
}

.projectDetail--melanq.is-resultView #projectMelanqDetail {
  display: none;
}

.projectDetail--melanq.is-resultView #projectMelanqResult {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.melanqResultView {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  padding: var(--space);
  box-sizing: border-box;
}

.melanqResultBody {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--melanq-accent);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75) inset;
  overflow: hidden;
}

.melanqResultFrame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
  background: #fff;
}

.melanqResultScroll {
  position: absolute;
  inset: 0;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.melanqResultScroll__status {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space);
  background: #fff;
  color: rgba(0, 0, 0, 0.55);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: lowercase;
  pointer-events: none;
}

.melanqResultPage {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.melanqResultBody.is-mobilePdf .melanqResultFrame {
  display: none;
}

.melanqResultBody.is-mobilePdf .melanqResultScroll {
  display: block;
}

.melanqResultBody.is-loadingPdf .melanqResultScroll {
  overflow: hidden;
}

.melanqResultBody:not(.is-fallback) .melanqResultFallback {
  display: none;
}

.melanqResultBody.is-fallback .melanqResultFrame,
.melanqResultBody.is-fallback .melanqResultScroll {
  display: none;
}

.melanqResultFallback {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--space);
  text-align: center;
}

.melanqResultFallbackLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid var(--melanq-accent);
  border-radius: var(--radius);
  background: var(--melanq-accent);
  color: #000;
  font-family: var(--font-mono, var(--font));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
}

.melanqResultFallbackLink:hover {
  box-shadow: 0 0 var(--glow-blur-panel) var(--melanq-accent-glow);
}

@media (max-width: 1023px) {
  .melanqHero,
  .melanqSplit {
    grid-template-columns: 1fr;
  }

  .melanqSplit__media {
    width: 100%;
  }

  .projectDetail--melanq .projectMediaPlaceholder--context,
  .projectDetail--melanq .projectMediaPlaceholder--logoConcept {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .projectDetail--melanq .projectDetailBody {
    gap: 10px;
    padding: 10px;
  }

  .melanqResultView {
    padding: 10px;
  }

  .projectDetail--melanq.projectDetailScroll.is-resultView {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .projectDetail--melanq.is-resultView .aboutStickyBar {
    flex: 0 0 auto;
  }

  .projectDetail--melanq.is-resultView #projectMelanqResult {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 0;
  }

  .projectDetail--melanq.is-resultView .melanqResultView {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 10px;
  }

  .projectDetail--melanq.is-resultView .melanqResultBody {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
  }

  .melanqBlock,
  .melanqSplit,
  .melanqSplit__copy,
  .melanqHero__overview,
  .melanqProfileBlock {
    gap: 10px;
  }

  .melanqHero {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .melanqHero__cover {
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .melanqHero__cover:has(.projectMediaPlaceholder.is-loaded) {
    min-height: 0;
    padding: 0;
  }

  .melanqHero__cover .projectMediaPlaceholder--cover {
    aspect-ratio: 913 / 720;
  }

  .melanqHero__cover .projectMediaPlaceholder.is-loaded {
    width: 100%;
    max-width: none;
  }

  .melanqHero__cover .projectMediaPlaceholder.is-loaded img {
    object-fit: cover;
  }

  .melanqHero__overview {
    gap: 6px;
  }

  .melanqOverviewCard {
    gap: 5px;
    padding: 10px;
  }

  .melanqOverviewCard__title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.2em;
  }

  .melanqOverviewTable__row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    padding: 0;
  }

  .melanqOverviewTable__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: capitalize;
    white-space: nowrap;
  }

  .melanqOverviewTable__value {
    font-size: 10px;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .melanqResultBtn {
    min-height: 38px;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: 0.2em;
  }

  .melanqHeading,
  .melanqHeading--center {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .melanqEmpathyLabel {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .melanqText,
  .melanqText ul,
  .melanqText ol,
  .melanqText li {
    font-size: 14px;
    letter-spacing: -0.02em;
    line-height: 1.65;
  }

  .melanqText--quote {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .melanqText--intro,
  .melanqText--intro strong {
    font-size: 14px;
    letter-spacing: -0.02em;
    line-height: 1.65;
  }

  .melanqText--intro strong {
    font-weight: 700;
  }

  .melanqSplit {
    display: flex;
    flex-direction: column;
  }

  .melanqSplit__media {
    width: 100%;
  }

  .melanqMediaRow {
    gap: 11px;
    --melanq-deliverable-h: 106px;
  }

  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableLogo,
  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableLogo.is-loaded {
    width: 188px;
    height: var(--melanq-deliverable-h);
    aspect-ratio: auto;
  }

  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableWeb,
  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableWeb.is-loaded,
  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableSocial,
  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableSocial.is-loaded {
    width: 140px;
    height: var(--melanq-deliverable-h);
    aspect-ratio: auto;
  }

  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableBag,
  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableBag.is-loaded {
    width: 76px;
    height: var(--melanq-deliverable-h);
    aspect-ratio: auto;
  }

  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableHoodie,
  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder--deliverableHoodie.is-loaded {
    width: 83px;
    height: var(--melanq-deliverable-h);
    aspect-ratio: auto;
  }

  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder.is-loaded {
    overflow: hidden;
  }

  .projectDetail--melanq .melanqMediaRow .projectMediaPlaceholder.is-loaded img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .projectDetail--melanq .projectMediaPlaceholder--context,
  .projectDetail--melanq .projectMediaPlaceholder--context.is-loaded {
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
  }

  .projectDetail--melanq .projectMediaPlaceholder--clientResearch,
  .projectDetail--melanq .projectMediaPlaceholder--clientResearch.is-loaded {
    width: 100%;
    aspect-ratio: 3840 / 3179;
  }

  .projectDetail--melanq .projectMediaPlaceholder--mindmap,
  .projectDetail--melanq .projectMediaPlaceholder--mindmap.is-loaded {
    width: 100%;
    aspect-ratio: 1920 / 1080;
  }

  .projectDetail--melanq .projectMediaPlaceholder--logoConcept,
  .projectDetail--melanq .projectMediaPlaceholder--logoConcept.is-loaded {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 599 / 231;
    overflow: hidden;
  }

  .projectDetail--melanq .projectMediaPlaceholder--logoConcept.is-loaded img {
    object-fit: contain;
  }

  .projectDetail--melanq .projectMediaPlaceholder--logoLarge,
  .projectDetail--melanq .projectMediaPlaceholder--logoLarge.is-loaded {
    width: 100%;
    max-width: none;
    aspect-ratio: 1280 / 720;
  }

  .projectDetail--melanq .projectMediaPlaceholder--packagingSide,
  .projectDetail--melanq .projectMediaPlaceholder--packagingSide.is-loaded {
    width: 100%;
    height: 176px;
    min-height: 176px;
    aspect-ratio: auto;
  }

  .projectDetail--melanq .projectMediaPlaceholder--packagingSide.is-loaded img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .projectDetail--melanq .projectMediaPlaceholder--context.is-loaded img,
  .projectDetail--melanq .projectMediaPlaceholder--clientResearch.is-loaded img,
  .projectDetail--melanq .projectMediaPlaceholder--mindmap.is-loaded img,
  .projectDetail--melanq .projectMediaPlaceholder--logoLarge.is-loaded img {
    object-fit: cover;
  }
}