:root {
  --menos-blue: #0b4d7e;
  --menos-blue-bright: #1f63ad;
  --menos-cyan: #08acd5;
  --menos-green: #96c934;
  --menos-lime: #d7e83d;
  --menos-paper: #f1f3f3;
  --menos-content: 90rem;
}

body.menos-project-page { background: #fff; }

.menos-project,
.menos-project *,
.menos-project *::before,
.menos-project *::after { box-sizing: border-box; }

.menos-project {
  width: 100%;
  margin: 0 auto;
  padding: clamp(5.5rem, 7vw, 7.5rem) 0 clamp(3.5rem, 6vw, 6rem);
  overflow-x: clip;
}

.menos-project figure { margin: 0; }

.menos-project__hero {
  position: relative;
  left: 50%;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(12rem, .55fr) minmax(24rem, 1.45fr);
  align-items: center;
  width: 100vw;
  min-height: clamp(37rem, 57vw, 67rem);
  margin-left: -50vw;
  padding: clamp(4rem, 8vw, 8rem) max(4vw, calc((100vw - 92rem) / 2));
  overflow: hidden;
  background-color: var(--menos-paper);
  background-image: linear-gradient(rgba(8,172,213,.58) 1px, transparent 1px), linear-gradient(90deg, rgba(8,172,213,.58) 1px, transparent 1px);
  background-size: clamp(3rem, 4.2vw, 5rem) clamp(3rem, 4.2vw, 5rem);
  border-radius: 0 0 clamp(2rem, 4vw, 4.5rem) clamp(2rem, 4vw, 4.5rem);
}

.menos-project__hero::before {
  content: "";
  position: absolute;
  inset: 7% 2.5% 5%;
  z-index: -2;
  border-radius: clamp(1.8rem, 4vw, 4rem);
  background: rgba(241,243,243,.72);
}

.menos-project__hero-paper {
  position: absolute;
  inset: auto 0 0 auto;
  z-index: -1;
  width: min(32vw, 37rem);
  height: min(24vw, 28rem);
  background: #fff;
  box-shadow: 0 18px 45px rgba(11,77,126,.12);
}

.menos-project__hero-paper span {
  position: absolute;
  left: 2.8rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--menos-paper);
  box-shadow: inset 0 2px 5px rgba(11,77,126,.12);
}
.menos-project__hero-paper span:nth-child(1) { top: 3rem; }
.menos-project__hero-paper span:nth-child(2) { top: 6.4rem; }
.menos-project__hero-paper span:nth-child(3) { top: 9.8rem; }

.menos-project__hero-logo {
  position: relative;
  z-index: 2;
  width: min(100%, 21rem);
  transform: rotate(-5deg);
  filter: drop-shadow(0 18px 28px rgba(11,77,126,.16));
}

.menos-project__hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(17% 2% 18% 2% round 1rem);
  transform: scale(1.25);
  object-fit: contain;
}

.menos-project__headline {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  width: min(100%, 53rem);
  max-width: none;
  margin: 0;
  color: var(--menos-blue);
  line-height: .82;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.menos-project__headline span { display: block; white-space: nowrap; }
.menos-project__headline-less { color: var(--menos-green); font-family: "PacificoLocal", cursive; font-size: clamp(4.5rem, 9vw, 10rem); font-weight: 400; transform: rotate(-2deg); }
.menos-project__headline-less em { color: var(--menos-cyan); font-family: "FigtreeHeroLocal", "Figtree", sans-serif; font-size: .38em; font-style: normal; font-weight: 600; letter-spacing: -.02em; }
.menos-project__headline-more { margin-top: -.05em; color: var(--menos-blue); font-family: "PacificoLocal", cursive; font-size: clamp(5.8rem, 12vw, 13rem); font-weight: 400; }
.menos-project__headline-more b { color: var(--menos-cyan); font-family: "FigtreeBoldLocal", "Figtree", sans-serif; font-weight: 700; }
.menos-project__headline-result { justify-self: center; margin-top: .18em; font-family: "PacificoLocal", cursive; font-size: clamp(2rem, 4.1vw, 4.8rem); font-weight: 400; letter-spacing: -.02em; }

.menos-project__route {
  position: absolute;
  top: 6%;
  right: 5%;
  width: 16rem;
  height: 12rem;
  border-top: .42rem dashed var(--menos-blue);
  border-right: .42rem dashed var(--menos-blue);
  border-radius: 0 8rem 0 0;
  transform: rotate(15deg);
}

.menos-project__story,
.menos-project__applications,
.menos-project__palette,
.menos-project__action,
.menos-project__closing {
  width: min(calc(100vw - 3rem), var(--menos-content));
  margin-inline: auto !important;
}

.menos-project__story {
  display: grid;
  grid-template-columns: minmax(24rem, .95fr) minmax(0, 1.05fr);
  align-items: stretch;
  height: clamp(25rem, 33vw, 31rem);
  margin-top: clamp(1rem, 2vw, 2rem) !important;
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 3rem);
  background-color: var(--menos-paper);
  background-image: linear-gradient(rgba(8,172,213,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(8,172,213,.35) 1px, transparent 1px);
  background-size: 3.4rem 3.4rem;
}

.menos-project__story-copy {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(.9rem, 1.4vw, 1.35rem);
  min-height: 0;
  margin: clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2.2rem, 3vw, 3.25rem) clamp(2rem, 3.5vw, 3.8rem);
  background: #fff;
  box-shadow: 0 20px 45px rgba(11,77,126,.13);
}

.menos-project__story-copy::after {
  content: "";
  position: absolute;
  right: -1.2rem;
  bottom: -1.2rem;
  width: 70%;
  height: 1.6rem;
  background: #111;
  filter: blur(5px);
  opacity: .22;
  transform: skewX(18deg);
}

.menos-project__binding {
  position: absolute;
  top: -1.3rem;
  left: 8%;
  right: 8%;
  height: 1.7rem;
  background: repeating-linear-gradient(90deg, transparent 0 1.5rem, #101010 1.5rem 2rem, transparent 2rem 3.2rem);
}

.menos-project__story-copy h2 {
  max-width: none;
  margin: 0;
  color: var(--menos-blue);
  font-size: clamp(2.2rem, 3.35vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.menos-project__story-copy p {
  max-width: 34rem;
  margin: 0;
  color: var(--menos-blue);
  font-size: clamp(.9rem, 1.08vw, 1.08rem);
  line-height: 1.42;
}

.menos-project__story-media { min-width: 0; min-height: 100%; }
.menos-project__story-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; }

.menos-project__applications,
.menos-project__action {
  margin-top: clamp(1rem, 2vw, 2rem) !important;
  overflow: hidden;
  border-radius: clamp(1.2rem, 2.2vw, 2.2rem);
  background: #eee;
}

.menos-project__applications img,
.menos-project__action img,
.menos-project__closing img { display: block; width: 100%; height: auto; }

.menos-project__palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: clamp(1.4rem, 2.2vw, 2.4rem);
  margin-top: clamp(1.2rem, 2vw, 2rem) !important;
  overflow: hidden;
  border-radius: 999px;
}
.menos-project__swatch--blue { background: var(--menos-blue-bright); }
.menos-project__swatch--green { background: var(--menos-green); }
.menos-project__swatch--lime { background: var(--menos-lime); }
.menos-project__swatch--cyan { background: var(--menos-cyan); }
.menos-project__swatch--paper { background: #d8d9da; }

.menos-project__closing {
  display: grid;
  grid-template-columns: minmax(13rem, .65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem) 1rem;
}

.menos-project__closing-logo { display: grid; place-items: center; }
.menos-project__closing-logo img { width: min(100%, 19rem); clip-path: inset(16% 2% 17% 2% round 1rem); transform: scale(1.25); object-fit: contain; }
.menos-project__closing-cta { display: block; width: min(100%, 48rem); justify-self: end; text-decoration: none; transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.menos-project__closing-cta:hover,
.menos-project__closing-cta:focus-visible { transform: translateY(-.35rem); }
.menos-project__closing-cta:focus-visible { outline: .2rem solid var(--menos-cyan); outline-offset: .4rem; }

@media (max-width: 900px) {
  .menos-project__hero { grid-template-columns: 1fr; justify-items: center; gap: 1rem; min-height: 48rem; padding-inline: 1.5rem; text-align: center; }
  .menos-project__hero-logo { width: min(52vw, 17rem); }
  .menos-project__headline { justify-items: center; width: 100%; }
  .menos-project__headline span { white-space: normal; }
  .menos-project__headline-result { justify-self: center; }
  .menos-project__story { grid-template-columns: 1fr; }
  .menos-project__story { height: auto; }
  .menos-project__story-copy { min-height: auto; }
  .menos-project__story-copy h2 { white-space: normal; }
  .menos-project__story-media img { height: auto; min-height: 0; aspect-ratio: 1400 / 906; object-fit: cover; }
  .menos-project__closing { grid-template-columns: 1fr; }
  .menos-project__closing-cta { justify-self: center; }
}

@media (max-width: 640px) {
  .menos-project { padding-top: 4.8rem; }
  .menos-project__hero {
    left: auto;
    width: 100%;
    max-width: 100%;
    min-height: 40rem;
    margin-left: 0;
    padding: 4rem 1rem;
    overflow: hidden;
    border-radius: 0 0 2rem 2rem;
  }
  .menos-project__hero-logo {
    width: min(72vw, 17rem);
    max-width: 100%;
    aspect-ratio: 1086 / 609;
    overflow: hidden;
    border-radius: 1rem;
  }
  .menos-project__hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .menos-project__headline,
  .menos-project__headline span {
    max-width: 100%;
    min-width: 0;
  }
  .menos-project__headline-less { font-size: clamp(3.4rem, 19vw, 5rem); }
  .menos-project__headline-more { font-size: clamp(4.4rem, 25vw, 6.3rem); }
  .menos-project__headline-result { font-size: clamp(1.8rem, 10vw, 2.8rem); }
  .menos-project__route { width: 8rem; height: 7rem; opacity: .45; }
  .menos-project__story,
  .menos-project__applications,
  .menos-project__palette,
  .menos-project__action,
  .menos-project__closing { width: min(calc(100vw - 1.2rem), var(--menos-content)); }
  .menos-project__story {
    max-width: calc(100% - 1.2rem);
    min-width: 0;
  }
  .menos-project__story > * {
    min-width: 0;
  }
  .menos-project__story-copy {
    width: auto;
    max-width: calc(100% - 2.8rem);
    margin: 1.4rem;
    padding: 3rem 1.4rem 2.5rem;
  }
  .menos-project__story-copy h2,
  .menos-project__story-copy p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .menos-project__story-copy h2 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .menos-project__story-media img { min-height: 0; }
  .menos-project__palette { grid-template-columns: repeat(5, 1fr); height: 1.4rem; }
  .menos-project__closing { gap: 1rem; padding-top: 3.5rem; }
  .menos-project__closing-logo img { width: min(70vw, 16rem); }
}

@media (prefers-reduced-motion: reduce) {
  .menos-project__closing-cta { transition: none; }
}