/* QGB-WEB-PAGE-STUDIO-01. Hero, communication cards and closing CTA only. */
#page-studio .studio-page-hero {
  padding: 12px 24px 24px;
  background: #f7f4ee;
}
#page-studio .studio-hero-frame {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 720px;
  aspect-ratio: auto;
  padding: 158px clamp(28px, 5vw, 76px) 142px;
  background-image: url("assets/studio/QGB-STUDIO-HERO-01.png");
  background-position: center;
  border-color: rgba(27,41,53, .12);
  box-shadow: 0 12px 32px rgba(27,41,53, .08);
}
#page-studio .studio-hero-frame::after {
  background: linear-gradient(90deg, rgba(27,41,53, .06) 20%, rgba(27,41,53, .24) 52%, rgba(27,41,53, .42));
}
#page-studio .studio-hero-copy {
  position: relative;
  inset: auto;
  width: min(50%, 550px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-studio .studio-hero-copy h1 {
  font-size: clamp(36px, 3.65vw, 52px);
  line-height: 1.08;
}
#page-studio .studio-hero-copy p {
  color: #ffffff;
  font-size: 18px;
}
#page-studio .studio-hero-copy .eyebrow {
  color: #ffffff;
  font-size: 12px;
}
#page-studio .studio-proof-strip span {
  border-color: rgba(255,255,255, .25);
  background: rgba(27,41,53, .32);
  box-shadow: none;
  color: #ffffff;
  font-size: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#page-studio .studio-overview { background: #ffffff; }
#page-studio #studio-overview-heading { font-size: clamp(34px, 4vw, 45px); }
#page-studio .studio-model-card:nth-child(n) {
  position: relative;
  overflow: hidden;
  padding-top: 232px;
  border-color: #d8d0c0;
  background: #f7f4ee;
  box-shadow: 0 6px 18px rgba(27,41,53, .04);
}
#page-studio .studio-model-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 208px;
  background-size: cover;
  background-position: center;
}
#page-studio .studio-model-card:nth-child(1)::before {
  background-image: url("assets/studio/QGB-STUDIO-COMM-SET-01-01.png");
}
#page-studio .studio-model-card:nth-child(2)::before {
  background-image: url("assets/studio/QGB-STUDIO-COMM-SET-01-02.png");
}
#page-studio .studio-model-card:nth-child(3)::before {
  background-image: url("assets/studio/QGB-STUDIO-COMM-SET-01-03.png");
}
#page-studio .studio-model-card:nth-child(4)::before {
  background-image: url("assets/studio/QGB-STUDIO-COMM-SET-01-04.png");
}
#page-studio .studio-model-card h3 {
  margin-top: 16px;
  font-size: 26px;
  color: #1b2935;
}
#page-studio .studio-model-card p { font-size: 15px; }
#page-studio .studio-model-card:hover { border-color: #758893; }

#page-studio .solid-final-cta::before {
  display: block;
  background-image: url("assets/studio/QGB-STUDIO-REALITY-BG-01.png");
  background-position: center;
}
#page-studio .solid-final-cta::after {
  display: block;
  background: radial-gradient(ellipse at center, rgba(27,41,53, .62), rgba(27,41,53, .24));
}
#page-studio .solid-final-cta h2 { font-size: clamp(34px, 4vw, 45px); }
#page-studio .solid-final-cta p { color: #ffffff; }

@media (max-width: 980px) {
  #page-studio .studio-page-hero { padding: 12px 16px 16px; }
  #page-studio .studio-hero-copy { width: 58%; }
  #page-studio .studio-hero-frame { background-position: 44% center; }
  #page-studio .studio-model-card:nth-child(n) { padding: 196px 24px 28px; }
  #page-studio .studio-model-card::before { height: 172px; }
}

@media (max-width: 640px) {
  #page-studio .studio-page-hero { padding: 8px 8px 16px; }
  #page-studio .studio-hero-frame {
    min-height: 720px;
    padding: 138px 24px 150px;
    background-image: url("assets/studio/QGB-STUDIO-HERO-01.png");
    background-position: 20% center;
  }
  #page-studio .studio-hero-frame::after {
    background: linear-gradient(180deg, rgba(27,41,53, .10), rgba(27,41,53, .48) 45%, rgba(27,41,53, .22));
  }
  #page-studio .studio-hero-copy { inset: auto; width: 100%; padding: 0; background: none; }
  #page-studio .studio-hero-copy h1 { font-size: clamp(34px, 9vw, 42px); }
  #page-studio .studio-hero-copy p { font-size: 17px; }
  #page-studio .studio-hero-copy .eyebrow { justify-content: flex-start; }
  #page-studio .studio-hero-actions { flex-direction: column; }
  #page-studio .studio-proof-strip { left: 16px; right: 16px; gap: 6px; }
  #page-studio .studio-proof-strip span { padding: 8px; font-size: 12px; line-height: 1.4; }
  #page-studio .studio-model-card:nth-child(n) { padding-top: 202px; }
  #page-studio .studio-model-card::before { height: 180px; }
  #page-studio .solid-final-cta::before { background-position: 20% center; }
}