/* ============================================================
   MISFITS — STUDIOS page (Figma node 11:1269)
   Extends css/style.css
   ============================================================ */

/* ---- Mission (studios variant) ---- */
.mission--studios {
  padding: clamp(64px, 7.5vw, 144px) 0;
}
.mission--studios .mission__inner {
  gap: 12px;
  padding: 0 clamp(24px, 12.2vw, 235px);
}
.mission__title--xl {
  font-size: clamp(16px, 6.35vw, 121.9px);
  line-height: 1.197;
  letter-spacing: -0.02em;
  white-space: nowrap; /* "SELLING THEM IS HARDER." must never wrap */
}
@media (min-width: 1101px) {
  .mission--studios .mission__title { font-size: clamp(26px, 6.35vw, 121.9px); }
}
.mission__title--highlight .reg { font-weight: 400; }
/* 4 px breathing room between "MAKING GAMES IS HARD." and the yellow box */
.mission--studios .mission__title--highlight {
  margin-top: 4px;
}
.mission__sub--studios {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.59vw, 30.5px);
  line-height: normal;
  color: #fff;
}
.xmarks-row {
  display: flex;
  gap: clamp(8px, 0.73vw, 14px);
  justify-content: flex-end;
  width: 100%;
  padding-top: 8px;
}
.xmarks-row img {
  width: clamp(28px, 2.86vw, 55px);
  height: auto;
  transform: rotate(-6.77deg);
}

/* ---- Who we are ---- */
.whoweare {
  position: relative;
}
.whoweare__strip {
  height: 15px;
  background: var(--yellow);
  margin-bottom: 31px;
}
.whoweare__band {
  position: relative;
  background: var(--yellow);
  padding: clamp(60px, 6.25vw, 120px) 24px clamp(24px, 3vw, 48px);
}
.whoweare__swirls {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sw {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw img { width: 100%; height: auto; }
.sw-r1 { left: 69.2%; top: -6.61vw; width: min(57vw, 1095px); }
.sw-r1 img { transform: rotate(-170.22deg); }
.sw-r2 { left: 77.3%; top: 1.77vw; width: min(37.9vw, 727px); }
.sw-r2 img { transform: rotate(-65.22deg); }
.sw-r3 { left: 90.4%; top: 13vw; width: min(14.6vw, 279px); }
.sw-r3 img { transform: rotate(-5.22deg); }
.sw-l1 { left: -20.2%; top: -4.84vw; width: min(52.1vw, 1000px); }
.sw-l1 img { transform: rotate(-79.44deg) scaleY(-1); }
.sw-l2 { left: -8.5%; top: 5.83vw; width: min(27.9vw, 537px); }
.sw-l2 img { transform: rotate(175.56deg) scaleY(-1); }
.sw-l3 { left: -3.5%; top: 12.65vw; width: min(16.2vw, 311px); }
.sw-l3 img { transform: rotate(115.56deg) scaleY(-1); }
.whoweare__content {
  position: relative;
  z-index: 1;
  max-width: 1045px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
  text-align: center;
}
/* keep the text column proportional to the vw-sized swirls (1045/1920) */
@media (min-width: 1101px) {
  .whoweare__content { max-width: 54.4vw; }
}
.whoweare__kicker {
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 13.35px;
  letter-spacing: 1.36px;
  text-transform: uppercase;
  color: var(--purple-square);
}
.whoweare__star {
  width: clamp(110px, 11.2vw, 214px);
  height: auto;
  aspect-ratio: 214.312 / 225.405;
  overflow: visible;
}
.whoweare__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.36vw, 103px);
  line-height: 1.017;
  letter-spacing: -0.0225em;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
}
.whoweare__title span { color: var(--purple); }
.whoweare__text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: normal;
  color: #000;
  max-width: 900px;
}
.whoweare__xstrip {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -2.24vw; /* -43px at 1920 — overlaps band bottom edge like the design */
  position: relative;
}

/* ---- Pillars ----
   Design: cards start 88px below the band content and overlap the
   lower 201px of the x-strip — the translucent card background lets
   the X pattern show through behind the cards. */
.pillars {
  position: relative;
  z-index: 1;
  margin-top: clamp(-202px, -10.5vw, -60px);
  padding: 0 0 clamp(48px, 4vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4vw, 77px);
}
.pillars__row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.pillars__line {
  height: 3px;
  background: var(--yellow);
  flex: 1 1 0;
  max-width: 366px;
}
.pillars__cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 16px;
}
.pillar {
  width: 288px;
  min-height: 350px;
  /* frosted glass: the X-pattern strip shows through, blurred */
  background: rgba(2, 2, 2, 0.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid var(--card-border);
  padding: 75px 39px 40px;
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 29.3px;
  line-height: 1.077;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}
.pillar h3 span { color: var(--yellow); }
.pillar p {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 19px;
  line-height: normal;
  color: #fff;
}
.pillars__marks {
  width: 143px;
  height: auto;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .whoweare__swirls { display: none; }
  .whoweare__title { white-space: normal; }
  .pillars__line { max-width: 12vw; }
}
@media (max-width: 700px) {
  .mission--studios .mission__inner { padding: 0 24px; }
  .whoweare__strip { margin-bottom: 20px; }
  .whoweare__band { padding: 48px 20px 40px; }
  .whoweare__xstrip { margin-top: 0; }
  .pillars { margin-top: 16px; }
  .pillars__line { display: none; }
  .pillar { width: 100%; max-width: 400px; min-height: 0; padding: 40px 32px; }
  .pillar p { margin-top: 20px; font-size: 16px; }
}

/* ---- polish: pillar hover lift ---- */
.pillar {
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.pillar:hover {
  transform: translateY(-6px);
  border-color: var(--yellow);
  background: rgba(2, 2, 2, 0.45);
}