.about-hero { padding-block: 50px 90px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 65px; align-items: center; }
.about-hero h1 { font-size: clamp(42px, 4.8vw, 66px); line-height: 1.15; letter-spacing: -.015em; }
.studio-name { color: var(--door); font-weight: 800; font-size: 14px; margin-bottom: 20px; }
.about-hero p:not(.studio-name) { margin-top: 20px; color: var(--muted); }
.about-hero .about-lead { font-size: 20px; }
.about-hero .text-link { margin-top: 19px; }
.about-hero > img { width: 100%; border-radius: 70px 70px 8px 8px; }
.about-section { padding-block: 80px; }
.about-heading { max-width: 760px; }
.about-heading p { margin-top: 20px; color: var(--muted); }
.film-process { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px 44px; padding: 0; margin: 38px 0 0; list-style: none; counter-reset: step; }
.film-process li { border-top: 1px solid var(--line); padding-top: 20px; counter-increment: step; }
.film-process li::before { content: counter(step); display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--moss); background: #e4e8da; margin-bottom: 13px; }
.film-process h3 { font-size: 24px; }
.film-process p { color: var(--muted); margin-top: 12px; font-size: 15px; max-width: 30ch; }
.claude-section { background: #e4e8da; padding-block: 75px; }
.about-columns { display: grid; grid-template-columns: 1fr 1.5fr; gap: 90px; }
.about-columns h2 { color: var(--moss); }
.about-columns p + p { margin-top: 20px; }
.about-columns .text-link { margin-top: 20px; }
.qa-description { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; margin-top: 38px; }
.qa-description h3 { font-size: 28px; }
.qa-description p { color: var(--muted); margin-top: 17px; }
.qa-description > div > p:first-child { margin-top: 0; }
.qa-description .button { margin-top: 25px; }
.founder-section { padding-block: 75px; background: var(--linen); }
@media (max-width:1050px) { .about-hero { gap: 35px; } .about-columns { gap: 45px; } }
@media (max-width:700px) {
  .about-hero { grid-template-columns: 1fr; padding-block: 32px 45px; gap: 30px; }
  .about-hero h1 { font-size: 46px; }
  .about-hero .about-lead { font-size: 18px; }
  .about-section { padding-block: 55px; }
  .film-process { grid-template-columns: 1fr 1fr; gap: 25px 20px; }
  .film-process h3 { font-size: 20px; }
  .film-process p { font-size: 14px; }
  .about-columns, .qa-description { grid-template-columns: 1fr; gap: 25px; }
  .claude-section, .founder-section { padding-block: 55px; }
  .qa-description h3 { font-size: 27px; }
}