/* =============================================================
   FLATGRID STUDIO — services · contact · coming soon
   Three page shapes on one frame. Everything starts on the first
   grid rule, which is also what keeps the rail control clear.
   ============================================================= */

.page-sheet,
.page-dark{
  height:auto;
  overflow:visible;                 /* the reset closes the body; open it */
  --edge: calc(var(--col) * 1);
}
.page-sheet.is-navlocked,
.page-dark.is-navlocked{overflow:hidden}

.page-sheet{background:var(--white);color:var(--ink)}
/* the guides sit low on ink — present, but never competing with the type */
.page-dark {background:var(--ink); color:var(--paper); --rule:rgba(251,248,243,.10)}

/* ---------- chrome ---------- */
/* the wordmark and the rail are positioned once, in style.css */

/* a sheet is white all the way down, so the wordmark simply wears its
   brandmark — the same swap the menu page makes, no measuring needed */
.page-sheet .logo__wordmark{opacity:0}
.page-sheet .logo__mark{opacity:1}
.page-sheet .menu__bars i{background:var(--ink)}
.page-sheet .menu__label{color:rgba(20,20,21,.62)}
.page-sheet .menu:hover .menu__bars i{background:var(--accent)}

/* ---------- reveals ---------- */
.js .up{opacity:0;transform:translate3d(0,26px,0)}
.js .up.is-seen{
  opacity:1;transform:none;
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js .up.is-seen.d1{transition-delay:.09s}
.js .up.is-seen.d2{transition-delay:.18s}
.js .up.is-seen.d3{transition-delay:.27s}

/* a display line that rises out of its own mask instead of fading */
.mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.js .mask.up{opacity:1;transform:none}
.mask span{display:block}
.js .mask.up span{transform:translateY(112%);transition:transform .95s var(--ease)}
.js .mask.up.is-seen span{transform:none}

/* =============================================================
   THE SHEET
   Full bleed, so the six columns land on the same percentages the
   rest of the site uses; the sections carry the frame.
   ============================================================= */
.sheet{position:relative;padding-bottom:clamp(60px,9vh,120px)}

.sheet__head{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:clamp(120px,20vh,240px) 0 clamp(56px,9vh,120px);
}
.sheet__eyebrow{
  grid-column:2 / span 2;grid-row:1;
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.sheet__title{
  grid-column:2 / span 4;grid-row:2;
  margin:clamp(16px,2.4vh,30px) 0 0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(38px,6.2vw,110px);
  line-height:.94;letter-spacing:-.038em;
}
.page-dark .sheet__title{color:var(--paper)}
.page-dark .sheet__lead {color:rgba(251,248,243,.58)}

.sheet__lead{
  grid-column:4 / span 3;grid-row:3;
  margin-top:clamp(26px,4vh,52px);
  padding-right:var(--pad);
  max-width:54ch;
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.28vw,21px);
  line-height:1.46;letter-spacing:-.012em;
  color:rgba(20,20,21,.66);
}

/* =============================================================
   SERVICES
   Number, name, description — each one a rule further in, so the
   eye steps down the hierarchy without any change of weight.
   ============================================================= */
.svcs{position:relative;z-index:1}

/* No rules anywhere: the columns and the space between the blocks carry it.
   The name is set monumentally across four columns and the description is a
   single narrow measure placed on the fourth rule — big type against one
   small precise paragraph, with air doing the separating. */
.svc{
  position:relative;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:clamp(46px,8vh,120px) 0;
}
.svc__idx{
  grid-column:2;grid-row:1;
  margin-bottom:clamp(16px,2.4vh,30px);
  font-family:var(--ui);
  font-size:11px;font-weight:400;
  letter-spacing:.16em;
  color:rgba(251,248,243,.38);
  font-variant-numeric:tabular-nums;
}
.svc__name{
  grid-column:2 / span 4;grid-row:2;
  margin:0;
  padding-right:var(--pad);
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,6vw,128px);
  line-height:.9;letter-spacing:-.042em;
  color:var(--paper);
}
.svc__text{
  grid-column:4 / span 3;grid-row:3;
  margin-top:clamp(34px,5.6vh,72px);
  padding-right:var(--pad);
  max-width:38ch;                   /* one module and a little, as the reference sets it */
  font-family:var(--display);font-weight:400;
  font-size:13px;
  line-height:1.72;letter-spacing:0;
  color:rgba(251,248,243,.55);
}

/* =============================================================
   THE WAY ON
   A band at the foot of a sheet, on ink, carrying one invitation.
   ============================================================= */
.band{
  position:relative;
  margin-top:clamp(40px,7vh,96px);
  background:var(--ink);color:var(--paper);
  padding:clamp(64px,11vh,150px) var(--pad) clamp(56px,9vh,120px) var(--edge);
}
/* on a page that is already ink the band needs no ground of its own */
.page-dark .band{background:transparent}
.band__label{
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.band__link{
  display:inline-flex;align-items:baseline;gap:.34em;
  margin-top:clamp(12px,1.8vh,26px);
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,5vw,84px);
  line-height:1;letter-spacing:-.036em;
  color:var(--paper);
  transition:color var(--t-hover) var(--ease-out);
}
.band__link svg{flex:none;width:.3em;height:.3em;transition:transform .34s var(--ease-out)}
.band__link:hover{color:var(--accent)}
.band__link:hover svg{transform:translate(.16em,-.16em)}

/* =============================================================
   CONTACT
   Details on the left two columns, the form on the last three.
   ============================================================= */
/* the guides belonging to the fourth, fifth and sixth columns come off, so
   nothing rules through the form; the first two stay to hold the details */
.page-contact .cols i:nth-child(3),
.page-contact .cols i:nth-child(4),
.page-contact .cols i:nth-child(5){display:none}

.contact{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding-bottom:clamp(56px,9vh,120px);
}
.contact__aside{
  grid-column:2 / span 2;
  padding-right:clamp(24px,3vw,52px);
}
.contact__form{
  grid-column:4 / span 3;
  padding-right:var(--pad);
}

.detail{margin-bottom:clamp(26px,4vh,46px)}
.detail dt{
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(20,20,21,.44);
}
.detail dd{
  margin:.55em 0 0;
  font-family:var(--display);font-weight:400;
  font-size:clamp(14px,1.1vw,17px);
  line-height:1.5;letter-spacing:-.012em;
  color:var(--ink);
}
.detail a{
  color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;
  transition:color var(--t-hover) var(--ease-out);
}
.detail a:hover{color:var(--accent)}
.detail--links dd a{display:block;margin-bottom:.4em}

/* ---------- the form ---------- */
.field{margin-bottom:clamp(22px,3.4vh,38px)}
.field label{
  display:block;
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(20,20,21,.44);
}
.field label em{font-style:normal;color:rgba(20,20,21,.28)}

.field input,
.field select,
.field textarea{
  display:block;width:100%;
  margin-top:.7em;padding:0 0 .7em;
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.4;letter-spacing:-.014em;
  color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid rgba(20,20,21,.24);
  border-radius:0;                  /* iOS rounds these otherwise */
  transition:border-color .25s var(--ease-out);
}
.field textarea{resize:vertical;min-height:6.5em}
.field select{
  -webkit-appearance:none;appearance:none;
  padding-right:1.4em;
  background-image:linear-gradient(45deg,transparent 50%,rgba(20,20,21,.5) 50%),
                   linear-gradient(135deg,rgba(20,20,21,.5) 50%,transparent 50%);
  background-position:right 6px bottom 1.15em, right 1px bottom 1.15em;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.field input:focus,
.field select:focus,
.field textarea:focus{outline:0;border-bottom-color:var(--accent)}
.field input::placeholder,
.field textarea::placeholder{color:rgba(20,20,21,.3)}
/* the browser's own message is fine, but only once they have tried */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid{border-bottom-color:#c8452a}

.form__send{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:clamp(10px,2vh,22px);
  padding:1.15em 1.6em;
  background:var(--accent);color:var(--ink-2);
  font-family:var(--ui);
  font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s var(--ease-out),color .25s var(--ease-out);
}
.form__send svg{transition:transform .3s var(--ease-out)}
.form__send:hover{background:var(--ink);color:var(--paper)}
.form__send:hover svg{transform:translate(4px,-4px)}
.form__send[disabled]{opacity:.5;pointer-events:none}

.form__note{
  margin-top:clamp(16px,2.4vh,26px);
  font-family:var(--display);font-weight:400;
  font-size:13px;line-height:1.6;
  color:rgba(20,20,21,.55);
}
.form__note[hidden]{display:none}
.form__note.is-bad{color:#c8452a}

/* =============================================================
   COMING SOON
   The grid does the talking: one line held across four columns,
   the facts of it underneath on the rule.
   ============================================================= */
.soon{
  position:relative;
  min-height:100svh;
  display:grid;grid-template-columns:repeat(6,1fr);
  align-content:center;
  padding:clamp(120px,18vh,200px) 0 clamp(70px,11vh,140px);
}
.soon__eyebrow{
  grid-column:2 / span 3;
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.soon__title{
  grid-column:2 / span 4;
  margin:clamp(18px,2.6vh,34px) 0 0;
  padding-right:var(--pad);
  font-family:var(--display);font-weight:600;
  font-size:clamp(40px,7.4vw,132px);
  line-height:.9;letter-spacing:-.04em;
  color:var(--paper);
}
.soon__note{
  grid-column:4 / span 3;
  margin-top:clamp(30px,5vh,60px);
  padding-right:var(--pad);
  max-width:50ch;
  font-family:var(--display);font-weight:400;
  font-size:clamp(14px,1.1vw,17px);
  line-height:1.62;
  color:rgba(251,248,243,.6);
}
.soon__meta{
  grid-column:2 / span 2;
  margin:clamp(30px,5vh,60px) 0 0;
  padding-right:clamp(24px,3vw,52px);
}
.soon__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px 18px;
  flex-wrap:wrap;
  padding:clamp(10px,1.3vh,15px) 0;
  border-top:1px solid rgba(251,248,243,.18);
}
.soon__row:last-child{border-bottom:1px solid rgba(251,248,243,.18)}
.soon__meta dt{
  flex:none;
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(251,248,243,.45);
}
.soon__meta dd{
  margin:0 0 0 auto;text-align:right;
  font-family:var(--display);font-weight:400;
  font-size:14px;letter-spacing:-.012em;
  color:var(--paper);
}
.soon__ping{
  grid-column:4 / span 3;
  justify-self:start;
  margin-top:clamp(30px,5vh,58px);
  font-family:var(--display);font-weight:400;
  font-size:clamp(14px,1.1vw,17px);
  color:var(--accent);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  transition:color var(--t-hover) var(--ease-out);
}
.soon__ping:hover{color:var(--paper)}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:900px){
  .cols{display:none}

  .sheet__head{
    display:block;
    padding:clamp(96px,15vh,150px) var(--pad) clamp(38px,6vh,64px);
  }
  .sheet__title{font-size:clamp(34px,8.4vw,56px);margin-top:14px}
  .sheet__lead{padding:0;margin-top:clamp(20px,3.4vh,32px);max-width:none}

  .svc{display:block;padding:clamp(34px,5.4vh,56px) var(--pad)}
  .svc__idx{margin-bottom:12px}
  .svc__name{padding:0;font-size:clamp(30px,8.6vw,54px)}
  .svc__text{padding:0;margin-top:clamp(18px,3vh,28px);max-width:44ch}

  .band{padding-left:var(--pad)}

  .contact{display:block;padding:0 var(--pad) clamp(40px,6vh,72px)}
  .contact__aside{padding:0;margin-bottom:clamp(38px,6vh,64px)}
  .contact__form{padding:0}

  .soon{display:block;padding:clamp(110px,17vh,170px) var(--pad) clamp(60px,9vh,110px)}
  .soon__title{padding:0;font-size:clamp(38px,10.5vw,66px)}
  .soon__note{padding:0;margin-top:clamp(24px,4vh,40px);max-width:none}
  .soon__meta{padding:0;margin-top:clamp(26px,4.4vh,44px)}
  .soon__ping{display:inline-block;margin-top:clamp(26px,4.4vh,44px)}

}

@media (max-width:600px){
  .page-sheet .logo__mark{height:26px}
}

/* =============================================================
   MOTION PREFERENCES
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .js .up{opacity:1!important;transform:none!important}
  .js .mask.up span{transform:none;transition:none}
}

/* =============================================================
   THE MAGAZINE SETTING
   A label at reading size over a narrow measure of small type —
   the setting the Design Canada designer pages use, and what makes
   a dark page read like a spread rather than a screen.
   ============================================================= */
.mag{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
}
.mag__label{
  margin:0 0 clamp(14px,2.1vh,26px);
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.15vw,18px);
  letter-spacing:.006em;
  color:var(--paper);
}
.mag__text{
  margin:0;
  font-family:var(--display);font-weight:400;
  font-size:12.5px;
  line-height:1.76;letter-spacing:0;
  color:rgba(251,248,243,.58);
  max-width:34ch;
}
.mag__text + .mag__text{margin-top:1.3em}
.mag__block{padding-right:clamp(18px,2.1vw,40px)}
.mag__block:nth-of-type(1){grid-column:4}
.mag__block:nth-of-type(2){grid-column:5}
.mag__block:nth-of-type(3){grid-column:6;padding-right:var(--pad)}

/* small facts, set right on a column of their own */
.facts{margin:0}
.facts__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;
  flex-wrap:wrap;
  padding:clamp(9px,1.2vh,14px) 0;
  border-top:1px solid rgba(251,248,243,.16);
}
.facts__row:last-child{border-bottom:1px solid rgba(251,248,243,.16)}
.facts dt{
  flex:none;
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(251,248,243,.42);
}
.facts dd{
  margin:0 0 0 auto;text-align:right;
  font-family:var(--display);font-weight:400;
  font-size:13.5px;letter-spacing:-.01em;
  color:var(--paper);
}

/* =============================================================
   STUDIO
   ============================================================= */
.studio__top{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:clamp(96px,15vh,180px) 0 clamp(40px,6vh,80px);
}

/* the two brand lines, carried over from the home page */
.studio__note{
  grid-row:1;
  margin:0;
  padding-right:clamp(18px,2vw,38px);
  font-family:var(--ui);
  font-size:clamp(10.5px,.68vw,12.5px);
  line-height:1.45;letter-spacing:.005em;
  color:rgba(251,248,243,.86);
}
.studio__note em{font-style:normal;color:var(--accent)}
.studio__note--a{grid-column:4}
.studio__note--b{grid-column:5}

.studio__figure{
  grid-column:2 / span 4;grid-row:2;
  position:relative;
  margin:clamp(34px,6vh,78px) clamp(18px,2vw,38px) 0 0;
}
.studio__plate{
  aspect-ratio:8 / 5;               /* the site's one plate proportion */
  background:#1b1b1c;
  outline:1px solid rgba(251,248,243,.10);outline-offset:-1px;
  display:grid;place-items:center;
  overflow:hidden;
}
.studio__plate img{width:100%;height:100%;object-fit:cover}
.studio__plate:empty::after{
  content:attr(data-slot);
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(251,248,243,.3);
}
/* the caption sits inside the foot of the plate, as the sketch has it */
.studio__cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;
  flex-wrap:wrap;
  padding:clamp(13px,1.7vh,19px) clamp(13px,1.2vw,18px);
  font-family:var(--ui);
  font-size:11px;letter-spacing:.02em;
  color:var(--paper);
  background:linear-gradient(to top,rgba(10,10,11,.72),rgba(10,10,11,0));
}
.studio__cap a{
  color:var(--accent);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;
  transition:color var(--t-hover) var(--ease-out);
}
.studio__cap a:hover{color:var(--paper)}

.studio__ctas{
  grid-column:6;grid-row:2;
  margin-top:clamp(34px,6vh,78px);
  padding-right:var(--pad);
}

/* A label over the invitation itself, with the arrow set to the far edge —
   the same shape as a facts row, so it belongs, but plainly a way out. */
.cta-line{
  display:block;
  padding:clamp(13px,1.9vh,20px) 0;
  border-top:1px solid rgba(251,248,243,.16);
  color:var(--paper);
  transition:color var(--t-hover) var(--ease-out);
}
.cta-line:last-child{border-bottom:1px solid rgba(251,248,243,.16)}
.cta-line__label{
  display:block;
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(251,248,243,.42);
  transition:color var(--t-hover) var(--ease-out);
}
.cta-line__go{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:.6em;
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.3vw,20px);
  letter-spacing:-.016em;
}
.cta-line__go svg{flex:none;transition:transform .3s var(--ease-out)}
.cta-line:hover{color:var(--accent)}
.cta-line:hover .cta-line__label{color:var(--accent)}
.cta-line:hover svg{transform:translate(4px,-4px)}

.studio__read{padding:clamp(44px,7vh,96px) 0 clamp(30px,5vh,70px)}
.studio__read .mag__block:nth-of-type(1){grid-column:2}
.studio__read .mag__block:nth-of-type(2){grid-column:3}
/* the base rule gives the third block the frame padding, because on the
   director page it is the last column; here it is not, so it takes the same
   measure as its neighbours */
.studio__read .mag__block:nth-of-type(3){grid-column:4;padding-right:clamp(18px,2.1vw,40px)}
.studio__read .mag__block:nth-of-type(4){grid-column:5}
.studio__read .facts{grid-column:6;padding-right:var(--pad)}

/* ---------- the way of working ---------- */
.steps{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:clamp(50px,8vh,110px) 0;
}
.steps__head{
  grid-column:2 / span 4;
  margin:0 0 clamp(34px,5.6vh,72px);
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,4.2vw,78px);
  line-height:.98;letter-spacing:-.036em;
  color:var(--paper);
}
.step{padding-right:clamp(18px,2.1vw,40px)}
.step:nth-of-type(1){grid-column:2}
.step:nth-of-type(2){grid-column:3}
.step:nth-of-type(3){grid-column:4}
/* column 5 is not the last column here, so it keeps the others' measure */
.step:nth-of-type(4){grid-column:5}
.step__idx{
  margin:0 0 clamp(10px,1.4vh,16px);
  font-family:var(--ui);
  font-size:11px;letter-spacing:.16em;
  color:rgba(251,248,243,.38);
  font-variant-numeric:tabular-nums;
}
.step__name{
  margin:0 0 clamp(10px,1.5vh,17px);
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.15vw,18px);
  letter-spacing:.006em;
  color:var(--paper);
}
.step__text{
  margin:0;
  font-family:var(--display);font-weight:400;
  font-size:12.5px;line-height:1.76;
  color:rgba(251,248,243,.55);
}

/* ---------- the disciplines, compact ---------- */
.page-studio .svcs{padding-top:clamp(30px,5vh,64px)}
.page-studio .svc{padding:clamp(26px,4.2vh,54px) 0}
.page-studio .svc__idx{grid-column:2;grid-row:1;margin-bottom:clamp(10px,1.4vh,16px)}
.page-studio .svc__name{
  grid-column:2 / span 2;grid-row:2;
  padding-right:clamp(18px,2vw,38px);
  font-size:clamp(22px,2.4vw,42px);line-height:1.02;
}
.page-studio .svc__text{
  grid-column:4 / span 2;grid-row:2;
  margin-top:.35em;
  padding-right:var(--pad);
  font-size:12.5px;line-height:1.76;
  max-width:none;
}

/* =============================================================
   THE CREATIVE DIRECTOR
   The expanded page: the name at full size across the portrait,
   then the facts and the reading matter beneath it.
   ============================================================= */
.who{position:relative;z-index:1}

.who__stage{
  position:relative;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:clamp(96px,15vh,190px) 0 clamp(30px,5vh,62px);
}
.who__plate{
  grid-column:3 / span 4;grid-row:1;
  aspect-ratio:16 / 10;
  margin-right:var(--pad);
  background:#1b1b1c;
  outline:1px solid rgba(251,248,243,.10);outline-offset:-1px;
  display:grid;place-items:center;
  overflow:hidden;
}
.who__plate img{width:100%;height:100%;object-fit:cover}
.who__plate:empty::after{
  content:attr(data-slot);
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(251,248,243,.3);
}
/* the name crosses the picture, the way the reference sets it */
.who__name{
  grid-column:2 / span 3;grid-row:1;
  align-self:center;
  z-index:2;
  margin:0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(38px,7vw,150px);
  line-height:.88;letter-spacing:-.044em;
  color:var(--paper);
  text-shadow:0 2px 40px rgba(10,10,11,.55);
}
.who__role{
  grid-column:2 / span 2;grid-row:2;
  margin:clamp(20px,3vh,38px) 0 0;
  font-family:var(--display);font-weight:400;
  font-size:clamp(14px,1.1vw,17px);
  color:rgba(251,248,243,.66);
}

.who__facts{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:clamp(34px,5.5vh,74px) 0 0;
}
.who__facts > *:nth-child(1){grid-column:4;padding-right:clamp(18px,2.1vw,40px)}
.who__facts > *:nth-child(2){grid-column:5;padding-right:clamp(18px,2.1vw,40px)}
.who__facts > *:nth-child(3){grid-column:6;padding-right:var(--pad)}
.who__big{
  margin:0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2vw,34px);
  line-height:1.06;letter-spacing:-.026em;
  color:var(--paper);
}
.who__small dt{
  font-family:var(--ui);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(251,248,243,.42);
}
.who__small dd{
  margin:.6em 0 0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(14px,1.15vw,18px);letter-spacing:-.014em;
  color:var(--paper);
}

.who__read{padding:clamp(44px,7vh,96px) 0 clamp(50px,8vh,110px)}

/* =============================================================
   RESPONSIVE — studio and the director
   ============================================================= */
@media (max-width:900px){
  .mag{display:block;padding-left:var(--pad);padding-right:var(--pad)}
  .mag__block{padding:0;margin-bottom:clamp(28px,4.4vh,44px)}
  .mag__text{max-width:none}

  .studio__top{display:block;padding:clamp(96px,15vh,150px) var(--pad) clamp(30px,5vh,52px)}
  .studio__note{padding:0;margin-bottom:12px}
  .studio__figure{margin:clamp(26px,4.4vh,44px) 0 0}
  .studio__ctas{margin-top:clamp(24px,4vh,38px);padding:0}
  .studio__read .facts{margin-top:clamp(10px,2vh,20px)}

  .steps{display:block;padding:clamp(40px,6.4vh,72px) var(--pad)}
  .steps__head{margin-bottom:clamp(26px,4.4vh,44px);font-size:clamp(28px,8.2vw,50px)}
  .step{padding:0;margin-bottom:clamp(26px,4.2vh,42px)}

  .page-studio .svc__name{padding:0;font-size:clamp(22px,6.2vw,34px)}
  .page-studio .svc__text{padding:0;margin-top:14px}

  .who__stage{display:block;padding:clamp(96px,15vh,150px) var(--pad) clamp(26px,4.4vh,44px)}
  .who__plate{margin:0}
  .who__name{margin:clamp(22px,3.6vh,36px) 0 0;font-size:clamp(38px,11vw,74px);text-shadow:none}
  .who__role{margin-top:clamp(14px,2.2vh,22px)}
  .who__facts{display:block;padding:clamp(28px,4.6vh,48px) var(--pad) 0}
  .who__facts > *{padding:0;margin-bottom:clamp(22px,3.6vh,36px)}
}