/* Studio page: ivory, typographic, quiet */
.studio { padding: 0 var(--pad); }

.intro { padding: clamp(140px, 17vw, 280px) 0 clamp(50px, 7vw, 110px); }
.intro h1 { margin: 0; max-width: 12em; font: 500 clamp(46px, 8.6vw, 156px)/.95 var(--serif); letter-spacing: -.03em; }

.banner .media { aspect-ratio: 21 / 9; }
.banner img { object-position: 50% 60%; }

.belief { display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(80px, 11vw, 190px) 0 clamp(70px, 9vw, 150px); }
.belief .eyebrow { margin: 0; }
.belief .big { margin: 0; max-width: 19em; font: 400 clamp(28px, 3.8vw, 64px)/1.14 var(--serif); letter-spacing: -.015em; }
@media (min-width: 900px) { .belief { grid-template-columns: 1fr 3fr; } .belief .stages { grid-column: 2; } }
.belief .stages { margin-top: clamp(40px, 6vw, 100px); padding: 0; }
.belief .stages .eyebrow { margin: 0; }

.caps { padding: clamp(20px, 3vw, 50px) 0 clamp(70px, 9vw, 150px); }
.caps ol { list-style: none; margin: 0; padding: 0; }
.caps li {
  display: grid; grid-template-columns: clamp(34px, 4vw, 64px) 1fr; align-items: baseline; column-gap: clamp(10px, 2vw, 30px); row-gap: 8px;
  padding: clamp(18px, 2.2vw, 32px) 0; border-top: 1px solid #d9d4ca; transition: padding-left .6s cubic-bezier(.2,.7,.2,1);
}
.caps li:last-child { border-bottom: 1px solid #d9d4ca; }
.caps li span { font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--gold); }
.caps li b { font: 500 clamp(40px, 7vw, 124px)/.96 var(--serif); letter-spacing: -.025em; transition: color .4s; }
.caps li em { grid-column: 2; white-space: nowrap; font: 400 clamp(14px, 1.2vw, 17px)/1.4 var(--sans); font-style: normal; color: #6b675f; }
@media (min-width: 900px) { .caps li { grid-template-columns: clamp(34px, 4vw, 64px) 1fr minmax(0, 22em); } .caps li em { grid-column: 3; text-align: right; } }
.caps li:hover { padding-left: .25em; }
.caps li:hover b { color: var(--blush); }

/* the stages: a line draws across, and each step lights up as it is reached */
.stages { padding: 0 0 clamp(80px, 10vw, 170px); }
.stages ol { list-style: none; margin: clamp(24px, 3vw, 44px) 0 0; padding: 0; display: grid; gap: clamp(36px, 5vw, 56px); position: relative; }
.stages li { position: relative; padding: 0 0 0 clamp(34px, 6vw, 52px); font: 400 clamp(15px, 1.25vw, 18px)/1.5 var(--sans); color: #4a4741; max-width: 22em; }
.stages li b { display: block; font: 500 clamp(64px, 9vw, 150px)/.9 var(--serif); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px #b3ad9f; transition: -webkit-text-stroke-color .5s, transform .8s cubic-bezier(.2,.7,.2,1); }
.stages li span { display: block; margin: .5em 0 8px; font: 500 clamp(30px, 3vw, 48px)/1 var(--serif); letter-spacing: -.02em; color: var(--onyx); }
.stages li:hover b { -webkit-text-stroke-color: var(--blush); transform: translateX(.08em); }
/* the line (vertical on phones) and a node for each step */
.stages ol::before, .stages ol::after { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: #d9d4ca; }
.stages ol::after { background: linear-gradient(to bottom, var(--gold), var(--blush)); transform: scaleY(0); transform-origin: top; transition: transform 2.4s cubic-bezier(.4,.1,.2,1); }
.stages ol.in::after { transform: scaleY(1); }
.stages li::before { content: ""; position: absolute; left: -1px; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: var(--ivory); border: 1px solid #b9b3a6; transition: background .5s, border-color .5s; }
.stages ol.in li::before { background: var(--blush); border-color: var(--blush); transition-delay: calc(var(--i) * .55s); }
@media (min-width: 900px) {
  .stages ol { grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); padding-top: 44px; }
  .stages li { padding: 0; }
  .stages ol::before, .stages ol::after { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px; }
  .stages ol::after { transform: scaleX(0); transform-origin: left; }
  .stages ol.in::after { transform: scaleX(1); }
  .stages li::before { left: 0; top: -44px; }
}
.stages li:nth-child(1) { --i: 0; } .stages li:nth-child(2) { --i: 1; } .stages li:nth-child(3) { --i: 2; } .stages li:nth-child(4) { --i: 3; }

.clients { padding: 0 0 clamp(80px, 11vw, 180px); }
.clients .names { margin: 0; font: 500 clamp(30px, 5.4vw, 96px)/1.1 var(--serif); letter-spacing: -.02em; }
.clients i { display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--blush); margin: 0 .35em; vertical-align: .22em; }

/* quiet fade-up as sections arrive. The hidden state is set from the first paint (the page has the mo class from its head), so nothing shows and then fades out and back in. studio.js only adds .in */
.mo .intro h1, .mo .banner .media, .mo .belief .big, .mo .caps li, .mo .stages li { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.mo .intro h1.in, .mo .banner .media.in, .mo .belief .big.in, .mo .caps li.in, .mo .stages li.in { opacity: 1; transform: none; }
.mo .caps li { transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), padding-left .6s cubic-bezier(.2,.7,.2,1); }
.mo .stages li { transition-delay: calc(var(--i) * .4s); }